React Suspense and lazy loading for code splitting

import { Suspense, lazy } from 'react';
import { Routes, Route } from 'react-router-dom';

// Lazy load page components (each becomes a separate chunk)
const Dashboard = lazy(() => import('./pages/Dashboard'));
const TraceList = lazy(() => import('./pages/TraceList'));
const TraceDetail = lazy(() => import('./pages/TraceDetail'));
const Settings = lazy(() => import('./pages/Settings'));

// Loading skeleton that matches the layout
function PageSkeleton() {
  return (
    <div className="animate-pulse">
      <div className="h-8 bg-gray-200 rounded w-1/3 mb-4" />
      <div className="h-4 bg-gray-200 rounded w-2/3 mb-2" />
      <div className="h-4 bg-gray-200 rounded w-1/2" />
    </div>
  );
}

function App() {
  return (
    <Suspense fallback={<PageSkeleton />}>
      <Routes>
        <Route path="/" element={<Dashboard />} />
        <Route path="/traces" element={<TraceList />} />
        <Route path="/traces/:id" element={<TraceDetail />} />
        <Route path="/settings" element={<Settings />} />
      </Routes>
    </Suspense>
  );
}

// Nested Suspense for granular loading states
function TraceDetailPage({ id }: { id: string }) {
  const LazyComments = lazy(() => import('./TraceComments'));

  return (
    <div>
      <TraceHeader id={id} />
      <Suspense fallback={<div>Loading comments...</div>}>
        <LazyComments traceId={id} />
      </Suspense>
    </div>
  );
}

// Preload on hover (prevents loading spinner on click)
const preloadDashboard = () => import('./pages/Dashboard');

function NavLink({ to, label }: { to: string; label: string }) {
  return (
    <Link to={to} onMouseEnter={preloadDashboard}>
      {label}
    </Link>
  );
}