🎨 Palette: Add async loading states to auth buttons#174
Conversation
- Captures form submissions via e.submitter to target the correct button - Adds disabled state and ⏳ Loading... text during async API calls - Ensures state is cleanly reset using try/finally blocks - Refactors Google Sign-in setTimeout into an awaitable promise for proper finally execution - Appends new learning to .Jules/palette.md about async UI feedback 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 visual loading and disabled states to the email login, email registration, and Google sign-in buttons during asynchronous authentication operations.
🎯 Why
To prevent users from double-clicking submit buttons during latency, which can cause duplicate API requests and errors, and to provide immediate visual feedback that the application is actively processing their request. This significantly improves user confidence.
📸 Before/After
Before: Buttons remained active and visually static after clicking submit, providing no indication that a background request was in progress.
After: Buttons immediately become disabled, their opacity is reduced, cursor changes to 'not-allowed', and the text updates to "⏳ Loading...". Once the request completes (or fails), the button's state is fully restored.
♿ Accessibility
The
disabledHTML attribute inherently communicates to screen readers that the interactive element is currently unavailable, preventing further keyboard interaction until the async process resolves.PR created automatically by Jules for task 3494836327034013892 started by @singhaditya21