feat: dynamic import echarts

visualDust · Nov 26, 2023 · 12d64ba · 12d64ba
1 parent f8788b6
commit 12d64ba
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 20 deletions.
diff --git a/neetbox/frontend/src/components/echarts.tsx b/neetbox/frontend/src/components/echarts.tsx
@@ -1,5 +1,6 @@
-import { useRef, useEffect, HTMLAttributes } from "react";
-import * as echarts from "echarts";
+import { useRef, useEffect, HTMLAttributes, useState } from "react";
+import type * as echarts from "echarts";
+import Loading from "./loading";
 
 export interface EChartsProps {
   initialOption: () => echarts.EChartsOption;
@@ -10,27 +11,43 @@ export interface EChartsProps {
 export const ECharts = (props: EChartsProps) => {
   const chartContainerRef = useRef(null);
   const chartRef = useRef<echarts.ECharts>(null!);
+  const [echartsModule, setEchartsModule] = useState<typeof echarts | null>(
+    null
+  );
 
   useEffect(() => {
-    const chart = echarts.init(chartContainerRef.current);
+    import("echarts").then((mod) => setEchartsModule(mod));
+  });
 
-    chart.setOption(props.initialOption());
-    chartRef.current = chart;
+  useEffect(() => {
+    if (echartsModule) {
+      const chart = echartsModule.init(chartContainerRef.current);
 
-    const handleResize = () => {
-      chart.resize();
-    };
-    window.addEventListener("resize", handleResize);
+      chart.setOption(props.initialOption());
+      chartRef.current = chart;
 
-    return () => {
-      window.removeEventListener("resize", handleResize);
-      chart.dispose();
-    };
-  }, []);
+      const handleResize = () => {
+        chart?.resize();
+      };
+      window.addEventListener("resize", handleResize);
 
-  useEffect(() => {
-    chartRef.current.setOption(props.updatingOption);
-  }, [props.updatingOption]);
+      return () => {
+        window.removeEventListener("resize", handleResize);
+        chart?.dispose();
+      };
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [echartsModule]);
 
-  return <div ref={chartContainerRef} style={props.style} />;
+  useEffect(() => {
+    if (chartRef.current) {
+      chartRef.current.setOption(props.updatingOption);
+    }
+  }, [echartsModule, props.updatingOption]);
+
+  return echartsModule ? (
+    <div ref={chartContainerRef} style={props.style} />
+  ) : (
+    <Loading height={props.style?.height as string} />
+  );
 };
diff --git a/neetbox/frontend/src/components/loading.tsx b/neetbox/frontend/src/components/loading.tsx
@@ -0,0 +1,23 @@
+import { Spin } from "@douyinfe/semi-ui";
+
+export default function Loading({
+  width = "",
+  height = "100px",
+}: {
+  width?: string;
+  height?: string;
+}) {
+  return (
+    <div
+      style={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width,
+        height,
+      }}
+    >
+      <Spin size="large" />
+    </div>
+  );
+}
diff --git a/neetbox/frontend/src/pages/console/proejctDashboard.tsx b/neetbox/frontend/src/pages/console/proejctDashboard.tsx
@@ -7,8 +7,11 @@ import { ECharts } from "../../components/echarts";
 import { ProjectStatus, useProjectStatus } from "../../services/projects";
 import { Logs } from "../../components/dashboard/project/logs";
 import { Actions } from "../../components/dashboard/project/actions";
+import Loading from "../../components/loading";
 
-export const ProjectContext = createContext<{ projectName: string } | null>(null);
+export const ProjectContext = createContext<{ projectName: string } | null>(
+  null
+);
 
 export default function ProjectDashboardButRecreateOnRouteChange() {
   const { projectName } = useParams();
@@ -47,7 +50,7 @@ function ProjectDashboard() {
             <PlatformProps data={data.current.platform} />
           </>
         ) : (
-          "Loading..."
+          <Loading />
         )}
       </div>
     </ProjectContext.Provider>