From c950929b2e22393ea537f070285fbac575ff7b53 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sat, 20 Jun 2026 05:03:26 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20I=20have=20added=20lo?=
 =?UTF-8?q?ading=20states=20to=20the=20form=20submission=20buttons.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/.Jules/palette.md b/.Jules/palette.md
new file mode 100644
index 0000000..69e200a
--- /dev/null
+++ b/.Jules/palette.md
@@ -0,0 +1,3 @@
+## 2026-06-20 - Async Form Submission Loading States
+**Learning:** Implementing loading states on form submission buttons significantly improves user feedback and prevents double-submissions. However, accessing the button that triggered the event must be done carefully using `e.submitter` instead of relying on generic button selectors, and a reliable cleanup process (like a `finally` block) must be used to restore the button's state even if the async operation fails.
+**Action:** When adding async loading states to form submissions in vanilla JavaScript, always use `e.submitter` conditionally, handle UI updates via explicit state manipulation, and rely on `try/finally` logic to ensure the button is re-enabled regardless of success or error outcomes.
diff --git a/web-demo/css/style.css b/web-demo/css/style.css
index e0d4506..c44697c 100644
--- a/web-demo/css/style.css
+++ b/web-demo/css/style.css
@@ -218,6 +218,12 @@ body {
     transition: all 0.3s ease;
 }
 
+.btn:disabled {
+    opacity: 0.7;
+    cursor: not-allowed;
+    transform: none;
+}
+
 .btn-primary {
     background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
     color: white;
diff --git a/web-demo/js/app.js b/web-demo/js/app.js
index 11508de..9b3ed1f 100644
--- a/web-demo/js/app.js
+++ b/web-demo/js/app.js
@@ -144,6 +144,13 @@ class ClimaAI {
         e.preventDefault();
         const email = document.getElementById('loginEmail').value;
         const password = document.getElementById('loginPassword').value;
+        const submitBtn = e.submitter;
+        const originalContent = submitBtn ? submitBtn.innerHTML : '';
+
+        if (submitBtn) {
+            submitBtn.disabled = true;
+            submitBtn.innerHTML = 'Logging in...';
+        }
 
         try {
             this.showToast('Logging in...', 'info');
@@ -155,6 +162,11 @@ class ClimaAI {
             this.checkSubscription();
         } catch (error) {
             this.showToast(error.message || 'Login failed', 'error');
+        } finally {
+            if (submitBtn) {
+                submitBtn.disabled = false;
+                submitBtn.innerHTML = originalContent;
+            }
         }
     }
 
@@ -163,6 +175,13 @@ class ClimaAI {
         const name = document.getElementById('registerName').value;
         const email = document.getElementById('registerEmail').value;
         const password = document.getElementById('registerPassword').value;
+        const submitBtn = e.submitter;
+        const originalContent = submitBtn ? submitBtn.innerHTML : '';
+
+        if (submitBtn) {
+            submitBtn.disabled = true;
+            submitBtn.innerHTML = 'Creating account...';
+        }
 
         try {
             this.showToast('Creating account...', 'info');
@@ -174,6 +193,11 @@ class ClimaAI {
             this.checkSubscription();
         } catch (error) {
             this.showToast(error.message || 'Registration failed', 'error');
+        } finally {
+            if (submitBtn) {
+                submitBtn.disabled = false;
+                submitBtn.innerHTML = originalContent;
+            }
         }
     }