From 81c63a4ed2e849b138c3c41f067c6bd7a13de2c4 Mon Sep 17 00:00:00 2001
From: qsliu <qsliu2017@outlook.com>
Date: Sun, 14 Jan 2024 17:28:09 +0800
Subject: [PATCH] use lazy & Suspense

---
 bun.lockb    | Bin 52795 -> 52795 bytes
 src/main.jsx |  25 ++++++++++++++++---------
 2 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/bun.lockb b/bun.lockb
index be5936ff13e98cd0ddc7caf379da10f9a45195cc..60671f18aab0b13c2ccebe433a053043760687dc 100755
GIT binary patch
delta 154
zcmV;L0A>HXoCCX@1CTBtKMdU|iEk-H5PHq2UU58P#;U++n;LCJzYX3z?vhsuu}-EG
z0RodTBrB632?(<&6)i469WZjZrgOu)tv(>m=WWxsYD=_CitOl{P(N(ALQt&r0$~cP
z9=`Y(W%^bpOs<RDfATrfW9qNS{~(U21Ph$xvz0@#M+X63H7+$SGqX;Mfh7Slld-cQ
Iv+=M>9p55Da{vGU

delta 146
zcmV;D0B!%foCCX@1CTBt(MsqpAX2>c2<sR48&H|w*LlJCqC)=UAwPVg@iPJsu}-EG
zle8T)vnUlUE<oF58%sDmmf?6(=55XhlsWeXGs`%(FmLJ7QBSz`?~_-vEu(LSiED#R
zz3Zjt9v-Sub;9UwM`T2luJuOwm20z=L$XH)0ssI200029PK$vhlc2pLv+}S>9qma(
A3;+NC

diff --git a/src/main.jsx b/src/main.jsx
index 1739915..9462b0c 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -1,25 +1,32 @@
 import { render } from "preact";
+import { lazy, Suspense } from "preact/compat";
 import { useState } from "preact/hooks";
-import CsvSplit from "./csv";
-import StringToUtf8CodePoint from "./utf";
 
-const layouts = new Map([
-  ["utf", (key) => <StringToUtf8CodePoint key={key} />],
-  ["csv", (key) => <CsvSplit key={key} />],
-]);
+const CsvSplit = lazy(() => import("./csv"));
+const StringToUtf8CodePoint = lazy(() => import("./utf"));
+
+const layouts = ["utf", "csv"];
 
 render(<App />, document.getElementById("app"));
 
 function App() {
-  const [layout, setLayout] = useState(layouts.keys().next()?.value);
+  const [layout, setLayout] = useState(layouts[0]);
   return (
     <>
       <select value={layout} onChange={(e) => setLayout(e.target.value)}>
-        {Array.from(layouts.keys()).map((key) => (
+        {layouts.map((key) => (
           <option value={key}>{key}</option>
         ))}
       </select>
-      {layouts.get(layout)(layout)}
+      <Suspense fallback={<div>Loading...</div>}>
+        {layout === "utf" ? (
+          <StringToUtf8CodePoint key="utf" />
+        ) : layout === "csv" ? (
+          <CsvSplit key="csv" />
+        ) : (
+          <div>Unknown</div>
+        )}
+      </Suspense>
     </>
   );
 }