diff --git a/.Jules/palette.md b/.Jules/palette.md new file mode 100644 index 0000000..fe103ab --- /dev/null +++ b/.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. diff --git a/web-demo/js/app.js b/web-demo/js/app.js index 11508de..f392a71 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; + 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; + } } }