🎨 Palette: Add loading state to login button

App.tsx

@@ -46,6 +46,7 @@ const App: React.FC = () => {
   const [isFaqGenerating, setIsFaqGenerating] = useState(false);
   const [generatingStatus, setGeneratingStatus] = useState('');
   const [isSyncing, setIsSyncing] = useState(false);
+  const [loginError, setLoginError] = useState<string | undefined>(undefined);
 
   const [selectedDocId, setSelectedDocId] = useState<string | null>(null);
   const [highlightText, setHighlightText] = useState<string>('');
@@ -96,13 +97,16 @@ const App: React.FC = () => {
   }, [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) {
-      setCurrentUser(user);
-    } else {
-      alert("Zugang verweigert. Nur verifizierte Wohnpro-Bewohner können sich im Wohnpro Guide anmelden.");
-    }
+    setLoginError(undefined);
+    // Simulate network delay
+    setTimeout(() => {
+      const user = users.find(u => u.email.toLowerCase() === email.toLowerCase() && u.status === 'aktiv');
+      if (user) {
+        setCurrentUser(user);
+      } else {
+        setLoginError("Zugang verweigert. Prüfe deine E-Mail oder frage die Verwaltung.");
+      }
+    }, 1200);
   };
 
   const sendMessage = async (text: string) => {
@@ -256,7 +260,7 @@ const App: React.FC = () => {
             Synchronisiere mit Nextcloud...
           </div>
         )}
-        <LoginView onLogin={handleLogin} />
+        <LoginView onLogin={handleLogin} error={loginError} />
       </>
     );
   }

components/LoginView.tsx

@@ -1,6 +1,5 @@
 
-import React, { useState } from 'react';
-import { User } from '../types';
+import React, { useState, useEffect } from 'react';
 
 interface LoginViewProps {
   onLogin: (email: string) => void;
@@ -9,14 +8,26 @@ interface LoginViewProps {
 
 const LoginView: React.FC<LoginViewProps> = ({ onLogin, error: externalError }) => {
   const [email, setEmail] = useState('');
-  const [error, setError] = useState(externalError || '');
+  const [error, setError] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+
+  useEffect(() => {
+    if (externalError) {
+      setError(externalError);
+      setIsLoading(false);
+    }
+  }, [externalError]);
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
+    if (isLoading) return;
+
     if (!email) {
       setError('Bitte gib deine Wohnpro E-Mail Adresse ein.');
       return;
     }
+    setIsLoading(true);
+    setError('');
     onLogin(email);
   };
 
@@ -48,9 +59,18 @@ 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 disabled:bg-gray-800 disabled:cursor-not-allowed flex items-center justify-center"
+            aria-live="polite"
           >
-            Guide öffnen
+            {isLoading ? (
+              <>
+                <div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin mr-3" />
+                <span>Wird geladen...</span>
+              </>
+            ) : (
+              'Guide öffnen'
+            )}
           </button>
         </form>