Show a busy state on the text box while Help me and Give me an idea work

src/ui/busy.py

@@ -17,7 +17,9 @@ import gradio as gr
 
 from src.ui.components import Localizer
 
-Kind = Literal["create", "edit"]
+Kind = Literal["create", "edit", "helper"]
+# Create and edit cover the result image; the helper buttons cover the text box they fill.
+TARGET_IDS: dict[str, str] = {"create": "result-wrap", "edit": "result-wrap", "helper": "idea-box"}
 NEVER_DISABLED_MS = 3_000
 FAILSAFE_MS = 75_000
 
@@ -25,7 +27,7 @@ FAILSAFE_MS = 75_000
 def start_js(kind: Kind) -> str:
     """Browser hook for `click(js=...)`: runs before the server call and passes its inputs on."""
     return f"""(...args) => {{
-  const wrap = document.getElementById('result-wrap');
+  const wrap = document.getElementById('{TARGET_IDS[kind]}');
   const button = document.querySelector('.primary-action');
   if (!wrap || !button) return args;
   window.__busyObserver?.disconnect();
@@ -35,10 +37,10 @@ def start_js(kind: Kind) -> str:
     window.__busyObserver?.disconnect();
     clearTimeout(window.__busyTimer);
     clearTimeout(window.__busyGrace);
-    wrap.classList.remove('busy', 'busy-create', 'busy-edit');
+    wrap.classList.remove('busy', 'busy-create', 'busy-edit', 'busy-helper');
   }};
   let seenDisabled = button.disabled;
-  wrap.classList.remove('busy-create', 'busy-edit');
+  wrap.classList.remove('busy-create', 'busy-edit', 'busy-helper');
   wrap.classList.add('busy', 'busy-{kind}');
   window.__busyObserver = new MutationObserver(() => {{
     if (button.disabled) seenDisabled = true;

src/ui/create_tab.py

@@ -177,6 +177,7 @@ def build_create_tab(
         text=text,
         status=status,
         rewrite_card=rewrite_card,
+        create_button=create_button,
         api_visibility=api_visibility,
         max_chars=settings.config.safety.max_input_chars,
         help_me=features.help_me,

src/ui/helper_row.py

@@ -21,6 +21,7 @@ from src.services.helpers import HelperService
 from src.services.library import PromptLibrary
 from src.services.limits import device_identity
 from src.services.session import VisitorSession
+from src.ui.busy import start_js
 from src.ui.components import ApiVisibility, Block, Localizer, Updates, build_heading
 from src.ui.ideas import IdeasPanel, build_ideas
 
@@ -94,6 +95,7 @@ def wire_helpers(
     text: gr.Textbox,
     status: gr.Markdown,
     rewrite_card: gr.Button,
+    create_button: gr.Button,
     api_visibility: ApiVisibility,
     max_chars: int,
     help_me: bool,
@@ -101,7 +103,7 @@ def wire_helpers(
 ) -> None:
     t = loc.t
     quiet = {"queue": False, "show_progress": "hidden", "api_visibility": api_visibility}
-    outputs = [session, device, *row.buttons, text, row.undo, status, rewrite_card]
+    outputs = [session, device, *row.buttons, create_button, text, row.undo, status, rewrite_card]
     buttons = iter(row.buttons)
 
     def handler(name: str, run: Run):
@@ -109,8 +111,8 @@ def wire_helpers(
             current.touch()
             lang = current.lang
             device_id, device_hash = device_identity(device_value)
-            busy = [gr.update(interactive=False)] * len(row.buttons)
-            ready = [gr.update(interactive=True)] * len(row.buttons)
+            busy = [gr.update(interactive=False)] * (len(row.buttons) + 1)  # and Create
+            ready = [gr.update(interactive=True)] * (len(row.buttons) + 1)
             yield (
                 current,
                 device_id,
@@ -161,6 +163,7 @@ def wire_helpers(
             handler("on_help", lambda idea, lang, dev: helpers.improve(idea, lang, dev)),
             [text, device, session],
             outputs,
+            js=start_js("helper"),
             api_visibility=api_visibility,
         )
     if surprise_me:
@@ -168,6 +171,7 @@ def wire_helpers(
             handler("on_surprise", lambda idea, lang, dev: helpers.surprise(lang, dev)),
             [text, device, session],
             outputs,
+            js=start_js("helper"),
             api_visibility=api_visibility,
         )
 

src/ui/style.css

@@ -295,6 +295,31 @@ textarea {
   }
 }
 
+/* Help me / Give me an idea: the text box dims and shows a small spinner while the AI writes. */
+#idea-box {
+  position: relative;
+}
+
+#idea-box.busy-helper textarea {
+  opacity: 0.4;
+  pointer-events: none;
+}
+
+#idea-box.busy-helper::after {
+  content: "";
+  position: absolute;
+  top: 62%;
+  right: 24px;
+  z-index: 5;
+  width: 32px;
+  height: 32px;
+  margin-top: -16px;
+  border: 4px solid rgba(99, 102, 241, 0.25);
+  border-top-color: #6366f1;
+  border-radius: 50%;
+  animation: busy-spin 0.9s linear infinite;
+}
+
 #result-wrap.busy-create .busy-edit-text,
 #result-wrap.busy-edit .busy-create-text {
   display: none;