Fix UX bug: Add loading state to Play Online and Practice with Bot buttons#367
Open
Abhishek2005-ard wants to merge 2 commits intoAOSSIE-Org:mainfrom
Open
Fix UX bug: Add loading state to Play Online and Practice with Bot buttons#367Abhishek2005-ard wants to merge 2 commits intoAOSSIE-Org:mainfrom
Abhishek2005-ard wants to merge 2 commits intoAOSSIE-Org:mainfrom
Conversation
📝 WalkthroughWalkthroughUpdated Authentication page LeftSection UI with gradient, backdrop blur, text logo, cover image and quote style/animations; updated Home page to add a Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
frontend/src/Pages/Authentication.tsx (1)
14-16: Add reduced-motion fallbacks for hover animations.Line 15, Line 27, and Line 33 introduce motion effects without a
prefers-reduced-motionfallback. Add Tailwindmotion-reduce:*utilities so motion-sensitive users can opt out.Proposed accessibility tweak
- <div className="flex items-center text-xl font-bold - hover:scale-105 transition-transform duration-300 cursor-pointer"> + <div className="flex items-center text-xl font-bold + hover:scale-105 transition-transform duration-300 motion-reduce:transform-none motion-reduce:transition-none cursor-pointer"> ... - className="max-w-full max-h-full object-contain - hover:scale-105 transition-transform duration-500" + className="max-w-full max-h-full object-contain + hover:scale-105 transition-transform duration-500 motion-reduce:transform-none motion-reduce:transition-none" ... - <blockquote className="space-y-2 - hover:translate-y-[-5px] transition-all duration-300"> + <blockquote className="space-y-2 + hover:translate-y-[-5px] transition-all duration-300 motion-reduce:transform-none motion-reduce:transition-none">Also applies to: 26-27, 32-33
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@frontend/src/Pages/Authentication.tsx` around lines 14 - 16, The hover scale animations in the Authentication component (the outer div with className starting "flex items-center text-xl font-bold ..." and the Link elements that also use hover:scale-105) lack prefers-reduced-motion fallbacks; update the className strings for those elements (the top-level div and the two Link/interactive elements around lines referenced) to include Tailwind motion-reduce utilities such as motion-reduce:transform-none and motion-reduce:transition-none (or motion-reduce:animate-none where appropriate) so that users with prefers-reduced-motion enabled do not receive the hover scale/transition effects.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@frontend/src/Pages/Authentication.tsx`:
- Around line 8-39: The PR promised loading/disabled/spinner behavior for the
“Play Online” and “Practice with Bot” buttons but the diff only contains the
LeftSection visual markup; implement the promised behavior or update the PR
scope. To implement: add two state flags (e.g., isLoadingPlayOnline and
isLoadingPracticeBot) in the Authentication component, create handlers
handlePlayOnline and handlePracticeWithBot that set the corresponding loading
flag, disable the button, and show a spinner UI until the async action completes
(reset flag on success/error); update the Play Online and Practice with Bot
buttons (use unique identifiers like play-online-btn and practice-bot-btn or
their current JSX elements) to bind disabled={isLoading...},
onClick={handle...}, and conditionally render a spinner element/class while
loading. Alternatively, if you do not intend to add this behavior, update the PR
title/body to reflect that only visual/layout changes to LeftSection were made.
---
Nitpick comments:
In `@frontend/src/Pages/Authentication.tsx`:
- Around line 14-16: The hover scale animations in the Authentication component
(the outer div with className starting "flex items-center text-xl font-bold ..."
and the Link elements that also use hover:scale-105) lack prefers-reduced-motion
fallbacks; update the className strings for those elements (the top-level div
and the two Link/interactive elements around lines referenced) to include
Tailwind motion-reduce utilities such as motion-reduce:transform-none and
motion-reduce:transition-none (or motion-reduce:animate-none where appropriate)
so that users with prefers-reduced-motion enabled do not receive the hover
scale/transition effects.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: b86c054e-78ea-43fa-ae68-f6f4a48f251b
📒 Files selected for processing (1)
frontend/src/Pages/Authentication.tsx
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@frontend/src/Pages/Home.tsx`:
- Around line 23-35: The loading state set in handlePlayDebateClick (and the
similar handler around lines 37-49) is not used in the UI, allowing re-click
races; fix by guarding the handler early (if loading) return,
setLoading('online') immediately, perform the delay/logic, then navigate, and
only clear loading when navigation fails (or rely on route change). Also bind
the loading state to the PlayDebate button (and other related buttons) by
setting disabled={!!loading} and swap the button label to a spinner/“Loading…”
when loading is truthy so clicks are prevented and UX reflects progress; update
both handlePlayDebateClick and the other handler to follow this centralized
pattern.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 8727feaf-4537-4520-84b6-9cd05d02794b
📒 Files selected for processing (1)
frontend/src/Pages/Home.tsx
Contributor
|
include relevant ss evidence |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fix: Missing Loading State on Action Buttons
Problem
Currently, when users click on:
Play Online
Practice with Bot
There is no visual feedback, making the UI feel unresponsive. This can confuse users and lead to repeated clicks.
Solution
Added a loading state using
useStateDisabled buttons while action is in progress
Added spinner indicator for visual feedback
Updated button text dynamically (e.g., "Starting...", "Launching Bot...")
Introduced a small delay to simulate async navigation
Result
Improved user experience
Prevents multiple clicks
Provides immediate visual feedback
How to Test
Spinner appears
Button text changes
Button is disabled
Notes
This change improves UX consistency and aligns with modern UI feedback practices.
Summary by CodeRabbit
New Features
Style