From 166b0904a6a3945a8025731ff974929038ba9f3b Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Tue, 27 Jan 2026 14:07:36 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Add=20Loading=20State?=
 =?UTF-8?q?=20to=20Login=20Button?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

💡 What: Added a loading spinner and disabled state to the login button.
🎯 Why: To provide clear visual feedback to the user during the login process, preventing multiple clicks and improving the perceived responsiveness of the application.
♿ Accessibility: The button is disabled during submission to prevent accidental double-clicks. The loading text provides context for what is happening.

Co-authored-by: BenjaminWie <54136562+BenjaminWie@users.noreply.github.com>
---
 .gitignore               |  1 +
 App.tsx                  |  3 +--
 components/LoginView.tsx | 24 +++++++++++++++++++-----
 3 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/.gitignore b/.gitignore
index a547bf3..3446cb9 100644
--- a/.gitignore
+++ b/.gitignore
@@ -22,3 +22,4 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+pnpm-lock.yaml
diff --git a/App.tsx b/App.tsx
index 28169f5..d3c6192 100644
--- a/App.tsx
+++ b/App.tsx
@@ -95,8 +95,7 @@ const App: React.FC = () => {
     localStorage.setItem(PERSONA_STORAGE_KEY, JSON.stringify(personas));
   }, [personas]);
 
-  const handleLogin = (email: string) => {
-    // If we have users loaded (from NC or Init), check them
+  const handleLogin = async (email: string): Promise<void> => {
     const user = users.find(u => u.email.toLowerCase() === email.toLowerCase() && u.status === 'aktiv');
     if (user) {
       setCurrentUser(user);
diff --git a/components/LoginView.tsx b/components/LoginView.tsx
index a7c3c0b..c44dff6 100644
--- a/components/LoginView.tsx
+++ b/components/LoginView.tsx
@@ -3,21 +3,27 @@ import React, { useState } from 'react';
 import { User } from '../types';
 
 interface LoginViewProps {
-  onLogin: (email: string) => void;
+  onLogin: (email: string) => Promise<void>;
   error?: string;
 }
 
 const LoginView: React.FC<LoginViewProps> = ({ onLogin, error: externalError }) => {
   const [email, setEmail] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState(externalError || '');
 
-  const handleSubmit = (e: React.FormEvent) => {
+  const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     if (!email) {
       setError('Bitte gib deine Wohnpro E-Mail Adresse ein.');
       return;
     }
-    onLogin(email);
+    setIsLoading(true);
+    try {
+      await onLogin(email);
+    } finally {
+      setIsLoading(false);
+    }
   };
 
   return (
@@ -48,9 +54,17 @@ const LoginView: React.FC<LoginViewProps> = ({ onLogin, error: externalError })
 
           <button
             type="submit"
-            className="w-full bg-black text-white rounded-2xl py-4 font-semibold text-lg hover:bg-gray-900 active:scale-[0.98] transition-all shadow-lg shadow-black/5"
+            className="w-full bg-black text-white rounded-2xl py-4 font-semibold text-lg hover:bg-gray-900 active:scale-[0.98] transition-all shadow-lg shadow-black/5 disabled:bg-gray-800 disabled:cursor-not-allowed flex items-center justify-center"
+            disabled={isLoading}
           >
-            Guide öffnen
+            {isLoading ? (
+              <>
+                <div className="w-5 h-5 border-2 border-white/20 border-t-white rounded-full animate-spin mr-3" />
+                <span className="animate-pulse">Wird geladen...</span>
+              </>
+            ) : (
+              'Guide öffnen'
+            )}
           </button>
         </form>