Optimize lazy-loading

Author: nikeee

src/components/SplitEditor.tsx

@@ -1,13 +1,15 @@
 import type * as monaco from "monaco-editor";
-import { Component, createRef } from "react";
+import { Component, createRef, lazy, Suspense } from "react";
 import { ErrorBoundary } from "react-error-boundary";
+import { BarLoader } from "react-spinners";
 import SplitPane from "react-split-pane";
 
 import { getSplitConfig, saveSplitConfig } from "../config.js";
 import type { SupportedEngine, SupportedFormat } from "../rendering.js";
-import Editor from "./Editor.js";
 import type EditorPane from "./EditorPane.js";
-import GraphPane from "./GraphPane.js";
+
+const EditorLazy = lazy(() => import("./Editor.js"));
+const GraphPaneLazy = lazy(() => import("./GraphPane.js"));
 
 type ErrorList = monaco.editor.IMarkerData[];
 
@@ -30,6 +32,14 @@ type ErroredState = {
 	lastKnownGoodSrc?: string;
 };
 
+const loadingStyle = {
+	position: "absolute",
+	display: "flex",
+	inset: "0",
+	justifyContent: "center",
+	alignItems: "center",
+} as const;
+
 export default class SplitEditor extends Component<
 	SplitEditorProps,
 	SplitEditorState
@@ -94,19 +104,35 @@ export default class SplitEditor extends Component<
 				{...({} as any)}
 			>
 				<ErrorBoundary fallback="Could not load editor">
-					<Editor
-						initialValue={s.dotSrc}
-						onChangeValue={() => []}
-						onValueError={n => void n}
-					/>
+					<Suspense
+						fallback={
+							<div style={loadingStyle}>
+								<BarLoader />
+							</div>
+						}
+					>
+						<EditorLazy
+							initialValue={s.dotSrc}
+							onChangeValue={() => []}
+							onValueError={n => void n}
+						/>
+					</Suspense>
 				</ErrorBoundary>
 				<ErrorBoundary fallback="Could not load graph preview">
-					<GraphPane
-						hasErrors={!!(s.errors && s.errors.length > 0)}
-						dotSrc={dotSrc}
-						engine={p.engine}
-						format={p.format}
-					/>
+					<Suspense
+						fallback={
+							<div style={loadingStyle}>
+								<BarLoader />
+							</div>
+						}
+					>
+						<GraphPaneLazy
+							hasErrors={!!(s.errors && s.errors.length > 0)}
+							dotSrc={dotSrc}
+							engine={p.engine}
+							format={p.format}
+						/>
+					</Suspense>
 				</ErrorBoundary>
 			</SplitPane>
 		);

src/index.tsx

@@ -1,13 +1,13 @@
-import { Component, createRef, lazy, type RefObject, Suspense } from "react";
+import { Component, createRef, type RefObject } from "react";
 import { createRoot } from "react-dom/client";
 
 import "bootstrap";
 import "bootstrap/dist/css/bootstrap.min.css";
 
 import "./index.scss";
 
-import { BarLoader } from "react-spinners";
 import Navigation from "./components/Navigation.js";
+import SplitEditor from "./components/SplitEditor.js";
 import { getLastState, mergeStates, saveLastEngine } from "./config.js";
 import { FileSaver } from "./FileSaver.js";
 import { exportAs, type SupportedEngine, saveSource } from "./rendering.js";
@@ -19,8 +19,6 @@ import {
 	supportedEngines,
 } from "./viz";
 
-const LazySplitEditor = lazy(() => import("./components/SplitEditor"));
-
 const defaultEngine = supportedEngines[1];
 
 interface AppState {
@@ -32,12 +30,6 @@ interface AppProps {
 }
 
 const defaultSource = tutorial;
-const loadingStyle = {
-	position: "fixed",
-	top: "50%",
-	left: "50%",
-	transform: "translate(-50%, -50%)",
-} as const;
 
 class App extends Component<AppProps, AppState> {
 	#currentSource: string | undefined = undefined;
@@ -113,21 +105,13 @@ class App extends Component<AppProps, AppState> {
 					loadSample={this.#loadSample}
 					share={this.#share}
 				/>
-				<Suspense
-					fallback={
-						<div style={loadingStyle}>
-							<BarLoader />
-						</div>
-					}
-				>
-					<LazySplitEditor
-						ref={this.#editorRef}
-						initialSource={initialSource}
-						format="svg"
-						engine={s.engine}
-						onSourceChange={this.#sourceChanged}
-					/>
-				</Suspense>
+				<SplitEditor
+					ref={this.#editorRef}
+					initialSource={initialSource}
+					format="svg"
+					engine={s.engine}
+					onSourceChange={this.#sourceChanged}
+				/>
 			</div>
 		);
 	}