use lazy & Suspense

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>
     </>
   );
 }