From 8bdff8da6d06f68c3351a58a20c086acf419b87d Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sun, 1 Jun 2025 16:26:09 -0500
Subject: [PATCH] Lazy load page components

---
 CONTEXT.md                    |  1 +
 src/App.tsx                   |  6 +++++-
 src/AppRouter.tsx             |  8 +++++---
 src/components/ui/spinner.tsx | 12 ++++++++++++
 4 files changed, 23 insertions(+), 4 deletions(-)
 create mode 100644 src/components/ui/spinner.tsx

diff --git a/CONTEXT.md b/CONTEXT.md
index 1e61472..8169721 100644
--- a/CONTEXT.md
+++ b/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
diff --git a/src/App.tsx b/src/App.tsx
index 2f89457..ab07839 100644
--- a/src/App.tsx
+++ b/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>
diff --git a/src/AppRouter.tsx b/src/AppRouter.tsx
index efa2600..2e5f97d 100644
--- a/src/AppRouter.tsx
+++ b/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>
diff --git a/src/components/ui/spinner.tsx b/src/components/ui/spinner.tsx
new file mode 100644
index 0000000..93cd92a
--- /dev/null
+++ b/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 };
\ No newline at end of file