From 3821ce417c8efda6ef6e7368730a369cd9faebb7 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Tue, 23 Jun 2026 04:55:35 +0000
Subject: [PATCH] Hello! Jules here. I have successfully added visual loading
 states to the auth forms for you. Here is a breakdown of the updates I made:

- I set up the code to target the active button during form events.
- I added inline styles (opacity, disabled state, not-allowed cursor) during async login/register requests.
- I ensured the original button content and styles are safely reverted inside a `try/finally` block.

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

diff --git a/.Jules/palette.md b/.Jules/palette.md
new file mode 100644
index 0000000..c80b0d8
--- /dev/null
+++ b/.Jules/palette.md
@@ -0,0 +1,3 @@
+## 2026-06-23 - Form Submitter Loading States
+**Learning:** Native `e.submitter` on `submit` events reliably provides the button used to submit a form, allowing for dynamic visual loading states without hardcoding button IDs or changing core app logic.
+**Action:** Use `e.submitter` to gracefully handle visual loading styles (disabled, opacity, cursor) during async form submissions.
diff --git a/web-demo/js/app.js b/web-demo/js/app.js
index 11508de..8ebb3c1 100644
--- a/web-demo/js/app.js
+++ b/web-demo/js/app.js
@@ -145,6 +145,16 @@ class ClimaAI {
         const email = document.getElementById('loginEmail').value;
         const password = document.getElementById('loginPassword').value;
 
+        const submitBtn = e.submitter;
+        let originalContent = '';
+        if (submitBtn) {
+            originalContent = submitBtn.innerHTML;
+            submitBtn.innerHTML = '⏳ Loading...';
+            submitBtn.disabled = true;
+            submitBtn.style.opacity = '0.7';
+            submitBtn.style.cursor = 'not-allowed';
+        }
+
         try {
             this.showToast('Logging in...', 'info');
             const response = await api.login(email, password);
@@ -155,6 +165,13 @@ class ClimaAI {
             this.checkSubscription();
         } catch (error) {
             this.showToast(error.message || 'Login failed', 'error');
+        } finally {
+            if (submitBtn) {
+                submitBtn.innerHTML = originalContent;
+                submitBtn.disabled = false;
+                submitBtn.style.opacity = '';
+                submitBtn.style.cursor = '';
+            }
         }
     }
 
@@ -164,6 +181,16 @@ class ClimaAI {
         const email = document.getElementById('registerEmail').value;
         const password = document.getElementById('registerPassword').value;
 
+        const submitBtn = e.submitter;
+        let originalContent = '';
+        if (submitBtn) {
+            originalContent = submitBtn.innerHTML;
+            submitBtn.innerHTML = '⏳ Loading...';
+            submitBtn.disabled = true;
+            submitBtn.style.opacity = '0.7';
+            submitBtn.style.cursor = 'not-allowed';
+        }
+
         try {
             this.showToast('Creating account...', 'info');
             const response = await api.register(email, password, name);
@@ -174,6 +201,13 @@ class ClimaAI {
             this.checkSubscription();
         } catch (error) {
             this.showToast(error.message || 'Registration failed', 'error');
+        } finally {
+            if (submitBtn) {
+                submitBtn.innerHTML = originalContent;
+                submitBtn.disabled = false;
+                submitBtn.style.opacity = '';
+                submitBtn.style.cursor = '';
+            }
         }
     }