🎨 Palette: Replace Full-Screen Loader with In-Button Spinner

web_app/static/index.html

@@ -116,7 +116,10 @@ <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="spinner" style="display: none;"></span>
+                            </button>
                         </div>
                     </div>
 

web_app/static/script.js

@@ -613,7 +613,14 @@ function handleLyricLineClick(lineNumber) {
 async function generatePoster() {
     if (!currentMetadata) return;
 
-    loadingOverlay.style.display = 'flex';
+    generateBtn.disabled = true;
+    generateBtn.classList.add('loading');
+
+    // Helper to restore button
+    const restoreButton = () => {
+        generateBtn.disabled = false;
+        generateBtn.classList.remove('loading');
+    };
 
     const indexingToggle = document.getElementById('indexingToggle');
     const accentToggle = document.getElementById('accentToggle');
@@ -628,23 +635,20 @@ async function generatePoster() {
     };
 
     if (payload.type === 'track') {
-        // Lyrics Logic (Same as before)
         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';
             showToast("Please enter a valid range (Start must be less than End).", "error");
+            restoreButton(); // Restore on early exit
             return;
         }
 
         payload.lyrics_start = start;
         payload.lyrics_end = end;
-
     } else {
-        // Album Logic
         payload.indexing = indexingToggle ? indexingToggle.checked : false;
     }
 
@@ -664,18 +668,25 @@ async function generatePoster() {
         const imageUrl = data.is_base64 ? data.image_data : `${data.image_url}?t=${new Date().getTime()}`;
 
         const img = document.createElement('img');
-        img.src = imageUrl;
+
         img.onload = () => {
             posterContainer.innerHTML = '';
             posterContainer.appendChild(img);
             showDownloadButton(imageUrl, data.filename);
-            loadingOverlay.style.display = 'none';
+            restoreButton(); // Restore on success
         };
 
+        img.onerror = () => {
+            showToast("Error: Failed to load the generated poster image.", "error");
+            restoreButton(); // Restore on image load failure
+        };
+
+        img.src = imageUrl;
+
     } catch (error) {
         console.error("Generation failed", error);
         showToast(`Error: ${error.message}`, "error");
-        loadingOverlay.style.display = 'none';
+        restoreButton(); // Restore on fetch failure
     }
 }
 

web_app/static/style.css

@@ -166,6 +166,33 @@ header p {
     transform: translateY(-1px);
 }
 
+.primary-btn:disabled {
+    background-color: var(--accent-hover);
+    opacity: 0.7;
+    cursor: not-allowed;
+    transform: none;
+}
+
+/* In-button spinner */
+.primary-btn .spinner {
+    width: 20px;
+    height: 20px;
+    border: 2px solid rgba(0, 0, 0, 0.2);
+    border-top-color: #1a1a1f;
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
+    margin: 0;
+}
+
+/* Hide text and show spinner when loading */
+.primary-btn.loading .btn-text {
+    display: none;
+}
+
+.primary-btn.loading .spinner {
+    display: block !important; /* Override inline style */
+}
+
 .secondary-btn {
     background: transparent;
     border-color: var(--border-color);