🎨 Palette: Add loading spinner to Generate button

web_app/static/index.html

@@ -116,7 +116,12 @@ <h2 id="contentHeading">Lyrics</h2>
                                 </div>
                             </div>
 
-                            <button id="generateBtn" class="primary-btn">Generate Poster</button>
+                            <button id="generateBtn" class="primary-btn">
+                                <span class="btn-text">Generate Poster</span>
+                                <span class="btn-spinner">
+                                    <svg class="spinner" width="20" height="20" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><style>.spinner_GuJz{transform-origin:center;animation:spinner_STY6 1.5s linear infinite}@keyframes spinner_STY6{100%{transform:rotate(360deg)}}</style><path d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z" fill="currentColor" opacity=".25"/><path class="spinner_GuJz" d="M12,4a8,8,0,0,1,7.89,6.7A1.53,1.53,0,0,0,21.38,12h0a1.5,1.5,0,0,0,1.48-1.75,11,11,0,0,0-21.72,0A1.5,1.5,0,0,0,2.62,12h0a1.53,1.53,0,0,0,1.49-1.3A8,8,0,0,1,12,4Z" fill="currentColor"/></svg>
+                                </span>
+                            </button>
                         </div>
                     </div>
 

web_app/static/script.js

@@ -613,42 +613,40 @@ function handleLyricLineClick(lineNumber) {
 async function generatePoster() {
     if (!currentMetadata) return;
 
-    loadingOverlay.style.display = 'flex';
-
-    const indexingToggle = document.getElementById('indexingToggle');
-    const accentToggle = document.getElementById('accentToggle');
-
-    let payload = {
-        track_id: currentMetadata.id,
-        metadata: currentMetadata,
-        theme: themeInput.value,
-        font: fontInput.value,
-        accent: accentToggle ? accentToggle.checked : false,
-        type: currentMetadata.type || 'track'
-    };
-
-    if (payload.type === 'track') {
-        // Lyrics Logic (Same as before)
+    if (currentMetadata.type === 'track') {
         const startVal = parseInt(startLineInput.value) || 1;
         const endVal = parseInt(endLineInput.value) || 1;
-        const start = startVal - 1;
-        const end = endVal;
-
-        if (isNaN(start) || isNaN(end) || start >= end) {
-            loadingOverlay.style.display = 'none';
+        if (isNaN(startVal) || isNaN(endVal) || startVal >= endVal) {
             showToast("Please enter a valid range (Start must be less than End).", "error");
             return;
         }
-
-        payload.lyrics_start = start;
-        payload.lyrics_end = end;
-
-    } else {
-        // Album Logic
-        payload.indexing = indexingToggle ? indexingToggle.checked : false;
     }
 
+    generateBtn.classList.add('loading');
+    generateBtn.disabled = true;
+
     try {
+        const indexingToggle = document.getElementById('indexingToggle');
+        const accentToggle = document.getElementById('accentToggle');
+
+        let payload = {
+            track_id: currentMetadata.id,
+            metadata: currentMetadata,
+            theme: themeInput.value,
+            font: fontInput.value,
+            accent: accentToggle ? accentToggle.checked : false,
+            type: currentMetadata.type || 'track'
+        };
+
+        if (payload.type === 'track') {
+            const startVal = parseInt(startLineInput.value) || 1;
+            const endVal = parseInt(endLineInput.value) || 1;
+            payload.lyrics_start = startVal - 1;
+            payload.lyrics_end = endVal;
+        } else {
+            payload.indexing = indexingToggle ? indexingToggle.checked : false;
+        }
+
         const response = await fetch('/api/generate', {
             method: 'POST',
             headers: { 'Content-Type': 'application/json' },
@@ -669,13 +667,13 @@ async function generatePoster() {
             posterContainer.innerHTML = '';
             posterContainer.appendChild(img);
             showDownloadButton(imageUrl, data.filename);
-            loadingOverlay.style.display = 'none';
         };
-
     } catch (error) {
         console.error("Generation failed", error);
         showToast(`Error: ${error.message}`, "error");
-        loadingOverlay.style.display = 'none';
+    } finally {
+        generateBtn.classList.remove('loading');
+        generateBtn.disabled = false;
     }
 }
 

web_app/static/style.css

@@ -166,6 +166,23 @@ header p {
     transform: translateY(-1px);
 }
 
+.primary-btn.loading {
+    background: var(--accent-hover);
+    cursor: not-allowed;
+}
+
+.primary-btn .btn-spinner {
+    display: none;
+}
+
+.primary-btn.loading .btn-spinner {
+    display: inline-block;
+}
+
+.primary-btn.loading .btn-text {
+    display: none;
+}
+
 .secondary-btn {
     background: transparent;
     border-color: var(--border-color);