From c3167d35c8cc354b196027ba02006a4b4d8333fd Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Thu, 25 Dec 2025 20:08:24 +0000
Subject: [PATCH] feat(ux): add loading state to generate button

Implement a loading state for the "Generate Poster" button to provide better user feedback during an asynchronous operation.

- Disable the button on click to prevent multiple submissions.
- Change button text to "Generating..." to indicate progress.
- Re-enable the button and restore its original text after the operation completes (on both success and error).
---
 web_app/static/script.js | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/web_app/static/script.js b/web_app/static/script.js
index 441a4ed..3aac28d 100644
--- a/web_app/static/script.js
+++ b/web_app/static/script.js
@@ -613,6 +613,8 @@ function handleLyricLineClick(lineNumber) {
 async function generatePoster() {
     if (!currentMetadata) return;
 
+    generateBtn.disabled = true;
+    generateBtn.textContent = 'Generating...';
     loadingOverlay.style.display = 'flex';
 
     const indexingToggle = document.getElementById('indexingToggle');
@@ -637,6 +639,8 @@ async function generatePoster() {
         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;
         }
 
@@ -670,12 +674,16 @@ async function generatePoster() {
             posterContainer.appendChild(img);
             showDownloadButton(imageUrl, data.filename);
             loadingOverlay.style.display = 'none';
+            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';
     }
 }