refactor: loading for suspend

src/common/component/Loading.js

@@ -13,13 +13,17 @@ opacity: 1;
 }
 `;
 const StyledWrapper = styled.div`
-  width: 100vw;
-  height: 100vh;
+  width: 100%;
+  height: 100%;
   display: flex;
   flex-direction: column;
   gap: 15px;
   align-items: center;
   justify-content: center;
+  &.fullscreen {
+    width: 100vw;
+    height: 100vh;
+  }
   .loading {
     display: flex;
     align-items: center;
@@ -33,14 +37,14 @@ const StyledWrapper = styled.div`
     }
   }
 `;
-export default function Loading({ reload = false }) {
+export default function Loading({ reload = false, fullscreen = false }) {
   const { clearLocalData } = useLogout();
   const handleReload = () => {
     clearLocalData();
     location.reload(true);
   };
   return (
-    <StyledWrapper>
+    <StyledWrapper className={fullscreen ? "fullscreen" : ""}>
       <Ring
         className="loading"
         size={40}

src/routes/home/index.js

@@ -38,7 +38,7 @@ export default function HomePage() {
   const { loading } = usePreload();
   // console.log("index loading", loading, ready);
   if (loading || !ready) {
-    return <Loading reload={true} />;
+    return <Loading reload={true} fullscreen={true} />;
   }
   const isSettingPage = pathname.startsWith("/setting");
   if (isSettingPage) {

src/routes/index.js

@@ -45,7 +45,7 @@ const PageRoutes = () => {
 
   return (
     <HashRouter>
-      <Suspense fallback={<Loading />}>
+      <Suspense fallback={<Loading fullscreen={true} />}>
         <Routes>
           <Route path="/oauth/:token" element={<OAuthPage />} />
           <Route
@@ -97,23 +97,76 @@ const PageRoutes = () => {
             }
           >
             <Route path="setting">
-              <Route index element={<SettingPage />} />
+              <Route
+                index
+                element={
+                  <Suspense fallback={<Loading />}>
+                    <SettingPage />
+                  </Suspense>
+                }
+              />
               <Route path="channel/:cid" element={<SettingChannelPage />} />
             </Route>
-            <Route index element={<ChatPage />} />
+            <Route
+              index
+              element={
+                <Suspense fallback={<Loading />}>
+                  <ChatPage />
+                </Suspense>
+              }
+            />
             <Route path="chat">
               <Route index element={<ChatPage />} />
-              <Route path="channel/:channel_id" element={<ChatPage />} />
-              <Route path="dm/:user_id" element={<ChatPage />} />
+              <Route
+                path="channel/:channel_id"
+                element={
+                  <Suspense fallback={<Loading />}>
+                    <ChatPage />
+                  </Suspense>
+                }
+              />
+              <Route
+                path="dm/:user_id"
+                element={
+                  <Suspense fallback={<Loading />}>
+                    <ChatPage />
+                  </Suspense>
+                }
+              />
             </Route>
             <Route path="contacts">
-              <Route index element={<ContactsPage />} />
-              <Route path=":user_id" element={<ContactsPage />} />
+              <Route
+                index
+                element={
+                  <Suspense fallback={<Loading />}>
+                    <ContactsPage />
+                  </Suspense>
+                }
+              />
+              <Route
+                path=":user_id"
+                element={
+                  <Suspense fallback={<Loading />}>
+                    <ContactsPage />
+                  </Suspense>
+                }
+              />
             </Route>
-            <Route path="favs" element={<FavoritesPage />}></Route>
+            <Route
+              path="favs"
+              element={
+                <Suspense fallback={<Loading />}>
+                  <FavoritesPage />
+                </Suspense>
+              }
+            ></Route>
             <Route
               path="files"
-              element={<ResourceManagement fileMessages={fileMessages} />}
+              element={
+                <Suspense fallback={<Loading />}>
+                  <ResourceManagement fileMessages={fileMessages} />
+                </Suspense>
+              }
             ></Route>
           </Route>
           <Route path="*" element={<NotFoundPage />} />