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

Replaced the disruptive full-screen loading overlay with a more focused loading state on the "Generate Poster" button. The button now disables and shows "Generating..." during poster creation, providing clearer feedback directly at the point of interaction. This also removes the "double loading" indicator, improving the overall user experience.
---
 web_app/static/script.js | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/web_app/static/script.js b/web_app/static/script.js
index 441a4ed..0922942 100644
--- a/web_app/static/script.js
+++ b/web_app/static/script.js
@@ -613,7 +613,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');
@@ -635,8 +636,9 @@ async function generatePoster() {
         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;
         }
 
@@ -669,13 +671,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('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';
     }
 }