UI: доработано оформление — тени, анимации, градиенты, iOS-стиль

client/src/components/ProtectedRoute.tsx

@@ -1,20 +1,24 @@
 import { Navigate } from 'react-router-dom';
 import { useAuth } from '@/hooks/useAuth';
+import { Cat } from 'lucide-react';
 
 export default function ProtectedRoute({ children }: { children: React.ReactNode }) {
   const { user, isLoading } = useAuth();
 
   if (isLoading) {
     return (
-      <div className="flex h-screen items-center justify-center">
-        <div className="h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent" />
+      <div className="flex h-screen items-center justify-center bg-[var(--bg)]">
+        <div className="flex flex-col items-center gap-4">
+          <div className="h-14 w-14 rounded-full flex items-center justify-center" style={{ background: 'linear-gradient(135deg, #007aff, #5856d6)' }}>
+            <Cat className="h-7 w-7 text-white" strokeWidth={1.5} />
+          </div>
+          <div className="h-6 w-6 rounded-full border-2 border-[var(--primary)]/30 border-t-[var(--primary)] animate-spin" />
+        </div>
       </div>
     );
   }
 
-  if (!user) {
-    return <Navigate to="/login" replace />;
-  }
+  if (!user) return <Navigate to="/login" replace />;
 
   return <>{children}</>;
-}
+}