From 2d2ab2699453d2359ad6f6c1c9da3151c1e21dd2 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Tue, 28 Apr 2026 14:53:41 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=A7=B9=20[Code=20Health]=20Extract=20dupl?=
 =?UTF-8?q?icated=20SVG=20spinner=20into=20a=20shared=20component\n\n?=
 =?UTF-8?q?=F0=9F=8E=AF=20What:=20Extracted=20the=20duplicated=20`<svg>`?=
 =?UTF-8?q?=20spinner=20code=20in=20`web/components/GenerationControls.tsx?=
 =?UTF-8?q?`=20into=20a=20new=20lightweight=20React=20component=20`Spinner?=
 =?UTF-8?q?Icon`.\n=F0=9F=92=A1=20Why:=20This=20improves=20maintainability?=
 =?UTF-8?q?=20and=20keeps=20the=20code=20DRY=20by=20removing=20the=20inlin?=
 =?UTF-8?q?e=20duplication=20of=20the=20SVG=20path=20and=20properties.\n?=
 =?UTF-8?q?=E2=9C=85=20Verification:=20Ran=20`pnpm=20install`=20and=20`pnp?=
 =?UTF-8?q?m=20run=20build`=20in=20the=20`web`=20directory,=20confirming?=
 =?UTF-8?q?=20the=20code=20compiles=20successfully.\n=E2=9C=A8=20Result:?=
 =?UTF-8?q?=20The=20`isGenerating`=20and=20`!serverReady`=20branches=20now?=
 =?UTF-8?q?=20cleanly=20reference=20the=20`<SpinnerIcon=20/>`=20component.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: LyAhn <27559362+LyAhn@users.noreply.github.com>
---
 web/components/GenerationControls.tsx | 20 ++++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/web/components/GenerationControls.tsx b/web/components/GenerationControls.tsx
index fff91ab..e0c8105 100644
--- a/web/components/GenerationControls.tsx
+++ b/web/components/GenerationControls.tsx
@@ -35,6 +35,16 @@ const STATUS_CONFIG: Record<
   error:       { color: "var(--error)",   label: () => "Server error — check the terminal for details." },
 };
 
+
+function SpinnerIcon() {
+  return (
+    <svg className="animate-spin w-4 h-4" viewBox="0 0 24 24" fill="none">
+      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+      <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+    </svg>
+  );
+}
+
 export default function GenerationControls({
   speaker,
   availableVoices,
@@ -237,18 +247,12 @@ export default function GenerationControls({
         >
           {isGenerating ? (
             <>
-              <svg className="animate-spin w-4 h-4" viewBox="0 0 24 24" fill="none">
-                <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
-                <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
-              </svg>
+              <SpinnerIcon />
               Generating...
             </>
           ) : !serverReady ? (
             <>
-              <svg className="animate-spin w-4 h-4" viewBox="0 0 24 24" fill="none">
-                <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
-                <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
-              </svg>
+              <SpinnerIcon />
               {serverStatus === "downloading" ? "Downloading model..." : "Waiting for server..."}
             </>
           ) : (