fix: Add ClientBoundary component and wrap client components with Sus…

…pense

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>
+  );
+}

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>
   )
 }