From de1967c873e3eb84c3126b19ca96abe3f76c94d9 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Wed, 31 Dec 2025 20:05:45 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Improve=20UX=20by=20a?=
 =?UTF-8?q?dding=20a=20loading=20state=20to=20the=20Generate=20Poster=20bu?=
 =?UTF-8?q?tton?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

💡 **What:** Added a disabled and loading state to the "Generate Poster" button.
🎯 **Why:** Previously, the button could be clicked multiple times while a poster was being generated, and a disruptive full-screen overlay was used. This change provides clearer, more immediate feedback at the point of interaction and prevents unintended multiple clicks.
📸 **Before/After:** (Skipped due to technical difficulties with Playwright)
♿ **Accessibility:** The `disabled` attribute prevents users from interacting with the button while the poster is generating, which is a better experience for all users, including those using assistive technologies.
---
 web_app/static/script.js | 17 +++++++++++++----
 web_app/static/style.css |  6 ++++++
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/web_app/static/script.js b/web_app/static/script.js
index 441a4ed..97568bd 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 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';
     }
 }
 
diff --git a/web_app/static/style.css b/web_app/static/style.css
index 468eb76..2b5e9af 100644
--- a/web_app/static/style.css
+++ b/web_app/static/style.css
@@ -166,6 +166,12 @@ header p {
     transform: translateY(-1px);
 }
 
+.primary-btn:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+    transform: none;
+}
+
 .secondary-btn {
     background: transparent;
     border-color: var(--border-color);