Kieran/snort
5
14
Fork 14
Code Issues 54 Pull Requests 1 Packages Projects Releases 24 Wiki Activity

use dynamic imports instead of lazy loading for NetworkGraph

Browse Source
This commit is contained in:
Martti Malmi 2023-11-26 11:17:59 +02:00
parent a92fc267c3
commit 920f8ae20d
2 changed files with 18 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
packages/app/src/Pages/NetworkGraph.tsx
View File

@ -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 && (

9
packages/app/src/index.tsx
View File

@ -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} />
</Suspense>
<RouterProvider router={router} />
</SnortContext.Provider>
</IntlProvider>
</StrictMode>,