From ce8ea42e805bf30fee849379f585a46dbac48e30 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sat, 27 Dec 2025 20:13:20 +0000
Subject: [PATCH] feat(ux): replace loading overlay with button loading state

Replaces the full-screen loading overlay with a contextual loading state on the "Generate Poster" button.

The button is now disabled and its text changes to "Generating..." during the poster creation process. This provides a less intrusive and more responsive user experience.

This change also fixes a race condition where the button's state could be reset before the poster image had finished loading.
---
 web_app/static/index.html |  4 ----
 web_app/static/script.js  | 20 +++++++++++++-------
 2 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/web_app/static/index.html b/web_app/static/index.html
index 0d56371..0c737c4 100644
--- a/web_app/static/index.html
+++ b/web_app/static/index.html
@@ -143,10 +143,6 @@ <h2>Poster</h2>
         </main>
     </div>
     <div id="toastContainer" class="toast-container"></div>
-    <div id="loadingOverlay" class="loading-overlay" style="display: none;">
-        <div class="spinner"></div>
-        <p>Generating your masterpiece...</p>
-    </div>
     <script src="/static/script.js?v=21"></script>
 </body>
 
diff --git a/web_app/static/script.js b/web_app/static/script.js
index 441a4ed..cae300d 100644
--- a/web_app/static/script.js
+++ b/web_app/static/script.js
@@ -20,7 +20,6 @@ const startLineInput = document.getElementById('startLine');
 const endLineInput = document.getElementById('endLine');
 const themeInput = document.getElementById('themeInput');
 const fontInput = document.getElementById('fontInput');
-const loadingOverlay = document.getElementById('loadingOverlay');
 
 let currentMetadata = null;
 let searchDebounceTimer = null;
@@ -613,7 +612,8 @@ function handleLyricLineClick(lineNumber) {
 async function generatePoster() {
     if (!currentMetadata) return;
 
-    loadingOverlay.style.display = 'flex';
+    generateBtn.disabled = true;
+    generateBtn.textContent = 'Generating...';
 
     const indexingToggle = document.getElementById('indexingToggle');
     const accentToggle = document.getElementById('accentToggle');
@@ -628,15 +628,15 @@ 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");
+            generateBtn.disabled = false;
+            generateBtn.textContent = 'Generate Poster';
             return;
         }
 
@@ -644,7 +644,6 @@ async function generatePoster() {
         payload.lyrics_end = end;
 
     } else {
-        // Album Logic
         payload.indexing = indexingToggle ? indexingToggle.checked : false;
     }
 
@@ -669,13 +668,20 @@ async function generatePoster() {
             posterContainer.innerHTML = '';
             posterContainer.appendChild(img);
             showDownloadButton(imageUrl, data.filename);
-            loadingOverlay.style.display = 'none';
+            generateBtn.disabled = false;
+            generateBtn.textContent = 'Generate Poster';
+        };
+        img.onerror = () => {
+            showToast("Error: Failed to load the generated poster image.", "error");
+            generateBtn.disabled = false;
+            generateBtn.textContent = 'Generate Poster';
         };
 
     } catch (error) {
         console.error("Generation failed", error);
         showToast(`Error: ${error.message}`, "error");
-        loadingOverlay.style.display = 'none';
+        generateBtn.disabled = false;
+        generateBtn.textContent = 'Generate Poster';
     }
 }