Skip to content

🎨 Palette: Add loading state to login button #13

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
BenjaminWie wants to merge 1 commit into
base: main
Choose a base branch
from
Open

🎨 Palette: Add loading state to login button #13

BenjaminWie wants to merge 1 commit into from

Conversation

@BenjaminWie
Copy link
Owner

@BenjaminWie BenjaminWie commented Jan 28, 2026

💡 What: This change adds a loading state to the login button and replaces the jarring alert() on failed login with a smooth, inline error message.

🎯 Why: The previous login experience provided no feedback after the user clicked the "Guide öffnen" button. This could lead to confusion and multiple clicks. The alert() for a failed login was also disruptive. This enhancement makes the login process feel more responsive and professional.

📸 Before/After:

  • Before: Clicking the login button gave no immediate feedback. Errors were shown in a system alert().
  • After: The button now shows a spinner and the text "Wird geladen..." and is disabled during the login attempt. Errors are displayed gracefully below the input field.

♿ Accessibility:

  • The button is disabled during submission to prevent multiple form submissions.
  • An aria-live="polite" region is added to the button to announce the loading state to screen readers.
  • The inline error message is associated with the input field, making it accessible to screen readers.

PR created automatically by Jules for task 14265596760907621539 started by @BenjaminWie

@google-labs-jules @BenjaminWie
I've made the following changes to improve the login experience:
330372f 
- I've added a loading indicator to the `LoginView` component.
- The login button is now disabled and shows a spinner during login attempts, providing clear visual feedback.
- I've replaced the disruptive alert on login failure with an inline error message displayed below the email field.
- I wired the error state from `App.tsx` to `LoginView.tsx` to enable this.
- I also added `aria-live="polite"` to the button for better screen reader announcements.

Co-authored-by: BenjaminWie <54136562+BenjaminWie@users.noreply.github.com>
@google-labs-jules
Copy link
Contributor

google-labs-jules bot commented Jan 28, 2026

👋 Jules, reporting for duty! I'm here to lend a hand with this pull request.

When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down.

I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job!

For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

New to Jules? Learn more at jules.google/docs.

For security, I will only act on instructions from the user who triggered this task.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@BenjaminWie