From f33c57b7e24aab55386871995613462792b8816d Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Mon, 26 Jan 2026 14:11:52 +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 main login button.
🎯 Why: To provide clear visual feedback to the user during the authentication process, preventing confusion and accidental double-clicks.
♿ Accessibility: Included a visually hidden "Wird geladen..." message to ensure screen reader users are aware of the loading state.
---
 App.tsx                  | 23 +++++++++++++++++------
 components/Icons.tsx     |  4 +++-
 components/LoginView.tsx | 16 +++++++++++++---
 3 files changed, 33 insertions(+), 10 deletions(-)

diff --git a/App.tsx b/App.tsx
index 28169f5..a842948 100644
--- a/App.tsx
+++ b/App.tsx
@@ -21,6 +21,7 @@ const PERSONA_STORAGE_KEY = 'wohnprojekt_persona_cache';
 const App: React.FC = () => {
   const [showLanding, setShowLanding] = useState(true);
   const [currentUser, setCurrentUser] = useState<User | null>(null);
+  const [isLoggingIn, setIsLoggingIn] = useState(false);
   const [currentView, setCurrentView] = useState<View>('chat');
   const [isSidebarOpen, setIsSidebarOpen] = useState(false);
   
@@ -95,13 +96,23 @@ 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 user = users.find(u => u.email.toLowerCase() === email.toLowerCase() && u.status === 'aktiv');
-    if (user) {
+  const handleLogin = async (email: string) => {
+    setIsLoggingIn(true);
+    try {
+      // Simulate network delay for better UX
+      await new Promise(resolve => setTimeout(resolve, 750));
+      const user = users.find(u => u.email.toLowerCase() === email.toLowerCase() && u.status === 'aktiv');
+
+      if (!user) {
+        throw new Error("User not found or inactive.");
+      }
+
       setCurrentUser(user);
-    } else {
+    } catch (error) {
+      console.error("Login attempt failed:", error);
       alert("Zugang verweigert. Nur verifizierte Wohnpro-Bewohner können sich im Wohnpro Guide anmelden.");
+    } finally {
+      setIsLoggingIn(false);
     }
   };
 
@@ -256,7 +267,7 @@ const App: React.FC = () => {
             Synchronisiere mit Nextcloud...
           </div>
         )}
-        <LoginView onLogin={handleLogin} />
+        <LoginView onLogin={handleLogin} isLoading={isLoggingIn} />
       </>
     );
   }
diff --git a/components/Icons.tsx b/components/Icons.tsx
index 6d8f925..fe51790 100644
--- a/components/Icons.tsx
+++ b/components/Icons.tsx
@@ -22,9 +22,11 @@ import {
   HelpCircle,
   ThumbsUp,
   ThumbsDown,
-  Download
+  Download,
+  Loader
 } from 'lucide-react';
 
+export const LoaderIcon = ({ className = "w-6 h-6" }) => <Loader className={className} />;
 export const ChatIcon = ({ className = "w-6 h-6" }) => <MessageSquare className={className} />;
 export const MicIcon = ({ className = "w-6 h-6" }) => <Mic className={className} />;
 export const DocIcon = ({ className = "w-6 h-6" }) => <FileText className={className} />;
diff --git a/components/LoginView.tsx b/components/LoginView.tsx
index a7c3c0b..7ec51e5 100644
--- a/components/LoginView.tsx
+++ b/components/LoginView.tsx
@@ -1,13 +1,15 @@
 
 import React, { useState } from 'react';
 import { User } from '../types';
+import { LoaderIcon } from './Icons';
 
 interface LoginViewProps {
   onLogin: (email: string) => void;
   error?: string;
+  isLoading: boolean;
 }
 
-const LoginView: React.FC<LoginViewProps> = ({ onLogin, error: externalError }) => {
+const LoginView: React.FC<LoginViewProps> = ({ onLogin, error: externalError, isLoading }) => {
   const [email, setEmail] = useState('');
   const [error, setError] = useState(externalError || '');
 
@@ -48,9 +50,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"
+            disabled={isLoading}
+            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 flex items-center justify-center disabled:bg-gray-800"
           >
-            Guide öffnen
+            {isLoading ? (
+              <>
+                <LoaderIcon className="w-6 h-6 animate-spin" />
+                <span className="sr-only">Wird geladen...</span>
+              </>
+            ) : (
+              'Guide öffnen'
+            )}
           </button>
         </form>