🎨 Palette: Improve "Random idea" button with loading state#72
🎨 Palette: Improve "Random idea" button with loading state#72Krosebrook wants to merge 1 commit intomainfrom
Conversation
💡 What: Replaced the raw "Random idea" button with a `Button` component that includes a loading spinner and disabled state during async generation. 🎯 Why: Users could click the button multiple times without feedback, and the button style was inconsistent with the design system. ♿ Accessibility: Added proper disabled state and focus management via `Button` component. Co-authored-by: Krosebrook <214532761+Krosebrook@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. |
|
Warning Rate limit exceeded
⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ✨ 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 |
Summary of ChangesHello @Krosebrook, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request significantly enhances the user experience and accessibility of the "Random idea" button on the Generate page. By introducing a dedicated loading state and migrating the button to a standardized Highlights
Changelog
Activity
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request successfully adds a loading state to the 'Random idea' button, improving user experience by providing visual feedback during an async operation. The implementation correctly uses a separate loading state and replaces the native <button> with the design system's Button component. My review includes a suggestion to improve error handling for a better user experience and a comment on styling for better long-term maintainability.
| const prompt = await getRandomPrompt(); | ||
| if (prompt) { | ||
| setTopic(prompt); | ||
| } |
There was a problem hiding this comment.
The current implementation doesn't provide feedback to the user if getRandomPrompt() fails. The getRandomPrompt hook swallows errors and returns null, so the spinner will just disappear without any explanation, leading to a confusing user experience. We should inform the user that the action failed by showing a toast notification.
const prompt = await getRandomPrompt();
if (prompt) {
setTopic(prompt);
} else {
toast({
variant: "destructive",
title: "Failed to get random idea",
description: "Please try again.",
});
}
| onClick={handleRandomPrompt} | ||
| className="text-xs text-primary hover:text-primary/80 flex items-center gap-1 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary rounded-sm" | ||
| disabled={loading || isRandomLoading} | ||
| className="text-xs text-primary hover:text-primary/80 h-auto p-0 hover:bg-transparent" |
There was a problem hiding this comment.
The className prop is overriding several styles from the Button component's size="sm" prop, specifically min-height and padding (with h-auto and p-0). This often indicates that the component library might be missing a suitable variant, like a link variant for text-style buttons.
While this works, fighting the component's built-in styles can make maintenance harder. As a small cleanup, the text-xs class is redundant here because it's already applied by size="sm".
className="text-primary hover:text-primary/80 h-auto p-0 hover:bg-transparent"
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
There was a problem hiding this comment.
Pull request overview
This PR improves the user experience of the "Random idea" button on the Generate page by adding a loading state to prevent double-submissions and provide visual feedback during the async operation. The button has been upgraded from a raw HTML <button> element to the standardized Button component from the design system.
Changes:
- Added loading state management (
isRandomLoading) with proper try/finally error handling for the random prompt button - Replaced raw button element with accessible
Buttoncomponent including disabled state and loading spinner - Documented the async button feedback pattern in
.jules/palette.mdfor future reference
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| client/src/pages/Generate.tsx | Added isRandomLoading state, wrapped handleRandomPrompt with try/finally, converted button to Button component with loading spinner and disabled state |
| .jules/palette.md | Documented the async button feedback pattern as a learning for future development |
| <Button | ||
| type="button" | ||
| variant="ghost" | ||
| size="sm" | ||
| onClick={handleRandomPrompt} | ||
| className="text-xs text-primary hover:text-primary/80 flex items-center gap-1 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary rounded-sm" | ||
| disabled={loading || isRandomLoading} | ||
| className="text-xs text-primary hover:text-primary/80 h-auto p-0 hover:bg-transparent" | ||
| data-testid="button-random-prompt" | ||
| > | ||
| <Shuffle className="w-3 h-3" /> | ||
| {isRandomLoading ? <Loader2 className="w-3 h-3 animate-spin" /> : <Shuffle className="w-3 h-3" />} | ||
| Random idea | ||
| </button> | ||
| </Button> |
There was a problem hiding this comment.
Consider adding accessibility attributes for better screen reader support. The AiSuggestButton component includes aria-busy={isLoading} on the Button and aria-hidden="true" on the icon elements. While not consistently applied across the codebase, these attributes improve the experience for users with assistive technologies by:
aria-busyannounces the loading state to screen readersaria-hidden="true"on decorative icons prevents redundant announcements
Example:
- Add
aria-busy={isRandomLoading}to the Button - Add
aria-hidden="true"to both the Loader2 and Shuffle icons
1 participant
Improved the "Random idea" button in the Generate page by adding a loading state and using the standardized
Buttoncomponent for better accessibility and UX.PR created automatically by Jules for task 6615752517414023914 started by @Krosebrook
Summary by cubic
Improved the “Random idea” button on the Generate page by adding a loading state and switching to the design system Button for consistent UX and accessibility. This prevents rapid double-clicks and gives clear feedback while fetching a prompt.
Written for commit e861b80. Summary will update on new commits.