🎨 Palette: Add loading state to authentication forms

.Jules/palette.md

@@ -0,0 +1,3 @@
+## 2026-06-18 - Adding loading states to vanilla JS async forms
+**Learning:** When using `e.submitter` to modify button state (like adding loading spinners or text) in vanilla JS, you must check for null values as the submitter can be undefined if triggered programmatically. Additionally, `try/finally` blocks are essential to guarantee the state is restored regardless of success or failure.
+**Action:** Always null-check `e.submitter` and use `try/finally` to reliably restore interactive elements to their original state in pure JS applications.

web-demo/js/app.js

@@ -145,6 +145,14 @@ class ClimaAI {
         const email = document.getElementById('loginEmail').value;
         const password = document.getElementById('loginPassword').value;
 
+        const submitBtn = e.submitter;
+        let originalText = '';
+        if (submitBtn) {
+            originalText = submitBtn.innerHTML;
+            submitBtn.innerHTML = 'Signing in... ⏳';
+            submitBtn.disabled = true;
+        }
+
         try {
             this.showToast('Logging in...', 'info');
             const response = await api.login(email, password);
@@ -155,6 +163,11 @@ class ClimaAI {
             this.checkSubscription();
         } catch (error) {
             this.showToast(error.message || 'Login failed', 'error');
+        } finally {
+            if (submitBtn) {
+                submitBtn.innerHTML = originalText;
+                submitBtn.disabled = false;
+            }
         }
     }
 
@@ -164,6 +177,14 @@ class ClimaAI {
         const email = document.getElementById('registerEmail').value;
         const password = document.getElementById('registerPassword').value;
 
+        const submitBtn = e.submitter;
+        let originalText = '';
+        if (submitBtn) {
+            originalText = submitBtn.innerHTML;
+            submitBtn.innerHTML = 'Signing up... ⏳';
+            submitBtn.disabled = true;
+        }
+
         try {
             this.showToast('Creating account...', 'info');
             const response = await api.register(email, password, name);
@@ -174,6 +195,11 @@ class ClimaAI {
             this.checkSubscription();
         } catch (error) {
             this.showToast(error.message || 'Registration failed', 'error');
+        } finally {
+            if (submitBtn) {
+                submitBtn.innerHTML = originalText;
+                submitBtn.disabled = false;
+            }
         }
     }