🎨 Palette: Add loading state to Button #218
Conversation
…dded an `isLoading` prop to `Button.tsx` to display a spinner and disable the button, and created a `Spinner.tsx` component with Neobrutalism/Glassmorphism styling support. Additionally, I updated `Auth.tsx` to use the new prop on the authentication button and cleaned up the manual loading text handling in favor of the standardized component state.
|
👋 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 For security, I will only act on instructions from the user who triggered this task. New to Jules? Learn more at jules.google/docs. |
✅ Deploy Preview for split-but-wiser ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
Important Review skippedBot user detected. To trigger a single review, invoke the You can disable this status message by setting the WalkthroughAdds isLoading prop to Button component with a new Spinner component for loading state visualization. Creates reusable Spinner component using lucide-react's Loader2 icon. Updates Auth page to use Button's isLoading prop instead of managing loading text inline. Changes
Suggested reviewers
Pre-merge checks✅ Passed checks (3 passed)
Comment |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #218 +/- ##
=======================================
Coverage 74.42% 74.42%
=======================================
Files 17 17
Lines 1693 1693
Branches 158 158
=======================================
Hits 1260 1260
Misses 381 381
Partials 52 52
🚀 New features to boost your workflow:
|
|
@coderabbitai review |
✅ Actions performedReview triggered.
|
![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
📜 Review details
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
⛔ Files ignored due to path filters (1)
web/pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (3)
web/components/ui/Button.tsxweb/components/ui/Spinner.tsxweb/pages/Auth.tsx
🧰 Additional context used
📓 Path-based instructions (1)
web/pages/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Web pages should be created as components in
web/pages/and added to routing configuration
Files:
web/pages/Auth.tsx
🧬 Code graph analysis (2)
web/pages/Auth.tsx (2)
web/components/ui/Button.tsx (1)
Button(12-60)mobile/screens/GroupSettingsScreen.js (1)
loading(43-43)
web/components/ui/Button.tsx (1)
web/components/ui/Spinner.tsx (1)
Spinner(9-17)
🔇 Additional comments (5)
web/pages/Auth.tsx (1)
254-255: LGTM! Clean adoption of the new loading state pattern.The implementation correctly uses the
isLoadingprop to delegate loading visuals to the Button component, and conditionally renders the ArrowRight icon only when not loading. This provides clear visual feedback during form submission and prevents double submissions.web/components/ui/Spinner.tsx (1)
1-17: LGTM! Well-structured, reusable Spinner component.The implementation is clean and follows best practices:
- Simple, focused API with sensible defaults
- Good accessibility with
aria-label="Loading"- Leverages lucide-react's Loader2 icon with animation
- Flexible customization via className and size props
web/components/ui/Button.tsx (3)
4-4: LGTM! Spinner import is correct.The import correctly references the Spinner component from the same directory.
9-9: LGTM! isLoading prop properly defined and integrated.The optional
isLoadingprop is correctly typed in the interface and destructured with an appropriate default value offalse.Also applies to: 17-17
53-53: LGTM! Disabled logic correctly prevents interaction during loading.The button is properly disabled when either
isLoadingis true or the explicitdisabledprop is set, preventing double submissions during async operations.
web/components/ui/Button.tsx
Outdated
| disabled={isLoading || props.disabled} | ||
| {...props} | ||
| > | ||
| {isLoading && <Spinner className="mr-1" />} |
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
Consider removing redundant margin on Spinner.
The className="mr-1" on the Spinner is redundant since baseStyles already includes gap-2 (line 22), which provides 8px spacing between flex items. The explicit mr-1 (4px) doesn't add value and could be removed for cleaner code.
🔎 Proposed simplification
- {isLoading && <Spinner className="mr-1" />}
+ {isLoading && <Spinner />}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| {isLoading && <Spinner className="mr-1" />} | |
| {isLoading && <Spinner />} |
🤖 Prompt for AI Agents
In web/components/ui/Button.tsx around line 56, the Spinner is given a redundant
className="mr-1" while the container already uses gap-2 in baseStyles; remove
the explicit mr-1 from the Spinner JSX so spacing relies on gap-2 and the markup
stays clean and consistent.
- Updated `Button.tsx` to pass dynamic size to `Spinner` based on the button size (sm=16, md=20, lg=24). - Ensures the spinner is proportional to the button text.
This PR enhances the UX by adding a visual loading state to the Button component. This provides immediate feedback to users during async actions (like form submission) and prevents double-submission by disabling the button. The
Authpage has been updated to utilize this new capability. The change includes a newSpinnercomponent that respects the application's design themes.PR created automatically by Jules for task 16559603669677337140 started by @Devasy23
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.