Web App Slow to Load or Unusable: Performance Fixes

import dynamic from 'next/dynamic';
import { SkeletonLoader } from '@/components/SkeletonLoader';

// Code-split heavy interactive charts: loads only when user reaches this view
const HeavyAnalyticsChart = dynamic(
  () => import('@/components/HeavyAnalyticsChart'),
  {
    loading: () => <SkeletonLoader />,
    ssr: false // Prevents server-side canvas compilation overhead
  }
);

export default function DashboardPage() {
  return (
    <main>
      <h1>Operational Overview</h1>
      <CriticalMetricCards /> {/* Rendered immediately in first server HTML */}
      <HeavyAnalyticsChart />  {/* Hydrated asynchronously in background */}
    </main>
  );
}