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

docker-compose.yml

@@ -3,6 +3,8 @@ services:
     image: postgres:17-alpine
     volumes:
       - postgres_data:/var/lib/postgresql/data/
+    ports:
+      - "5432:5432"
     environment:
       - POSTGRES_USER=${POSTGRES_USER}
       - POSTGRES_PASSWORD=${POSTGRES_PASSWORD}
@@ -21,6 +23,8 @@ services:
       context: ./backend
       dockerfile: Dockerfile
       target: production
+    ports:
+      - "8000:8000"
     env_file:
       - .env
     environment:
@@ -43,6 +47,8 @@ services:
       target: runner
       args:
         - NEXT_PUBLIC_API_URL=${NEXT_PUBLIC_API_URL}
+    ports:
+      - "3000:3000"
     environment:
       - NODE_ENV=production
       - NEXT_PUBLIC_API_URL=${NEXT_PUBLIC_API_URL}

frontend/next.config.ts

@@ -21,9 +21,4 @@ const nextConfig: NextConfig = {
     // Note: swcMinify is default in Next.js 15
 };
 
-// Enable bundle analyzer when ANALYZE=true
-const withBundleAnalyzer = require('@next/bundle-analyzer')({
-    enabled: process.env.ANALYZE === 'true',
-});
-
-export default withBundleAnalyzer(nextConfig);
+export default nextConfig;

frontend/src/app/providers.tsx

@@ -5,9 +5,11 @@ import { lazy, Suspense, useState } from 'react';
 import { ThemeProvider } from '@/components/theme';
 import { AuthInitializer } from '@/components/auth';
 
-// Lazy load devtools - only in development, never in production
+// Lazy load devtools - only in local development (not in Docker), never in production
+// Set NEXT_PUBLIC_ENABLE_DEVTOOLS=true in .env.local to enable
 const ReactQueryDevtools =
-  process.env.NODE_ENV === 'development'
+  process.env.NODE_ENV === 'development' &&
+  process.env.NEXT_PUBLIC_ENABLE_DEVTOOLS === 'true'
     ? lazy(() =>
         import('@tanstack/react-query-devtools').then((mod) => ({
           default: mod.ReactQueryDevtools,

frontend/src/components/auth/AuthGuard.tsx

@@ -6,10 +6,11 @@
 
 'use client';
 
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { useRouter, usePathname } from 'next/navigation';
 import { useAuthStore } from '@/lib/stores/authStore';
 import { useMe } from '@/lib/api/hooks/useAuth';
+import { AuthLoadingSkeleton } from '@/components/layout';
 import config from '@/config/app.config';
 
 interface AuthGuardProps {
@@ -18,20 +19,6 @@ interface AuthGuardProps {
   fallback?: React.ReactNode;
 }
 
-/**
- * Loading spinner component
- */
-function LoadingSpinner() {
-  return (
-    <div className="flex min-h-screen items-center justify-center">
-      <div className="flex flex-col items-center space-y-4">
-        <div className="h-12 w-12 animate-spin rounded-full border-4 border-gray-300 border-t-primary"></div>
-        <p className="text-sm text-muted-foreground">Loading...</p>
-      </div>
-    </div>
-  );
-}
-
 /**
  * AuthGuard - Client component for route protection
  *
@@ -65,12 +52,33 @@ export function AuthGuard({ children, requireAdmin = false, fallback }: AuthGuar
   const pathname = usePathname();
   const { isAuthenticated, isLoading: authLoading, user } = useAuthStore();
 
+  // Delayed loading state - only show skeleton after 150ms to avoid flicker on fast loads
+  const [showLoading, setShowLoading] = useState(false);
+
   // Fetch user data if authenticated but user not loaded
   const { isLoading: userLoading } = useMe();
 
   // Determine overall loading state
   const isLoading = authLoading || (isAuthenticated && !user && userLoading);
 
+  // Delayed loading effect - wait 150ms before showing skeleton
+  useEffect(() => {
+    if (!isLoading) {
+      // Reset immediately when loading completes
+      setShowLoading(false);
+      return;
+    }
+
+    // Set a timer to show loading skeleton after 150ms
+    const timer = setTimeout(() => {
+      if (isLoading) {
+        setShowLoading(true);
+      }
+    }, 150);
+
+    return () => clearTimeout(timer);
+  }, [isLoading]);
+
   useEffect(() => {
     // If not loading and not authenticated, redirect to login
     if (!isLoading && !isAuthenticated) {
@@ -94,9 +102,14 @@ export function AuthGuard({ children, requireAdmin = false, fallback }: AuthGuar
     }
   }, [requireAdmin, isAuthenticated, user, router]);
 
-  // Show loading state
+  // Show loading skeleton only after delay (prevents flicker on fast loads)
+  if (isLoading && showLoading) {
+    return fallback ? <>{fallback}</> : <AuthLoadingSkeleton />;
+  }
+
+  // Show nothing while loading but before delay threshold (prevents flicker)
   if (isLoading) {
-    return fallback ? <>{fallback}</> : <LoadingSpinner />;
+    return null;
   }
 
   // Show nothing if redirecting

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';