DynamicAppWrapper included

app/components/DynamicMainApp.tsx

@@ -1,22 +0,0 @@
-'use client';
-
-import dynamic from 'next/dynamic';
-import { Center, Spinner } from '@chakra-ui/react';
-import ClientOnly from './ClientOnly';
-
-const MainApp = dynamic(() => import('./MainApp'), {
-  ssr: false,
-  loading: () => (
-    <Center h="100vh">
-      <Spinner size="xl" />
-    </Center>
-  ),
-});
-
-export default function DynamicMainApp() {
-  return (
-    <ClientOnly>
-      <MainApp />
-    </ClientOnly>
-  );
-} 

app/components/MainAppWrapper.tsx

@@ -0,0 +1,31 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import dynamic from 'next/dynamic';
+import { Center, Spinner } from '@chakra-ui/react';
+
+const MainApp = dynamic(() => import('./MainApp'), {
+  loading: () => (
+    <Center h="100vh">
+      <Spinner size="xl" />
+    </Center>
+  ),
+});
+
+export default function MainAppWrapper() {
+  const [isMounted, setIsMounted] = useState(false);
+
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
+
+  if (!isMounted) {
+    return (
+      <Center h="100vh">
+        <Spinner size="xl" />
+      </Center>
+    );
+  }
+
+  return <MainApp />;
+} 

app/page.tsx

@@ -1,5 +1,17 @@
-import DynamicMainApp from './components/DynamicMainApp';
+import { Suspense } from 'react';
+import { Center, Spinner } from '@chakra-ui/react';
+import MainAppWrapper from './components/MainAppWrapper';
 
 export default function Home() {
-  return <DynamicMainApp />;
+  return (
+    <Suspense
+      fallback={
+        <Center h="100vh">
+          <Spinner size="xl" />
+        </Center>
+      }
+    >
+      <MainAppWrapper />
+    </Suspense>
+  );
 }