ui: lazy-load CodeBlock

yfzhe · Dec 1, 2024 · d062a44 · d062a44
1 parent 4d16e85
commit d062a44
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 19 deletions.
diff --git a/src/style.css b/src/style.css
@@ -5,6 +5,10 @@
   --color-gray-dark: #999;
 }
 
+html {
+  font-family: system-ui, sans-serif;
+}
+
 button {
   border: none;
   background-color: transparent;
@@ -34,7 +38,26 @@ button {
   text-decoration: none;
 }
 
+.main {
+  height: calc(100% - 80px);
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: 48px 1fr 1fr;
+}
+
+.main-loading {
+  grid-column: 1 / 3;
+  grid-row: 1 / 4;
+  font-size: 20px;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 .navbar {
+  grid-column: 1 / 3;
+  grid-row: 1 / 2;
   padding: 0 10px;
   display: flex;
   justify-content: space-between;
@@ -125,16 +148,9 @@ button {
   justify-content: space-between;
 }
 
-.main {
-  height: calc(100% - 80px - 48px);
-  display: grid;
-  grid-template-columns: 50% 50%;
-  grid-template-rows: 50% 50%;
-}
-
 .editors {
   grid-column: 1 / 2;
-  grid-row: 1 / 3;
+  grid-row: 2 / 4;
   display: flex;
   flex-direction: column;
   border-right: 1px solid var(--color-gray);
@@ -160,7 +176,7 @@ button {
 
 .preview {
   grid-column: 2 / 3;
-  grid-row: 1 / 2;
+  grid-row: 2 / 3;
   position: relative;
 }
 
@@ -184,7 +200,7 @@ button {
 
 .util-panel {
   grid-column: 2 / 3;
-  grid-row: 2 / 3;
+  grid-row: 3 / 4;
   display: flex;
   flex-direction: column;
   border-top: 1px solid var(--color-gray);

diff --git a/src/ui/App.tsx b/src/ui/App.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useRef } from "react";
+import { lazy, Suspense, useRef } from "react";
 import { useAtomValue, useSetAtom } from "jotai";
 
 import type { File } from "../types";
@@ -12,15 +12,17 @@ import {
   utilPanelTabAtom,
 } from "../state";
 
-import CodeBlock, { type CodeBlockRef } from "./CodeBlock";
+import { type CodeBlockRef } from "./CodeBlock";
 import Examples from "./Examples";
+import Features from "./Features";
 import Preview from "./Preview";
 import UtilPanel from "./UtilPanel";
 import "../style.css";
-import Features from "./Features";
 
 const GITHUB_REPO_URL = "https://github.com/yfzhe/webassembly-playground";
 
+const CodeBlock = lazy(() => import("./CodeBlock"));
+
 function App() {
   const files = useAtomValue(filesAtom);
   const features = useAtomValue(featuresAtom);
@@ -31,9 +33,9 @@ function App() {
 
   const codeBlocksRef = useRef(new Map<string, CodeBlockRef>());
 
-  const preview = useCallback(() => {
+  const preview = () => {
     setPreviewId((id) => id + 1);
-  }, [setPreviewId]);
+  };
 
   const run = async () => {
     const sw = navigator.serviceWorker.controller;
@@ -58,6 +60,10 @@ function App() {
     }
   };
 
+  const renderLoading = () => {
+    return <div className="main-loading">Loading...</div>;
+  };
+
   const renderNavBar = () => {
     return (
       <nav className="navbar">
@@ -104,11 +110,13 @@ function App() {
           GitHub
         </a>
       </header>
-      {renderNavBar()}
       <main className="main">
-        <div className="editors">{files.map(renderFileCodeBlock)}</div>
-        <Preview />
-        <UtilPanel />
+        <Suspense fallback={renderLoading()}>
+          {renderNavBar()}
+          <div className="editors">{files.map(renderFileCodeBlock)}</div>
+          <Preview />
+          <UtilPanel />
+        </Suspense>
       </main>
     </>
   );