From c5274444c06f6832300bc594eb9e971a6993c851 Mon Sep 17 00:00:00 2001
From: p-sw <shinwoo.park@psw.kr>
Date: Sat, 3 Aug 2024 23:42:31 +0900
Subject: [PATCH] refactor: make all docs lazy imported

---
 src/App.tsx | 84 +++++++++++++++++++++++++++++++++--------------------
 1 file changed, 52 insertions(+), 32 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 3bfd1ed..bef2c54 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -9,19 +9,8 @@ import {
 import DocsLayout from "./DocsLayout";
 import DynamicLayout from "./DynamicLayout";
 import ErrorBoundary from "./ErrorHandler";
-import Home from "./Home";
 import MainLayout from "./MainLayout";
 
-import DocsConfiguration, {
-  tableOfContents as docsConfigurationToc,
-} from "./docs/configuration.mdx";
-import DocsInstallation, {
-  tableOfContents as docsInstallationToc,
-} from "./docs/installation.mdx";
-import DocsIntroduction, {
-  tableOfContents as docsIntroductionToc,
-} from "./docs/introduction.mdx";
-
 import { Tooltip, TooltipContent } from "@pswui/Tooltip";
 import React, {
   type ForwardedRef,
@@ -225,12 +214,20 @@ const router = createBrowserRouter(
     >
       <Route
         index
-        loader={() =>
-          REDIRECTED_404.test(window.location.search)
-            ? redirect(REDIRECTED_404.exec(window.location.search)?.[1] ?? "/")
-            : true
-        }
-        element={<Home />}
+        lazy={async () => {
+          const { default: Component } = await import("./Home");
+
+          return {
+            Component,
+            loader() {
+              return REDIRECTED_404.test(window.location.search)
+                ? redirect(
+                    REDIRECTED_404.exec(window.location.search)?.[1] ?? "/",
+                  )
+                : true;
+            },
+          };
+        }}
       />
       <Route
         path="docs"
@@ -242,27 +239,50 @@ const router = createBrowserRouter(
         />
         <Route
           path="introduction"
-          element={
-            <DynamicLayout toc={docsIntroductionToc}>
-              <DocsIntroduction components={overrideComponents} />
-            </DynamicLayout>
-          }
+          lazy={async () => {
+            const { default: DocsIntroduction, tableOfContents } = await import(
+              "./docs/introduction.mdx"
+            );
+
+            return {
+              Component: () => (
+                <DynamicLayout toc={tableOfContents}>
+                  <DocsIntroduction components={overrideComponents} />
+                </DynamicLayout>
+              ),
+            };
+          }}
         />
         <Route
           path="installation"
-          element={
-            <DynamicLayout toc={docsInstallationToc}>
-              <DocsInstallation components={overrideComponents} />
-            </DynamicLayout>
-          }
+          lazy={async () => {
+            const { default: DocsInstallation, tableOfContents } = await import(
+              "./docs/installation.mdx"
+            );
+
+            return {
+              Component: () => (
+                <DynamicLayout toc={tableOfContents}>
+                  <DocsInstallation components={overrideComponents} />
+                </DynamicLayout>
+              ),
+            };
+          }}
         />
         <Route
           path="configuration"
-          element={
-            <DynamicLayout toc={docsConfigurationToc}>
-              <DocsConfiguration components={overrideComponents} />
-            </DynamicLayout>
-          }
+          lazy={async () => {
+            const { default: DocsConfiguration, tableOfContents } =
+              await import("./docs/configuration.mdx");
+
+            return {
+              Component: () => (
+                <DynamicLayout toc={tableOfContents}>
+                  <DocsConfiguration components={overrideComponents} />
+                </DynamicLayout>
+              ),
+            };
+          }}
         />
         <Route path="components">
           <Route