Disabled serverside rendering

osg-htc · Nov 3, 2023 · 62e9c6c · 62e9c6c
1 parent dbb689c
commit 62e9c6c
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 5 deletions.
diff --git a/src/app/components/DynamicMapComponent.tsx b/src/app/components/DynamicMapComponent.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import { BrowserRouter } from 'react-router-dom';
+import MapComponent from './MapComponent';
+
+const DynamicMapComponent: React.FC = () => (
+    <BrowserRouter>
+        <MapComponent />
+    </BrowserRouter>
+);
+
+export default DynamicMapComponent;
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,15 +1,20 @@
 "use client"
 import Head from "next/head";
 import  Box from '@mui/material/Box';
-import MapComponent from '../app/components/MapComponent'
 import 'mapbox-gl/dist/mapbox-gl.css';
-import { BrowserRouter } from "react-router-dom";
+import dynamic from 'next/dynamic';
+import React from 'react';
+import CircularProgress from '@mui/material/CircularProgress';
+
+const DynamicLoadedMapComponent = dynamic(() => import('./components/DynamicMapComponent'), {
+  ssr: false, 
+  loading: () => <CircularProgress />
+});
 
 function HomePage() {
 
   return (
     <>
-    <BrowserRouter>
       <Head>
         <link
           rel="stylesheet"
@@ -18,9 +23,8 @@ function HomePage() {
         <meta name="viewport" content="initial-scale=1, width=device-width" />
       </Head>
       <Box height={"100vh"} width={"100vw"}>
-        <MapComponent/>
+        <DynamicLoadedMapComponent />
       </Box>
-      </BrowserRouter>
     </>
   );
 }