use dynamic imports instead of lazy loading for NetworkGraph

packages/app/src/Pages/NetworkGraph.tsx

@@ -1,8 +1,7 @@
-import ForceGraph3D, { NodeObject } from "react-force-graph-3d";
+import { NodeObject } from "react-force-graph-3d";
 import { useContext, useEffect, useState } from "react";
 import { MetadataCache, socialGraphInstance, STR, UID } from "@snort/system";
 import { SnortContext } from "@snort/system-react";
-import * as THREE from "three";
 import { defaultAvatar } from "../SnortUtils";
 import { proxyImg } from "@/Hooks/useImgProxy";
 import { LoginStore } from "@/Login";
@@ -73,6 +72,19 @@ const NetworkGraph = () => {
   // const [direction, setDirection] = useState(Direction.OUTBOUND);
   // const [renderLimit, setRenderLimit] = useState(NODE_LIMIT);
 
+  const [ForceGraph3D, setForceGraph3D] = useState(null);
+  const [THREE, setTHREE] = useState(null);
+
+  useEffect(() => {
+    // Dynamically import the modules
+    import("react-force-graph-3d").then(module => {
+      setForceGraph3D(module.default);
+    });
+    import("three").then(module => {
+      setTHREE(module);
+    });
+  }, []);
+
   const handleCloseGraph = () => {
     setOpen(false);
   };
@@ -211,6 +223,8 @@ const NetworkGraph = () => {
     refreshData();
   }, []);
 
+  if (!ForceGraph3D || !THREE) return null;
+
   return (
     <div>
       {!open && (

packages/app/src/index.tsx

@@ -25,10 +25,6 @@ import PowWorkerURL from "@snort/system/src/pow-worker.ts?worker&url";
 import { SnortContext } from "@snort/system-react";
 import { removeUndefined, throwIfOffline } from "@snort/shared";
 
-import { lazy, Suspense } from "react";
-
-const NetworkGraph = lazy(() => import("@/Pages/NetworkGraph"));
-
 import * as serviceWorkerRegistration from "@/serviceWorkerRegistration";
 import { IntlProvider } from "@/IntlProvider";
 import { getCountry, unwrap } from "@/SnortUtils";
@@ -60,6 +56,7 @@ import { OnboardingRoutes } from "@/Pages/onboarding";
 import { setupWebLNWalletConfig } from "@/Wallet/WebLN";
 import { Wallets } from "@/Wallet";
 import Fuse from "fuse.js";
+import NetworkGraph from "@/Pages/NetworkGraph";
 
 declare global {
   interface Window {
@@ -334,9 +331,7 @@ root.render(
   <StrictMode>
     <IntlProvider>
       <SnortContext.Provider value={System}>
-        <Suspense fallback={<div>Loading...</div>}>
+        <RouterProvider router={router} />
-          <RouterProvider router={router} />
-        </Suspense>
       </SnortContext.Provider>
     </IntlProvider>
   </StrictMode>,