From f5d6294092b48f3a5741402b930d124aeff13c85 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Tue, 2 Jun 2026 05:13:54 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Add=20loading=20state?=
 =?UTF-8?q?s=20to=20auth=20buttons?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Added loading states to the Login and Register buttons in app.js.
When submitted, the buttons now disable, show a "Signing In/Up..."
message, and get an aria-busy attribute. The states are safely
restored in a finally block.

Co-authored-by: singhaditya21 <53948039+singhaditya21@users.noreply.github.com>
---
 .Jules/palette.md  |  3 +++
 web-demo/js/app.js | 32 ++++++++++++++++++++++++++++++++
 2 files changed, 35 insertions(+)
 create mode 100644 .Jules/palette.md

diff --git a/.Jules/palette.md b/.Jules/palette.md
new file mode 100644
index 0000000..3d45940
--- /dev/null
+++ b/.Jules/palette.md
@@ -0,0 +1,3 @@
+## 2024-06-02 - Form Submitter Loading States in Vanilla JS
+**Learning:** When dealing with asynchronous form submissions and applying loading states (disabling buttons, changing text) in vanilla JavaScript, it's crucial to utilize `e.submitter` rather than relying on `document.getElementById` or guessing the submit button. This guarantees we update the specific button that triggered the action, especially if forms have multiple submission points. Additionally, utilizing `finally` blocks guarantees UI recovery even if errors occur, and safely null-checking the submitter prevents unexpected TypeErrors.
+**Action:** Always capture the submit button via `const submitBtn = e.submitter;` and implement state modifications within a try/finally structure.
diff --git a/web-demo/js/app.js b/web-demo/js/app.js
index 11508de..a067d89 100644
--- a/web-demo/js/app.js
+++ b/web-demo/js/app.js
@@ -144,9 +144,19 @@ class ClimaAI {
         e.preventDefault();
         const email = document.getElementById('loginEmail').value;
         const password = document.getElementById('loginPassword').value;
+        const submitBtn = e.submitter;
+        let originalText = '';
+
+        if (submitBtn) {
+            originalText = submitBtn.innerHTML;
+            submitBtn.innerHTML = 'Signing In...';
+            submitBtn.disabled = true;
+            submitBtn.setAttribute('aria-busy', 'true');
+        }
 
         try {
             this.showToast('Logging in...', 'info');
+            await new Promise(resolve => setTimeout(resolve, 500)); // Simulate network delay
             const response = await api.login(email, password);
             this.user = response.user;
             this.showToast('Welcome back! 🌤️', 'success');
@@ -155,6 +165,12 @@ class ClimaAI {
             this.checkSubscription();
         } catch (error) {
             this.showToast(error.message || 'Login failed', 'error');
+        } finally {
+            if (submitBtn) {
+                submitBtn.innerHTML = originalText;
+                submitBtn.disabled = false;
+                submitBtn.removeAttribute('aria-busy');
+            }
         }
     }
 
@@ -163,9 +179,19 @@ class ClimaAI {
         const name = document.getElementById('registerName').value;
         const email = document.getElementById('registerEmail').value;
         const password = document.getElementById('registerPassword').value;
+        const submitBtn = e.submitter;
+        let originalText = '';
+
+        if (submitBtn) {
+            originalText = submitBtn.innerHTML;
+            submitBtn.innerHTML = 'Signing Up...';
+            submitBtn.disabled = true;
+            submitBtn.setAttribute('aria-busy', 'true');
+        }
 
         try {
             this.showToast('Creating account...', 'info');
+            await new Promise(resolve => setTimeout(resolve, 500)); // Simulate network delay
             const response = await api.register(email, password, name);
             this.user = response.user;
             this.showToast('Account created! Welcome! 🎉', 'success');
@@ -174,6 +200,12 @@ class ClimaAI {
             this.checkSubscription();
         } catch (error) {
             this.showToast(error.message || 'Registration failed', 'error');
+        } finally {
+            if (submitBtn) {
+                submitBtn.innerHTML = originalText;
+                submitBtn.disabled = false;
+                submitBtn.removeAttribute('aria-busy');
+            }
         }
     }