🎨 Palette: Add loading state to form submit buttons#180
Conversation
…ding state to our async forms. I updated the primary buttons on the Login and Registration forms. Now, by safely accessing the triggering element, we temporarily disable the button, lower its opacity, and update its text (e.g., "Logging in...") while the async API request is running. I also included a `finally` block to guarantee the button returns to its original state once the request finishes, ensuring it never gets stuck disabled. This will provide immediate, localized feedback to the user! 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 primary submit buttons on the Login and Registration forms. When an async API request is triggered, the button is temporarily disabled, its opacity is lowered to 0.7, and the text updates to indicate progress (e.g., "Logging in..."). A
finallyblock guarantees the button's original text, disabled state, and opacity are restored once the request completes or fails.🎯 Why:
Without this visual feedback, users might click the submit button multiple times if the network is slow or the API takes a moment to respond, leading to duplicate submissions or confusion about whether their action registered. The loading state provides immediate, localized feedback that their request is being processed.
📸 Before/After:
Before: Clicking 'Sign In with Email' provided no visual change to the button while waiting for the toast notification or redirect.
After: Clicking the button immediately updates it to a disabled "Logging in..." state, preventing further clicks until resolution.
♿ Accessibility:
Disabling the button natively sets the
disabledattribute, which screen readers correctly interpret, preventing users from tabbing to or interacting with a button that is currently processing a request.PR created automatically by Jules for task 13873263579355075481 started by @singhaditya21