dynamic imports

src/App.tsx

@@ -1,16 +1,11 @@
 import { Link, RouterProvider, createHashRouter } from "react-router-dom";
-import KanjiPane from "./panes/KanjiPane";
 import classNames from "classnames";
 import { ChakraProvider, Flex } from "@chakra-ui/react";
 import { createBrowserRouter } from "react-router-dom";
 import { Outlet, Route, createRoutesFromElements, matchPath, useLocation } from "react-router";
-import SrsPane from "./panes/SrsPane";
-import VocabPane from "./panes/VocabPane";
-import SettingsPane from "./panes/SettingsPane";
 import { StrictMode } from "react";
 
 import styles from "./App.module.scss";
-import SrsReviewPane from "./panes/SrsReviewPane";
 
 function Layout() {
   const location = useLocation();
@@ -18,7 +13,7 @@ function Layout() {
   return (
     <Flex className={styles.main} direction="column" alignSelf="start">
       <ul className={styles.header}>
-        {navLinks.map((navLink) => {
+        {navLinks.map((navLink: NavLink) => {
           const active = (
             navLink.subPaths ? navLink.subPaths : [{ key: navLink.key, path: navLink.path }]
           ).some((item) => matchPath({ path: item.path }, location.pathname));
@@ -54,7 +49,7 @@ export default function App() {
                   key={`route-${route.key}-${subRoute.key}`}
                   index={idx + idx2 == 0}
                   path={subRoute.path}
-                  element={subRoute.element ?? route.element}
+                  lazy={() => import(`./panes/${subRoute.element ?? route.element}.tsx`)}
                 />
               );
             });
@@ -64,7 +59,7 @@ export default function App() {
                 key={`route-${route.key}`}
                 index={idx == 0}
                 path={route.path}
-                element={route.element}
+                lazy={() => import(`./panes/${route.element}.tsx`)}
               />
             );
           }
@@ -82,26 +77,41 @@ export default function App() {
   );
 }
 
-const navLinks = [
+type NavLinkPath =
+  | {
+      path: string;
+      subPaths?: undefined;
+    }
+  | {
+      path?: undefined;
+      subPaths: { key: string; path: string; element?: string }[];
+    };
+type NavLink = {
+  key: string;
+  title: string;
+  element: string;
+} & NavLinkPath;
+
+const navLinks: NavLink[] = [
   // { key: "home", path: "/", title: "Home", element: <HomePane /> },
   {
     key: "srs",
     title: "SRS",
-    element: <SrsPane />,
+    element: "SrsPane",
     subPaths: [
       { key: "index", path: "/" },
-      { key: "review", path: "/srs/review", element: <SrsReviewPane /> },
+      { key: "review", path: "/srs/review", element: "SrsReviewPane" },
     ],
   },
   {
     key: "kanji",
     title: "Kanji",
-    element: <KanjiPane />,
+    element: "KanjiPane",
     subPaths: [
       { key: "index", path: "/kanji" },
       { key: "selected", path: "/kanji/:selectedKanji" },
     ],
   },
-  { key: "vocab", path: "/vocab", title: "Vocab", element: <VocabPane /> },
-  { key: "settings", path: "/settings", title: "Settings", element: <SettingsPane /> },
+  { key: "vocab", path: "/vocab", title: "Vocab", element: "VocabPane" },
+  { key: "settings", path: "/settings", title: "Settings", element: "SettingsPane" },
 ];

src/lib/ConfirmQuitModal.tsx

@@ -10,7 +10,12 @@ import {
 } from "@chakra-ui/react";
 import { Link } from "react-router-dom";
 
-export default function ConfirmQuitModal({ isOpen, onClose }) {
+export interface ConfirmQuitModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export default function ConfirmQuitModal({ isOpen, onClose }: ConfirmQuitModalProps) {
   return (
     <Modal isOpen={isOpen} onClose={onClose}>
       <ModalOverlay />

src/panes/KanjiPane.tsx

@@ -15,7 +15,7 @@ export interface GetKanjiResult {
   kanji: Kanji[];
 }
 
-export default function KanjiPane() {
+export function Component() {
   const { selectedKanji } = useParams();
   const { data: baseData, error, isLoading } = useSWR("get_kanji", invoke<GetKanjiResult>);
 
@@ -59,3 +59,5 @@ export default function KanjiPane() {
     </Flex>
   );
 }
+
+Component.displayName = "KanjiPane";

src/panes/SettingsPane.tsx

@@ -1,3 +1,5 @@
-export default function SettingsPane() {
+export function Component() {
   return <></>;
 }
+
+Component.displayName = "SettingsPane";

src/panes/SrsPane.tsx

@@ -1,7 +1,7 @@
 import DashboardReviewStats from "../components/DashboardReviewStats";
 import styles from "./SrsPane.module.scss";
 
-export default function SrsPane() {
+export function Component() {
   return (
     <main className={styles.main}>
       <DashboardReviewStats />
@@ -10,3 +10,5 @@ export default function SrsPane() {
     </main>
   );
 }
+
+Component.displayName = "SrsPane";

src/panes/SrsReviewPane.tsx

@@ -57,7 +57,7 @@ function Done() {
   );
 }
 
-export default function SrsReviewPane() {
+export function Component() {
   // null = has not started, (.length == 0) = finished
   const [reviewQueue, setReviewQueue] = useState<ReviewItem[] | null>(null);
   const [anyProgress, setAnyProgress] = useState(false);
@@ -178,3 +178,5 @@ export default function SrsReviewPane() {
     </main>
   );
 }
+
+Component.displayName = "SrsReviewPane";

src/panes/VocabPane.tsx

@@ -1,3 +1,5 @@
-export default function VocabPane() {
+export function Component() {
   return <></>;
 }
+
+Component.displayName = "VocabPane";