refactor: split code with React.lazy

src/common/component/Loading.js

@@ -0,0 +1,59 @@
+// import { useState, useEffect } from "react";
+import styled, { keyframes } from "styled-components";
+import { Ring } from "@uiball/loaders";
+
+import Button from "./styled/Button";
+import useLogout from "../hook/useLogout";
+const DelayVisible = keyframes`
+from{
+opacity: 0;
+}
+to{
+opacity: 1;
+}
+`;
+const StyledWrapper = styled.div`
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+  align-items: center;
+  justify-content: center;
+  .loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .reload {
+    opacity: 0;
+    &.visible {
+      animation: ${DelayVisible} 1s forwards;
+      animation-delay: 30s;
+    }
+  }
+`;
+export default function Loading({ reload = false }) {
+  const { clearLocalData } = useLogout();
+  const handleReload = () => {
+    clearLocalData();
+    location.reload(true);
+  };
+  return (
+    <StyledWrapper>
+      <Ring
+        className="loading"
+        size={40}
+        lineWeight={5}
+        speed={2}
+        color="black"
+      />
+      <Button
+        className={`reload danger ${reload ? "visible" : ""}`}
+        onClick={handleReload}
+      >
+        Reload
+      </Button>
+    </StyledWrapper>
+  );
+}

src/routes/home/Loading.js

@@ -1,64 +0,0 @@
-import { useState, useEffect } from "react";
-import styled from "styled-components";
-import { Ring } from "@uiball/loaders";
-
-import Button from "../../common/component/styled/Button";
-import useLogout from "../../common/hook/useLogout";
-
-const StyledWrapper = styled.div`
-  width: 100vw;
-  height: 100vh;
-  display: flex;
-  flex-direction: column;
-  gap: 15px;
-  align-items: center;
-  justify-content: center;
-  .loading {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-  .reload {
-    visibility: hidden;
-    &.visible {
-      visibility: visible;
-    }
-  }
-`;
-export default function Loading() {
-  const [reloadVisible, setReloadVisible] = useState(false);
-  const { clearLocalData } = useLogout();
-  const handleReload = () => {
-    clearLocalData();
-    location.reload(true);
-  };
-  useEffect(() => {
-    const inter = setTimeout(() => {
-      setReloadVisible(true);
-    }, 30000);
-
-    return () => {
-      clearTimeout(inter);
-    };
-  }, []);
-
-  return (
-    <StyledWrapper>
-      <Ring
-        className="loading"
-        size={40}
-        lineWeight={5}
-        speed={2}
-        color="black"
-      />
-      {reloadVisible && (
-        <Button
-          className={`reload danger ${reloadVisible ? "visible" : ""}`}
-          onClick={handleReload}
-        >
-          Reload
-        </Button>
-      )}
-    </StyledWrapper>
-  );
-}

src/routes/home/index.js

@@ -5,7 +5,7 @@ import { useSelector } from "react-redux";
 import StyledWrapper from "./styled";
 import User from "./User";
 // import Tools from "./Tools";
-import Loading from "./Loading";
+import Loading from "../../common/component/Loading";
 import Menu from "./Menu";
 import usePreload from "./usePreload";
 import usePWABadge from "../../common/hook/usePWABadge";
@@ -38,7 +38,7 @@ export default function HomePage() {
   const { loading } = usePreload();
   // console.log("index loading", loading, ready);
   if (loading || !ready) {
-    return <Loading />;
+    return <Loading reload={true} />;
   }
   const isSettingPage = pathname.startsWith("/setting");
   if (isSettingPage) {

src/routes/index.js

@@ -1,34 +1,35 @@
-import { useEffect } from "react";
+import { Suspense, useEffect, lazy } from "react";
 import { Route, Routes, HashRouter } from "react-router-dom";
 import { Provider, useSelector } from "react-redux";
+import toast from "react-hot-toast";
 // import Welcome from './Welcome'
 import NotFoundPage from "./404";
-import OAuthPage from "./oauth";
-import LoginPage from "./login";
-import SendMagicLinkPage from "./sendMagicLink";
-import RegBasePage from "./reg";
-import RegPage from "./reg/Register";
-import RegWithUsernamePage from "./reg/RegWithUsername";
-import HomePage from "./home";
-import ChatPage from "./chat";
-import FavoritesPage from "./favs";
-import ContactsPage from "./contacts";
+const HomePage = lazy(() => import("./home"));
+const RegBasePage = lazy(() => import("./reg"));
+const RegWithUsernamePage = lazy(() => import("./reg/RegWithUsername"));
+const SendMagicLinkPage = lazy(() => import("./sendMagicLink"));
+const RegPage = lazy(() => import("./reg/Register"));
+const LoginPage = lazy(() => import("./login"));
+const OAuthPage = lazy(() => import("./oauth"));
+const ChatPage = lazy(() => import("./chat"));
+const ContactsPage = lazy(() => import("./contacts"));
+const FavoritesPage = lazy(() => import("./favs"));
+const OnboardingPage = lazy(() => import("./onboarding"));
+const InvitePage = lazy(() => import("./invite"));
+const SettingChannelPage = lazy(() => import("./settingChannel"));
+const SettingPage = lazy(() => import("./setting"));
+const ResourceManagement = lazy(() => import("./resources"));
 import RequireAuth from "../common/component/RequireAuth";
 import RequireNoAuth from "../common/component/RequireNoAuth";
 import Meta from "../common/component/Meta";
+import Loading from "../common/component/Loading";
 
 import store from "../app/store";
-import InvitePage from "./invite";
-import SettingPage from "./setting";
-import SettingChannelPage from "./settingChannel";
-import OnboardingPage from "./onboarding";
-import toast from "react-hot-toast";
-import ResourceManagement from "./resources";
 
 const PageRoutes = () => {
   const {
     ui: { online },
-  fileMessages
+    fileMessages,
   } = useSelector((store) => {
     return { ui: store.ui, fileMessages: store.fileMessage };
   });
@@ -44,6 +45,7 @@ const PageRoutes = () => {
 
   return (
     <HashRouter>
+      <Suspense fallback={<Loading />}>
         <Routes>
           <Route path="/oauth/:token" element={<OAuthPage />} />
           <Route
@@ -109,10 +111,14 @@ const PageRoutes = () => {
               <Route path=":user_id" element={<ContactsPage />} />
             </Route>
             <Route path="favs" element={<FavoritesPage />}></Route>
-     <Route path="files" element={<ResourceManagement fileMessages={fileMessages} />}></Route>
+            <Route
+              path="files"
+              element={<ResourceManagement fileMessages={fileMessages} />}
+            ></Route>
           </Route>
           <Route path="*" element={<NotFoundPage />} />
         </Routes>
+      </Suspense>
     </HashRouter>
   );
 };