🎨 Palette: Add loading state to login button

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,14 +96,18 @@ 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) => {
+    setIsLoggingIn(true);
+    // Simulate network delay
+    await new Promise(resolve => setTimeout(resolve, 1000));
+
     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.");
     }
+    setIsLoggingIn(false);
   };
 
   const sendMessage = async (text: string) => {
@@ -256,7 +261,7 @@ const App: React.FC = () => {
             Synchronisiere mit Nextcloud...
           </div>
         )}
-        <LoginView onLogin={handleLogin} />
+        <LoginView onLogin={handleLogin} isLoading={isLoggingIn} />
       </>
     );
   }

components/Icons.tsx

@@ -46,3 +46,26 @@ export const ChevronDownIcon = ({ className = "w-6 h-6" }) => <ChevronDown class
 export const ThumbsUpIcon = ({ className = "w-6 h-6" }) => <ThumbsUp className={className} />;
 export const ThumbsDownIcon = ({ className = "w-6 h-6" }) => <ThumbsDown className={className} />;
 export const DownloadIcon = ({ className = "w-6 h-6" }) => <Download className={className} />;
+
+export const Spinner = ({ className = "w-6 h-6" }) => (
+  <svg
+    className={`animate-spin ${className}`}
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+  >
+    <circle
+      className="opacity-25"
+      cx="12"
+      cy="12"
+      r="10"
+      stroke="currentColor"
+      strokeWidth="4"
+    />
+    <path
+      className="opacity-75"
+      fill="currentColor"
+      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+    />
+  </svg>
+);

components/LoginView.tsx

@@ -1,13 +1,14 @@
-
 import React, { useState } from 'react';
 import { User } from '../types';
+import { Spinner } 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 || '');
 
@@ -42,15 +43,17 @@ const LoginView: React.FC<LoginViewProps> = ({ onLogin, error: externalError })
               onChange={(e) => { setEmail(e.target.value); setError(''); }}
               placeholder="Wohnpro E-Mail Adresse"
               className={`w-full bg-gray-50 border ${error ? 'border-red-200' : 'border-gray-100'} rounded-2xl px-6 py-4 focus:outline-none focus:ring-2 focus:ring-black/5 transition-all text-lg placeholder:text-gray-300`}
+              disabled={isLoading}
             />
             {error && <p className="mt-2 text-sm text-red-500 text-left px-2">{error}</p>}
           </div>
 
           <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:opacity-50 disabled:cursor-not-allowed flex items-center justify-center"
+            disabled={isLoading}
           >
-            Guide öffnen
+            {isLoading ? <Spinner className="w-7 h-7" /> : 'Guide öffnen'}
           </button>
         </form>