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..."}
             </>
           ) : (