Introduce AuthLoadingSkeleton and HeaderSkeleton for smoother loading, replace spinner in AuthGuard, update ReactQueryDevtools toggle, enable Docker ports for local development.

frontend/src/components/layout/AuthLoadingSkeleton.tsx

@@ -0,0 +1,33 @@
+/**
+ * Auth Loading Skeleton
+ * Loading placeholder shown during authentication check
+ * Mimics the authenticated layout structure for smooth loading experience
+ */
+
+import { HeaderSkeleton } from './HeaderSkeleton';
+import { Footer } from './Footer';
+
+export function AuthLoadingSkeleton() {
+  return (
+    <div className="flex min-h-screen flex-col">
+      <HeaderSkeleton />
+      <main className="flex-1">
+        <div className="container mx-auto px-4 py-8">
+          {/* Page title skeleton */}
+          <div className="mb-6">
+            <div className="h-8 w-48 bg-muted animate-pulse rounded mb-2" />
+            <div className="h-4 w-64 bg-muted animate-pulse rounded" />
+          </div>
+
+          {/* Content skeleton */}
+          <div className="space-y-4">
+            <div className="h-32 w-full bg-muted animate-pulse rounded-lg" />
+            <div className="h-32 w-full bg-muted animate-pulse rounded-lg" />
+            <div className="h-32 w-full bg-muted animate-pulse rounded-lg" />
+          </div>
+        </div>
+      </main>
+      <Footer />
+    </div>
+  );
+}

frontend/src/components/layout/HeaderSkeleton.tsx

@@ -0,0 +1,32 @@
+/**
+ * Header Skeleton Component
+ * Loading placeholder for Header during authentication check
+ * Matches the structure of the actual Header component
+ */
+
+export function HeaderSkeleton() {
+  return (
+    <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+      <div className="container mx-auto flex h-16 items-center px-4">
+        {/* Logo skeleton */}
+        <div className="flex items-center space-x-8">
+          <div className="flex items-center space-x-2">
+            <div className="h-6 w-24 bg-muted animate-pulse rounded" />
+          </div>
+
+          {/* Navigation links skeleton */}
+          <nav className="hidden md:flex items-center space-x-1">
+            <div className="h-8 w-16 bg-muted animate-pulse rounded-md" />
+            <div className="h-8 w-16 bg-muted animate-pulse rounded-md" />
+          </nav>
+        </div>
+
+        {/* Right side - Theme toggle and user menu skeleton */}
+        <div className="ml-auto flex items-center space-x-2">
+          <div className="h-10 w-10 bg-muted animate-pulse rounded-md" />
+          <div className="h-10 w-10 bg-muted animate-pulse rounded-full" />
+        </div>
+      </div>
+    </header>
+  );
+}

frontend/src/components/layout/index.ts

@@ -5,3 +5,5 @@
 
 export { Header } from './Header';
 export { Footer } from './Footer';
+export { HeaderSkeleton } from './HeaderSkeleton';
+export { AuthLoadingSkeleton } from './AuthLoadingSkeleton';