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

Implement visual loading states for Login, Register, and Google Sign-In buttons. This provides immediate visual feedback to the user during asynchronous API calls by disabling the button, displaying a loading indicator, and reducing opacity, which prevents duplicate submissions and reduces uncertainty.

Co-authored-by: singhaditya21 <53948039+singhaditya21@users.noreply.github.com>
---
 web-demo/js/app.js | 54 ++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 52 insertions(+), 2 deletions(-)

diff --git a/web-demo/js/app.js b/web-demo/js/app.js
index 11508de..95660a8 100644
--- a/web-demo/js/app.js
+++ b/web-demo/js/app.js
@@ -65,7 +65,7 @@ class ClimaAI {
 
     setupEventListeners() {
         // Auth
-        document.getElementById('googleSignInBtn').addEventListener('click', () => this.handleGoogleSignIn());
+        document.getElementById('googleSignInBtn').addEventListener('click', (e) => this.handleGoogleSignIn(e));
         document.getElementById('loginForm').addEventListener('submit', (e) => this.handleLogin(e));
         document.getElementById('registerForm').addEventListener('submit', (e) => this.handleRegister(e));
         document.getElementById('showRegister').addEventListener('click', (e) => {
@@ -145,6 +145,15 @@ class ClimaAI {
         const email = document.getElementById('loginEmail').value;
         const password = document.getElementById('loginPassword').value;
 
+        const submitter = e.submitter;
+        let originalContent = '';
+        if (submitter) {
+            originalContent = submitter.innerHTML;
+            submitter.disabled = true;
+            submitter.innerHTML = '⏳ Loading...';
+            submitter.style.opacity = '0.7';
+        }
+
         try {
             this.showToast('Logging in...', 'info');
             const response = await api.login(email, password);
@@ -155,6 +164,12 @@ class ClimaAI {
             this.checkSubscription();
         } catch (error) {
             this.showToast(error.message || 'Login failed', 'error');
+        } finally {
+            if (submitter) {
+                submitter.disabled = false;
+                submitter.innerHTML = originalContent;
+                submitter.style.opacity = '';
+            }
         }
     }
 
@@ -164,6 +179,15 @@ class ClimaAI {
         const email = document.getElementById('registerEmail').value;
         const password = document.getElementById('registerPassword').value;
 
+        const submitter = e.submitter;
+        let originalContent = '';
+        if (submitter) {
+            originalContent = submitter.innerHTML;
+            submitter.disabled = true;
+            submitter.innerHTML = '⏳ Loading...';
+            submitter.style.opacity = '0.7';
+        }
+
         try {
             this.showToast('Creating account...', 'info');
             const response = await api.register(email, password, name);
@@ -174,6 +198,12 @@ class ClimaAI {
             this.checkSubscription();
         } catch (error) {
             this.showToast(error.message || 'Registration failed', 'error');
+        } finally {
+            if (submitter) {
+                submitter.disabled = false;
+                submitter.innerHTML = originalContent;
+                submitter.style.opacity = '';
+            }
         }
     }
 
@@ -185,7 +215,16 @@ class ClimaAI {
         this.showToast('Logged out successfully', 'info');
     }
 
-    async handleGoogleSignIn() {
+    async handleGoogleSignIn(e) {
+        const submitter = e ? e.currentTarget : null;
+        let originalContent = '';
+        if (submitter) {
+            originalContent = submitter.innerHTML;
+            submitter.disabled = true;
+            submitter.innerHTML = '⏳ Loading...';
+            submitter.style.opacity = '0.7';
+        }
+
         try {
             this.showToast('🔐 Signing in with Google...', 'info');
 
@@ -217,11 +256,22 @@ class ClimaAI {
                     this.isPremium = true;
                     this.showScreen('homeScreen');
                     this.loadWeatherData();
+                } finally {
+                    if (submitter) {
+                        submitter.disabled = false;
+                        submitter.innerHTML = originalContent;
+                        submitter.style.opacity = '';
+                    }
                 }
             }, 1500); // Simulate OAuth redirect delay
 
         } catch (error) {
             this.showToast(error.message || 'Google Sign-In failed', 'error');
+            if (submitter) {
+                submitter.disabled = false;
+                submitter.innerHTML = originalContent;
+                submitter.style.opacity = '';
+            }
         }
     }