Skip to content

🎨 Palette: Improve "Random idea" button with loading state #72

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Krosebrook merged 2 commits into from
Mar 3, 2026
Merged

🎨 Palette: Improve "Random idea" button with loading state #72

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e861b80
🎨 Palette: Improve "Random idea" button with loading state
google-labs-jules[bot] Feb 19, 2026
4880802
Merge branch 'main' into palette-random-idea-ux-6615752517414023914
Krosebrook Mar 3, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 16 additions & 7 deletions client/src/pages/Generate.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ export default function Generate() {
const [mood, setMood] = useState<string>("Happy");
const [generatedContent, setGeneratedContent] = useState("");
const [isPublic, setIsPublic] = useState(false);
const [isRandomLoading, setIsRandomLoading] = useState(false);

const [aiEngine, setAiEngine] = useState<AIEngine>("openai");
const [isGeneratingLocal, setIsGeneratingLocal] = useState(false);
Expand Down Expand Up @@ -95,9 +96,14 @@ export default function Generate() {
};

const handleRandomPrompt = async () => {
const prompt = await getRandomPrompt();
if (prompt) {
setTopic(prompt);
setIsRandomLoading(true);
try {
const prompt = await getRandomPrompt();
if (prompt) {
setTopic(prompt);
}
Comment on lines +101 to +104
Copy link
Contributor

@gemini-code-assist gemini-code-assist bot Feb 19, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

high

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.",
        });
      }

} finally {
setIsRandomLoading(false);
}
};

Expand Down Expand Up @@ -211,15 +217,18 @@ export default function Generate() {
<div className="space-y-2">
<div className="flex items-center justify-between">
<label className="text-sm font-medium" htmlFor="topic-input">Topic / Theme</label>
<button
<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"
Copy link
Contributor

@gemini-code-assist gemini-code-assist bot Feb 19, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

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"

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>
Comment on lines +220 to +231
Copy link

Copilot AI Feb 19, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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:

  1. aria-busy announces the loading state to screen readers
  2. aria-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

Copilot uses AI. Check for mistakes.
</div>
<div className="flex items-start gap-1">
<textarea
Expand Down
Loading