From 161da9679efc9f8a310cf38d9af621c854a44b10 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sun, 2 Aug 2026 05:16:00 +0000
Subject: [PATCH] I've added a loading state to our async form requests to
 improve the UX. Here is a summary of what I did:

- Added logic to `handleLogin` and `handleRegister` in `app.js` to change the clicked button to a loading state.
- Utilized a `try/finally` block to guarantee the button reverts to its original state.
- Logged this learning into my `.Jules/palette.md` file.

Co-authored-by: singhaditya21 <53948039+singhaditya21@users.noreply.github.com>
---
 .Jules/palette.md  |  4 ++++
 web-demo/js/app.js | 28 ++++++++++++++++++++++++++++
 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..2545555
--- /dev/null
+++ b/.Jules/palette.md
@@ -0,0 +1,4 @@
+## 2024-05-17 - Async Form Submission State
+
+**Learning:** When dealing with native HTML form submissions triggered asynchronously, relying purely on the submit event isn't enough because the exact button clicked (`e.submitter`) is only available immediately. If there are loading state resets after `await`, using `e.submitter.innerHTML` ensures text and icons are restored correctly, and a `try/finally` block guarantees restoration even if the async call fails.
+**Action:** Always capture `e.submitter` state (original text/icons) immediately at the start of the submit handler, show a clear loading indicator, and restore the original state in a `finally` block to ensure a robust user experience during async API calls.
diff --git a/web-demo/js/app.js b/web-demo/js/app.js
index 11508de..bcb29d3 100644
--- a/web-demo/js/app.js
+++ b/web-demo/js/app.js
@@ -145,6 +145,14 @@ class ClimaAI {
         const email = document.getElementById('loginEmail').value;
         const password = document.getElementById('loginPassword').value;
 
+        let originalText = '';
+        if (e.submitter) {
+            originalText = e.submitter.innerHTML;
+            e.submitter.innerHTML = '⏳ Loading...';
+            e.submitter.disabled = true;
+            e.submitter.style.opacity = '0.7';
+        }
+
         try {
             this.showToast('Logging in...', 'info');
             const response = await api.login(email, password);
@@ -155,6 +163,12 @@ class ClimaAI {
             this.checkSubscription();
         } catch (error) {
             this.showToast(error.message || 'Login failed', 'error');
+        } finally {
+            if (e.submitter) {
+                e.submitter.innerHTML = originalText;
+                e.submitter.disabled = false;
+                e.submitter.style.opacity = '1';
+            }
         }
     }
 
@@ -164,6 +178,14 @@ class ClimaAI {
         const email = document.getElementById('registerEmail').value;
         const password = document.getElementById('registerPassword').value;
 
+        let originalText = '';
+        if (e.submitter) {
+            originalText = e.submitter.innerHTML;
+            e.submitter.innerHTML = '⏳ Loading...';
+            e.submitter.disabled = true;
+            e.submitter.style.opacity = '0.7';
+        }
+
         try {
             this.showToast('Creating account...', 'info');
             const response = await api.register(email, password, name);
@@ -174,6 +196,12 @@ class ClimaAI {
             this.checkSubscription();
         } catch (error) {
             this.showToast(error.message || 'Registration failed', 'error');
+        } finally {
+            if (e.submitter) {
+                e.submitter.innerHTML = originalText;
+                e.submitter.disabled = false;
+                e.submitter.style.opacity = '1';
+            }
         }
     }