From e861b804ba1da123ab7f9045161fadca2da46bf1 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Thu, 19 Feb 2026 05:59:56 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Improve=20"Random=20i?=
 =?UTF-8?q?dea"=20button=20with=20loading=20state?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

💡 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/palette.md             |  4 ++++
 client/src/pages/Generate.tsx | 23 ++++++++++++++++-------
 2 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/.jules/palette.md b/.jules/palette.md
index 6be80c3..00583fb 100644
--- a/.jules/palette.md
+++ b/.jules/palette.md
@@ -1,3 +1,7 @@
 ## 2026-02-09 - Invisible Focus Trap
 **Learning:** Using `opacity-0 group-hover:opacity-100` on interactive elements (like buttons) creates a severe accessibility issue where keyboard users can focus an element but cannot see it.
 **Action:** Always pair `group-hover:opacity-100` with `focus:opacity-100` (or `focus-visible:opacity-100`) to ensure keyboard navigability.
+
+## 2026-05-21 - Async Button Feedback
+**Learning:** Raw `<button>` elements triggering async actions without loading states lead to user confusion and potential double-submissions. Using the design system's `Button` component simplifies adding loading states and ensures consistent focus management.
+**Action:** Always replace raw `<button>` elements performing async tasks with `Button` components that include a `disabled={loading}` state and a visual spinner.
diff --git a/client/src/pages/Generate.tsx b/client/src/pages/Generate.tsx
index 49050b6..0ee35f2 100644
--- a/client/src/pages/Generate.tsx
+++ b/client/src/pages/Generate.tsx
@@ -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);
@@ -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);
+      }
+    } finally {
+      setIsRandomLoading(false);
     }
   };
 
@@ -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"
                     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>
                 </div>
                 <div className="flex items-start gap-1">
                   <textarea