Kieran/snort
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 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
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 && (