31 von 45 = ca. 69 %

31 punkter der todo liste abgeabeitet

src/components/ProtectedRoute.jsx

@@ -1,16 +1,26 @@
 import { Navigate } from 'react-router-dom';
 import { useAuth } from '../context/AuthContext';
+import { Card, CardContent } from '@/components/ui/card';
+import { Skeleton } from '@/components/ui/skeleton';
 
 export default function ProtectedRoute({ children }) {
   const { user, loading } = useAuth();
 
   if (loading) {
     return (
-      <div className="login-page">
-        <div className="login-card" style={{ textAlign: 'center' }}>
-          <div className="logo" style={{ marginBottom: '12px' }}>Defekt<span>Track</span></div>
-          <p style={{ color: '#888' }}>Lade...</p>
-        </div>
+      <div className="min-h-screen flex items-center justify-center bg-muted/50 p-4">
+        <Card className="w-full max-w-md shadow-lg">
+          <CardContent className="flex flex-col items-center gap-4 py-10">
+            <p className="text-2xl font-bold tracking-tight">
+              Defekt<span className="text-amber-500">Track</span>
+            </p>
+            <div className="w-full space-y-3">
+              <Skeleton className="h-4 w-3/4 mx-auto" />
+              <Skeleton className="h-4 w-1/2 mx-auto" />
+              <Skeleton className="h-10 w-full" />
+            </div>
+          </CardContent>
+        </Card>
       </div>
     );
   }