🎨 Palette: Add robust visual loading states to authentication buttons#149
🎨 Palette: Add robust visual loading states to authentication buttons#149singhaditya21 wants to merge 1 commit into
Conversation
- Modified handleLogin, handleRegister, and handleGoogleSignIn in web-demo/js/app.js. - Utilized e.submitter to target the correct trigger button. - Updated innerHTML to 'Loading...', added disabled=true, and aria-busy=true. - Ensured state restoration happens reliably within a finally block. - Converted setTimeout in handleGoogleSignIn to an awaited Promise so the finally block executes properly. - Created .Jules/palette.md to document the UX learning. 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 robust visual loading states to the authentication buttons (Login, Register, and Google Sign-In) in the web-demo app.
🎯 Why: Users need immediate feedback that their authentication request is processing. This prevents them from repeatedly clicking the button or thinking the app is unresponsive.
♿ Accessibility: Added
aria-busy="true"to the buttons while loading and disabled them to prevent duplicate submissions, adhering to good accessibility and UX practices. Also ensured that the state cleanly recovers in afinallyblock even if the request fails.📸 Before/After: The buttons now visually change to "Loading..." and become inactive during the async mock API calls.
PR created automatically by Jules for task 9426896955558119999 started by @singhaditya21