🎨 Palette: Add loading state to authentication buttons#146
🎨 Palette: Add loading state to authentication buttons#146singhaditya21 wants to merge 1 commit into
Conversation
… loading state to the auth buttons. Here is a summary of the changes I made: - Modified `handleLogin` and `handleRegister` in `app.js` to disable the authentication button, append a loading spinner, and set `aria-busy="true"` during the async API call. - Added CSS styles for `.btn:disabled` and `.btn[aria-busy="true"]` to reduce opacity and set `cursor: not-allowed`. - Ensured the state resets correctly whether the network request succeeds or fails by using `finally` blocks. Co-authored-by: singhaditya21 <53948039+singhaditya21@users.noreply.github.com>
|
👋 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 New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
1 participant
💡 What
Added a visual loading state to the authentication buttons (Login and Register) when they are clicked.
🎯 Why
When users submit the form, they need immediate visual feedback that their action is being processed. Disabling the button prevents duplicate API requests if they click multiple times, and the text change plus opacity drop makes it clear the app is working.
📸 Before/After
Before: Clicking "Sign In with Email" left the button active and unchanged while the async request completed.
After: Clicking the button disables it, drops its opacity to 0.7, sets
cursor: not-allowed, changes its text to "⌛ Logging in...", and prevents double clicks.♿ Accessibility
Added
aria-busy="true"dynamically to the button while it is loading, communicating the processing state to screen readers.PR created automatically by Jules for task 4396122946392538920 started by @singhaditya21