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

@@ -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}>
+      <Suspense fallback={<Loading />}>
         <RouterProvider router={router} />
+      </Suspense>
     </CssVarsProvider>
   );
 }

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;
+    }
+  }
+}

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;

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";
+const Auth = lazy(() => import("../pages/Auth"));
-import Home from "../pages/Home";
+const Explore = lazy(() => import("../pages/Explore"));
-import MemoDetail from "../pages/MemoDetail";
+const Home = lazy(() => import("../pages/Home"));
+const MemoDetail = lazy(() => import("../pages/MemoDetail"));
 
 const router = createBrowserRouter([
   {