Lazy load page components

CONTEXT.md

@@ -64,6 +64,7 @@ The project uses shadcn/ui components located in `@/components/ui`. These are un
 - **Skeleton**: Loading placeholder
 - **Slider**: Input for selecting a value from a range
 - **Sonner**: Toast notification manager
+- **Spinner**: Animated loading spinner
 - **Switch**: Toggle switch control
 - **Table**: Data table with headers and rows
 - **Tabs**: Tabbed interface component

src/App.tsx

@@ -1,9 +1,11 @@
 // NOTE: This file should normally not be modified unless you are adding a new provider.
 // To add new routes, edit the AppRouter.tsx file.
 
+import { Suspense } from 'react';
 import NostrProvider from '@/components/NostrProvider'
 import { ThemeProvider } from "@/components/ThemeProvider";
 import { Toaster } from "@/components/ui/toaster";
+import { Spinner } from '@/components/ui/spinner';
 import { Toaster as Sonner } from "@/components/ui/sonner";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
@@ -36,7 +38,9 @@ export function App() {
             <TooltipProvider>
               <Toaster />
               <Sonner />
-              <AppRouter />
+              <Suspense fallback={<div className="flex items-center justify-center h-screen"><Spinner /></div>}>
+                <AppRouter />
+              </Suspense>
             </TooltipProvider>
           </QueryClientProvider>
         </NostrProvider>

src/AppRouter.tsx

@@ -1,9 +1,11 @@
+import { lazy } from "react";
 import { BrowserRouter, Route, Routes } from "react-router-dom";
-
-import Index from "./pages/Index";
-import NotFound from "./pages/NotFound";
 import { ScrollToTop } from "./components/ScrollToTop";
 
+// Lazy load page components
+const Index = lazy(() => import("./pages/Index"));
+const NotFound = lazy(() => import("./pages/NotFound"));
+
 export function AppRouter() {
   return (
     <BrowserRouter>

src/components/ui/spinner.tsx

@@ -0,0 +1,12 @@
+import { cn } from '@/lib/utils';
+import { Loader2 } from 'lucide-react';
+
+const Spinner = ({ className }: { className?: string }) => {
+  return (
+    <Loader2
+      className={cn('my-28 h-16 w-16 text-primary/60 animate-spin', className)}
+    />
+  );
+};
+
+export { Spinner };