From 1cedc12dc2ce7c3287d0c561e48f67d0df5c6b97 Mon Sep 17 00:00:00 2001
From: while-basic <c_celaya@icloud.com>
Date: Mon, 2 Dec 2024 19:42:55 -0700
Subject: [PATCH] fix: Add ClientBoundary component and wrap client components
 with Suspense

---
 components/client-boundary.tsx | 16 ++++++++++++++++
 components/root-layout.tsx     | 21 ++++++++++++---------
 2 files changed, 28 insertions(+), 9 deletions(-)
 create mode 100644 components/client-boundary.tsx

diff --git a/components/client-boundary.tsx b/components/client-boundary.tsx
new file mode 100644
index 0000000..7581ad0
--- /dev/null
+++ b/components/client-boundary.tsx
@@ -0,0 +1,16 @@
+'use client';
+
+import { Suspense } from 'react';
+
+interface ClientBoundaryProps {
+  children: React.ReactNode;
+  fallback?: React.ReactNode;
+}
+
+export function ClientBoundary({ children, fallback }: ClientBoundaryProps) {
+  return (
+    <Suspense fallback={fallback || <div>Loading...</div>}>
+      {children}
+    </Suspense>
+  );
+}
diff --git a/components/root-layout.tsx b/components/root-layout.tsx
index 93f64a4..28f22a8 100644
--- a/components/root-layout.tsx
+++ b/components/root-layout.tsx
@@ -5,14 +5,15 @@ import "@/styles/mdx.css"
 import Navbar from "@/components/navbar"
 import { LoadingScreen } from "@/components/loading-screen"
 import { usePageView } from "@/hooks/use-page-view"
+import { ClientBoundary } from "./client-boundary"
 
 const geistSans = localFont({
-  src: "../app/fonts/GeistVF.woff",
+  src: "./fonts/GeistVF.woff",
   variable: "--font-geist-sans",
 })
 
 const geistMono = localFont({
-  src: "../app/fonts/GeistMonoVF.woff",
+  src: "./fonts/GeistMonoVF.woff",
   variable: "--font-geist-mono",
 })
 
@@ -25,12 +26,14 @@ export function RootLayoutClient({
   usePageView()
 
   return (
-    <div className={`${geistSans.variable} ${geistMono.variable} font-sans antialiased flex min-h-screen flex-col`}>
-      <LoadingScreen />
-      <Navbar />
-      <main>
-        {children}
-      </main>
-    </div>
+    <ClientBoundary>
+      <div className={`${geistSans.variable} ${geistMono.variable} font-sans antialiased flex min-h-screen flex-col`}>
+        <LoadingScreen />
+        <Navbar />
+        <main>
+          {children}
+        </main>
+      </div>
+    </ClientBoundary>
   )
 }