Lazy Load a Few Things

tone-row · Jul 13, 2023 · 5ccf7e3 · 5ccf7e3
1 parent 986113c
commit 5ccf7e3
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 9 deletions.
diff --git a/app/src/components/Graph.tsx b/app/src/components/Graph.tsx
@@ -2,7 +2,6 @@ import { Core, EdgeSingular, NodeSingular } from "cytoscape";
 import coseBilkent from "cytoscape-cose-bilkent";
 import dagre from "cytoscape-dagre";
 import klay from "cytoscape-klay";
-import cytoscapeSvg from "cytoscape-svg";
 import { ParseError } from "graph-selector";
 import throttle from "lodash.throttle";
 import React, {
@@ -48,7 +47,6 @@ if (!cytoscape.prototype.hasInitialised) {
   cytoscape.use(dagre);
   cytoscape.use(klay);
   cytoscape.use(coseBilkent);
-  cytoscape.use(cytoscapeSvg);
   cytoscape.prototype.hasInitialised = true;
 }
 

diff --git a/app/src/components/ImportDataUnauthenticatedDialog.tsx b/app/src/components/ImportDataUnauthenticatedDialog.tsx
@@ -10,8 +10,15 @@ import { Button2 } from "../ui/Shared";
 
 export function ImportDataUnauthenticatedDialog() {
   useEffect(() => {
-    // preload /images/import-data.png
-    new Image().src = "/images/import-data.png";
+    // check if requestIdleCallback is supported
+    if ("requestIdleCallback" in window) {
+      requestIdleCallback(() => {
+        // preload /images/import-data.png when the network is idle
+        new Image().src = "/images/import-data.png";
+      });
+    } else {
+      // don't preload image
+    }
   }, []);
   const { push } = useHistory();
   return (

diff --git a/app/src/components/Tabs/EditStyleTab.tsx b/app/src/components/Tabs/EditStyleTab.tsx
@@ -14,7 +14,7 @@ import { useUnmountStore } from "../../lib/useUnmountStore";
 import { Button2, IconButton2, popoverContentProps } from "../../ui/Shared";
 import { ThemePicker } from "../ThemePicker";
 
-export function EditStyleTab() {
+export default function EditStyleTab() {
   const meta = useDoc((s) => s.meta);
   const [style, setStyle] = useState<string>(
     (meta.cytoscapeStyle as string) ?? ""

diff --git a/app/src/components/downloads.ts b/app/src/components/downloads.ts
@@ -2,6 +2,7 @@ import { Core } from "cytoscape";
 import { saveAs } from "file-saver";
 
 import { UNAUTH_IMG_SCALE } from "../lib/constants";
+import { cytoscape } from "../lib/cytoscape";
 import { getBackgroundColor } from "../lib/graphThemes";
 
 // padding, gets divided in half
@@ -13,6 +14,13 @@ const PADDING = 60;
 export async function getSvg({ cy }: { cy: Core }) {
   const bg = getBackgroundColor();
 
+  // check if cy has loaded the svg plugin
+  // @ts-ignore
+  if (!cy.svg) {
+    const cytoscapeSvg = await import("cytoscape-svg");
+    cytoscape.use(cytoscapeSvg.default);
+  }
+
   try {
     // @ts-ignore
     const svgStr = cy.svg({

diff --git a/app/src/pages/Edit.tsx b/app/src/pages/Edit.tsx
@@ -1,6 +1,6 @@
 import * as Tabs from "@radix-ui/react-tabs";
 import throttle from "lodash.throttle";
-import { memo, useCallback, useEffect, useMemo, useState } from "react";
+import { lazy, memo, useCallback, useEffect, useMemo, useState } from "react";
 import { useParams, useRouteMatch } from "react-router-dom";
 
 import { ClearTextButton } from "../components/ClearTextButton";
@@ -12,7 +12,8 @@ import Main from "../components/Main";
 import { EditLayoutTab } from "../components/Tabs/EditLayoutTab";
 import { EditMetaTab } from "../components/Tabs/EditMetaTab";
 import { EditorTabList } from "../components/Tabs/EditorTabList";
-import { EditStyleTab } from "../components/Tabs/EditStyleTab";
+const EditStyleTab = lazy(() => import("../components/Tabs/EditStyleTab"));
+
 import { TextEditor } from "../components/TextEditor";
 import { getDefaultChart } from "../lib/getDefaultChart";
 import { titleToLocalStorageKey } from "../lib/helpers";

diff --git a/app/src/pages/EditHosted.tsx b/app/src/pages/EditHosted.tsx
@@ -1,6 +1,6 @@
 import * as Tabs from "@radix-ui/react-tabs";
 import { Check, DotsThree } from "phosphor-react";
-import { useCallback, useEffect } from "react";
+import { lazy, useCallback, useEffect } from "react";
 import { useMutation, useQuery } from "react-query";
 import { useParams, useRouteMatch } from "react-router-dom";
 import { useDebouncedCallback } from "use-debounce";
@@ -15,7 +15,7 @@ import Spinner from "../components/Spinner";
 import { EditLayoutTab } from "../components/Tabs/EditLayoutTab";
 import { EditMetaTab } from "../components/Tabs/EditMetaTab";
 import { EditorTabList } from "../components/Tabs/EditorTabList";
-import { EditStyleTab } from "../components/Tabs/EditStyleTab";
+const EditStyleTab = lazy(() => import("../components/Tabs/EditStyleTab"));
 import { TextEditor } from "../components/TextEditor";
 import { useIsValidSponsor } from "../lib/hooks";
 import { prepareChart } from "../lib/prepareChart/prepareChart";