diff --git a/packages/app/src/Pages/NetworkGraph.tsx b/packages/app/src/Pages/NetworkGraph.tsx index 31ef8299..b5d2ab22 100644 --- a/packages/app/src/Pages/NetworkGraph.tsx +++ b/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 (
{!open && ( diff --git a/packages/app/src/index.tsx b/packages/app/src/index.tsx index e10f0f44..ad77c991 100644 --- a/packages/app/src/index.tsx +++ b/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( - Loading...
}> - - + ,