From 509bab9c55c5e21242de2e77288c8ae273f80370 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Wed, 10 Jun 2026 05:17:01 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Add=20accessible=20lo?=
 =?UTF-8?q?ading=20states=20to=20auth=20forms?=
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  |  6 ++++++
 web-demo/js/app.js | 26 ++++++++++++++++++++++++++
 2 files changed, 32 insertions(+)
 create mode 100644 .Jules/palette.md

diff --git a/.Jules/palette.md b/.Jules/palette.md
new file mode 100644
index 0000000..425b0fa
--- /dev/null
+++ b/.Jules/palette.md
@@ -0,0 +1,6 @@
+## 2026-06-10 - [Initial UX check]
+**Learning:** Checking for standard UX loading states.
+**Action:** Need to add loading state to buttons.
+## 2026-06-10 - [Accessible Async Loading States]
+**Learning:** Vanilla JS forms need explicit UI feedback during async operations, but standard DOM methods like `e.target.querySelector` can fail if the click intercepted by child elements.
+**Action:** Used `e.submitter` to robustly capture the submitting button, allowing temporary text modification (`⏳ Logging in...`), `disabled` state, and `aria-busy` attribute implementation within a `try/finally` block to ensure robust cleanup without adding custom CSS.
diff --git a/web-demo/js/app.js b/web-demo/js/app.js
index 11508de..55894e9 100644
--- a/web-demo/js/app.js
+++ b/web-demo/js/app.js
@@ -142,6 +142,13 @@ class ClimaAI {
 
     async handleLogin(e) {
         e.preventDefault();
+        const submitBtn = e.submitter;
+        if (submitBtn) {
+            submitBtn.disabled = true;
+            submitBtn.setAttribute('aria-busy', 'true');
+            submitBtn.dataset.originalText = submitBtn.innerHTML;
+            submitBtn.innerHTML = '⏳ Logging in...';
+        }
         const email = document.getElementById('loginEmail').value;
         const password = document.getElementById('loginPassword').value;
 
@@ -155,11 +162,24 @@ class ClimaAI {
             this.checkSubscription();
         } catch (error) {
             this.showToast(error.message || 'Login failed', 'error');
+        } finally {
+            if (submitBtn) {
+                submitBtn.disabled = false;
+                submitBtn.removeAttribute('aria-busy');
+                submitBtn.innerHTML = submitBtn.dataset.originalText || submitBtn.innerHTML;
+            }
         }
     }
 
     async handleRegister(e) {
         e.preventDefault();
+        const submitBtn = e.submitter;
+        if (submitBtn) {
+            submitBtn.disabled = true;
+            submitBtn.setAttribute('aria-busy', 'true');
+            submitBtn.dataset.originalText = submitBtn.innerHTML;
+            submitBtn.innerHTML = '⏳ Signing up...';
+        }
         const name = document.getElementById('registerName').value;
         const email = document.getElementById('registerEmail').value;
         const password = document.getElementById('registerPassword').value;
@@ -174,6 +194,12 @@ class ClimaAI {
             this.checkSubscription();
         } catch (error) {
             this.showToast(error.message || 'Registration failed', 'error');
+        } finally {
+            if (submitBtn) {
+                submitBtn.disabled = false;
+                submitBtn.removeAttribute('aria-busy');
+                submitBtn.innerHTML = submitBtn.dataset.originalText || submitBtn.innerHTML;
+            }
         }
     }