From a927336e7feb0ca6a6ee445f378895e609ce5efb Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sun, 4 Jan 2026 20:10:07 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Add=20loading=20state?=
 =?UTF-8?q?=20to=20Generate=20Poster=20button?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

💡 What: This change introduces a loading state to the "Generate Poster" button. The button is now disabled until a track is selected and displays a "Generating..." message while the poster is being created. The global loading overlay has been removed in favor of this more contextual indicator.

🎯 Why: The previous implementation provided a jarring user experience by showing a full-screen loading overlay. This change provides a more modern, less disruptive feedback mechanism that keeps the user in the context of the application. Disabling the button until a track is selected also prevents user error.

📸 Before/After: A full-screen loading overlay would appear. Now, the button itself indicates the loading state.

♿ Accessibility: The disabled state on the button provides a clear visual cue to all users that the button is not yet interactive. The loading state is also clearly communicated through the button's text change.
---
 .Jules/palette.md         |  0
 web_app/static/index.html |  4 ++--
 web_app/static/script.js  | 25 +++++++++++++++++++++----
 web_app/static/style.css  |  7 +++++++
 4 files changed, 30 insertions(+), 6 deletions(-)
 create mode 100644 .Jules/palette.md

diff --git a/.Jules/palette.md b/.Jules/palette.md
new file mode 100644
index 0000000..e69de29
diff --git a/web_app/static/index.html b/web_app/static/index.html
index 0d56371..df7d0fc 100644
--- a/web_app/static/index.html
+++ b/web_app/static/index.html
@@ -116,7 +116,7 @@ <h2 id="contentHeading">Lyrics</h2>
                                 </div>
                             </div>
 
-                            <button id="generateBtn" class="primary-btn">Generate Poster</button>
+                            <button id="generateBtn" class="primary-btn" disabled>Generate Poster</button>
                         </div>
                     </div>
 
@@ -147,7 +147,7 @@ <h2>Poster</h2>
         <div class="spinner"></div>
         <p>Generating your masterpiece...</p>
     </div>
-    <script src="/static/script.js?v=21"></script>
+    <script src="/static/script.js?v=23"></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/web_app/static/script.js b/web_app/static/script.js
index 441a4ed..0853adb 100644
--- a/web_app/static/script.js
+++ b/web_app/static/script.js
@@ -490,6 +490,9 @@ function selectTrack(track) {
     `;
     document.getElementById('downloadBtn').style.display = 'none';
 
+    // Enable Generate Button
+    if (generateBtn) generateBtn.disabled = false;
+
     // Handle Content based on Type
     const lyricsContent = document.getElementById('lyricsContent');
     const tracklistContent = document.getElementById('tracklistContent');
@@ -613,7 +616,9 @@ function handleLyricLineClick(lineNumber) {
 async function generatePoster() {
     if (!currentMetadata) return;
 
-    loadingOverlay.style.display = 'flex';
+    // Set loading state on button, remove global overlay
+    generateBtn.disabled = true;
+    generateBtn.textContent = 'Generating...';
 
     const indexingToggle = document.getElementById('indexingToggle');
     const accentToggle = document.getElementById('accentToggle');
@@ -635,8 +640,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 +675,24 @@ async function generatePoster() {
             posterContainer.innerHTML = '';
             posterContainer.appendChild(img);
             showDownloadButton(imageUrl, data.filename);
-            loadingOverlay.style.display = 'none';
+            // Restore button on success
+            generateBtn.disabled = false;
+            generateBtn.textContent = 'Generate Poster';
+        };
+
+        img.onerror = () => {
+            showToast("Error: Failed to load generated poster image.", "error");
+            // Restore button on image load failure
+            generateBtn.disabled = false;
+            generateBtn.textContent = 'Generate Poster';
         };
 
     } catch (error) {
         console.error("Generation failed", error);
         showToast(`Error: ${error.message}`, "error");
-        loadingOverlay.style.display = 'none';
+        // Restore button on fetch failure
+        generateBtn.disabled = false;
+        generateBtn.textContent = 'Generate Poster';
     }
 }
 
diff --git a/web_app/static/style.css b/web_app/static/style.css
index 468eb76..9f76ba2 100644
--- a/web_app/static/style.css
+++ b/web_app/static/style.css
@@ -166,6 +166,13 @@ header p {
     transform: translateY(-1px);
 }
 
+.primary-btn:disabled {
+    background: var(--surface-elevated);
+    color: var(--text-muted);
+    cursor: not-allowed;
+    transform: none;
+}
+
 .secondary-btn {
     background: transparent;
     border-color: var(--border-color);