forked from Kieran/snort
use dynamic imports instead of lazy loading for NetworkGraph
This commit is contained in:
parent
a92fc267c3
commit
920f8ae20d
@ -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 { useContext, useEffect, useState } from "react";
|
||||||
import { MetadataCache, socialGraphInstance, STR, UID } from "@snort/system";
|
import { MetadataCache, socialGraphInstance, STR, UID } from "@snort/system";
|
||||||
import { SnortContext } from "@snort/system-react";
|
import { SnortContext } from "@snort/system-react";
|
||||||
import * as THREE from "three";
|
|
||||||
import { defaultAvatar } from "../SnortUtils";
|
import { defaultAvatar } from "../SnortUtils";
|
||||||
import { proxyImg } from "@/Hooks/useImgProxy";
|
import { proxyImg } from "@/Hooks/useImgProxy";
|
||||||
import { LoginStore } from "@/Login";
|
import { LoginStore } from "@/Login";
|
||||||
@ -73,6 +72,19 @@ const NetworkGraph = () => {
|
|||||||
// const [direction, setDirection] = useState(Direction.OUTBOUND);
|
// const [direction, setDirection] = useState(Direction.OUTBOUND);
|
||||||
// const [renderLimit, setRenderLimit] = useState(NODE_LIMIT);
|
// 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 = () => {
|
const handleCloseGraph = () => {
|
||||||
setOpen(false);
|
setOpen(false);
|
||||||
};
|
};
|
||||||
@ -211,6 +223,8 @@ const NetworkGraph = () => {
|
|||||||
refreshData();
|
refreshData();
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
|
if (!ForceGraph3D || !THREE) return null;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
{!open && (
|
{!open && (
|
||||||
|
@ -25,10 +25,6 @@ import PowWorkerURL from "@snort/system/src/pow-worker.ts?worker&url";
|
|||||||
import { SnortContext } from "@snort/system-react";
|
import { SnortContext } from "@snort/system-react";
|
||||||
import { removeUndefined, throwIfOffline } from "@snort/shared";
|
import { removeUndefined, throwIfOffline } from "@snort/shared";
|
||||||
|
|
||||||
import { lazy, Suspense } from "react";
|
|
||||||
|
|
||||||
const NetworkGraph = lazy(() => import("@/Pages/NetworkGraph"));
|
|
||||||
|
|
||||||
import * as serviceWorkerRegistration from "@/serviceWorkerRegistration";
|
import * as serviceWorkerRegistration from "@/serviceWorkerRegistration";
|
||||||
import { IntlProvider } from "@/IntlProvider";
|
import { IntlProvider } from "@/IntlProvider";
|
||||||
import { getCountry, unwrap } from "@/SnortUtils";
|
import { getCountry, unwrap } from "@/SnortUtils";
|
||||||
@ -60,6 +56,7 @@ import { OnboardingRoutes } from "@/Pages/onboarding";
|
|||||||
import { setupWebLNWalletConfig } from "@/Wallet/WebLN";
|
import { setupWebLNWalletConfig } from "@/Wallet/WebLN";
|
||||||
import { Wallets } from "@/Wallet";
|
import { Wallets } from "@/Wallet";
|
||||||
import Fuse from "fuse.js";
|
import Fuse from "fuse.js";
|
||||||
|
import NetworkGraph from "@/Pages/NetworkGraph";
|
||||||
|
|
||||||
declare global {
|
declare global {
|
||||||
interface Window {
|
interface Window {
|
||||||
@ -334,9 +331,7 @@ root.render(
|
|||||||
<StrictMode>
|
<StrictMode>
|
||||||
<IntlProvider>
|
<IntlProvider>
|
||||||
<SnortContext.Provider value={System}>
|
<SnortContext.Provider value={System}>
|
||||||
<Suspense fallback={<div>Loading...</div>}>
|
<RouterProvider router={router} />
|
||||||
<RouterProvider router={router} />
|
|
||||||
</Suspense>
|
|
||||||
</SnortContext.Provider>
|
</SnortContext.Provider>
|
||||||
</IntlProvider>
|
</IntlProvider>
|
||||||
</StrictMode>,
|
</StrictMode>,
|
||||||
|
Loading…
Reference in New Issue
Block a user