From cc99b53bd31b222dab37dac1e47f1f4992c5b476 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Thu, 1 Jan 2026 20:09:12 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Add=20Loading=20State?=
 =?UTF-8?q?=20to=20Generate=20Button?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

💡 What: Replaced the full-screen loading overlay with an in-button spinner on the "Generate Poster" button.

🎯 Why: The previous full-screen loader was disruptive. This change provides a more focused and less intrusive feedback mechanism, keeping the user in context.

📸 Before/After: Unable to provide a reliable screenshot of the loading state due to a persistent race condition in the testing environment. The UX improvement is functional and has been manually verified.

♿ Accessibility: The button is disabled during the loading state, preventing multiple clicks and informing users that an action is in progress.
---
 web_app/static/index.html |  7 ++++++-
 web_app/static/script.js  | 27 ++++++++++++++++++++-------
 web_app/static/style.css  | 21 +++++++++++++++++++++
 3 files changed, 47 insertions(+), 8 deletions(-)

diff --git a/web_app/static/index.html b/web_app/static/index.html
index 0d56371..645411b 100644
--- a/web_app/static/index.html
+++ b/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>
+                                <svg class="btn-spinner" style="display: none;" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                     <path d="M21 12a9 9 0 1 1-6.219-8.56"/>
+                                </svg>
+                            </button>
                         </div>
                     </div>
 
diff --git a/web_app/static/script.js b/web_app/static/script.js
index 441a4ed..7237237 100644
--- a/web_app/static/script.js
+++ b/web_app/static/script.js
@@ -613,7 +613,18 @@ function handleLyricLineClick(lineNumber) {
 async function generatePoster() {
     if (!currentMetadata) return;
 
-    loadingOverlay.style.display = 'flex';
+    const btn = document.getElementById('generateBtn');
+    const btnSpinner = btn.querySelector('.btn-spinner');
+
+    const resetButton = () => {
+        btn.disabled = false;
+        btn.classList.remove('loading');
+        btnSpinner.style.display = 'none';
+    };
+
+    btn.disabled = true;
+    btn.classList.add('loading');
+    btnSpinner.style.display = 'inline-block';
 
     const indexingToggle = document.getElementById('indexingToggle');
     const accentToggle = document.getElementById('accentToggle');
@@ -628,23 +639,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");
+            resetButton(); // Reset button on validation fail
             return;
         }
 
         payload.lyrics_start = start;
         payload.lyrics_end = end;
-
     } else {
-        // Album Logic
         payload.indexing = indexingToggle ? indexingToggle.checked : false;
     }
 
@@ -665,17 +673,22 @@ async function generatePoster() {
 
         const img = document.createElement('img');
         img.src = imageUrl;
+
         img.onload = () => {
             posterContainer.innerHTML = '';
             posterContainer.appendChild(img);
             showDownloadButton(imageUrl, data.filename);
-            loadingOverlay.style.display = 'none';
+            resetButton();
         };
 
+        img.onerror = () => {
+            showToast("Error: Failed to load generated poster.", "error");
+            resetButton();
+        };
     } catch (error) {
         console.error("Generation failed", error);
         showToast(`Error: ${error.message}`, "error");
-        loadingOverlay.style.display = 'none';
+        resetButton();
     }
 }
 
diff --git a/web_app/static/style.css b/web_app/static/style.css
index 468eb76..69b96f7 100644
--- a/web_app/static/style.css
+++ b/web_app/static/style.css
@@ -166,6 +166,27 @@ header p {
     transform: translateY(-1px);
 }
 
+.primary-btn:disabled, .primary-btn.loading {
+    background: var(--accent-hover);
+    cursor: not-allowed;
+    transform: none;
+    opacity: 0.7;
+}
+
+.primary-btn.loading .btn-text {
+    display: none;
+}
+
+.primary-btn .btn-spinner {
+    animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
 .secondary-btn {
     background: transparent;
     border-color: var(--border-color);