From b8f24af5aed3bb3cad4692f5a85b8fe37c432a7f Mon Sep 17 00:00:00 2001
From: Wence <almo.ce@gmail.com>
Date: Wed, 30 Nov 2022 06:13:22 +0800
Subject: [PATCH] feat: dynamic lazy loading route with simple loading page
 (#632)

* feat: dynamic loading route with simple loading page

* fix: lint fix

* Update web/src/less/loading.less

Co-authored-by: boojack <stevenlgtm@gmail.com>

Co-authored-by: boojack <stevenlgtm@gmail.com>
---
 web/src/App.tsx           |  7 +++++--
 web/src/less/loading.less | 11 +++++++++++
 web/src/pages/Loading.tsx | 14 ++++++++++++++
 web/src/router/index.tsx  | 10 ++++++----
 4 files changed, 36 insertions(+), 6 deletions(-)
 create mode 100644 web/src/less/loading.less
 create mode 100644 web/src/pages/Loading.tsx

diff --git a/web/src/App.tsx b/web/src/App.tsx
index 2fd8a98..699857f 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -1,9 +1,10 @@
 import { CssVarsProvider } from "@mui/joy/styles";
-import { useEffect } from "react";
+import { useEffect, Suspense } from "react";
 import { useTranslation } from "react-i18next";
 import { RouterProvider } from "react-router-dom";
 import { locationService } from "./services";
 import { useAppSelector } from "./store";
+import Loading from "./pages/Loading";
 import router from "./router";
 import * as storage from "./helpers/storage";
 import theme from "./theme";
@@ -43,7 +44,9 @@ function App() {
 
   return (
     <CssVarsProvider theme={theme}>
-      <RouterProvider router={router} />
+      <Suspense fallback={<Loading />}>
+        <RouterProvider router={router} />
+      </Suspense>
     </CssVarsProvider>
   );
 }
diff --git a/web/src/less/loading.less b/web/src/less/loading.less
new file mode 100644
index 0000000..f4702a0
--- /dev/null
+++ b/web/src/less/loading.less
@@ -0,0 +1,11 @@
+.page-wrapper.loading {
+  @apply flex flex-row justify-center items-center w-full h-screen bg-white dark:bg-zinc-900;
+
+  > .page-container {
+    @apply w-80 max-w-full h-full py-4 flex flex-col justify-center items-center;
+
+    >.loading-icon {
+      @apply animate-spin;
+    }
+  }
+}
diff --git a/web/src/pages/Loading.tsx b/web/src/pages/Loading.tsx
new file mode 100644
index 0000000..10b9bef
--- /dev/null
+++ b/web/src/pages/Loading.tsx
@@ -0,0 +1,14 @@
+import Icon from "../components/Icon";
+import "../less/loading.less";
+
+function Loading() {
+  return (
+    <div className="page-wrapper loading">
+      <div className="page-container">
+        <Icon.Loader className="loading-icon" />
+      </div>
+    </div>
+  );
+}
+
+export default Loading;
diff --git a/web/src/router/index.tsx b/web/src/router/index.tsx
index 682a97e..f239809 100644
--- a/web/src/router/index.tsx
+++ b/web/src/router/index.tsx
@@ -1,10 +1,12 @@
 import { createBrowserRouter, redirect } from "react-router-dom";
+import { lazy } from "react";
 import { isNullorUndefined } from "../helpers/utils";
 import { globalService, userService } from "../services";
-import Auth from "../pages/Auth";
-import Explore from "../pages/Explore";
-import Home from "../pages/Home";
-import MemoDetail from "../pages/MemoDetail";
+
+const Auth = lazy(() => import("../pages/Auth"));
+const Explore = lazy(() => import("../pages/Explore"));
+const Home = lazy(() => import("../pages/Home"));
+const MemoDetail = lazy(() => import("../pages/MemoDetail"));
 
 const router = createBrowserRouter([
   {