chore: update suspense loading

web/src/App.tsx

@@ -1,11 +1,10 @@
 import { useColorScheme } from "@mui/joy";
-import { Suspense, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Outlet } from "react-router-dom";
 import storage from "./helpers/storage";
 import { getSystemColorScheme } from "./helpers/utils";
 import useNavigateTo from "./hooks/useNavigateTo";
-import Loading from "./pages/Loading";
 import { useGlobalStore } from "./store/module";
 import { useUserV1Store } from "./store/v1";
 
@@ -117,13 +116,7 @@ const App = () => {
     }
   }, [mode]);
 
-  return loading ? (
+  return loading ? null : <Outlet />;
-    <Loading />
-  ) : (
-    <Suspense fallback={<Loading />}>
-      <Outlet />
-    </Suspense>
-  );
 };
 
 export default App;

web/src/layouts/Root.tsx

@@ -1,6 +1,8 @@
+import { Suspense } from "react";
 import { Outlet } from "react-router-dom";
 import Navigation from "@/components/Navigation";
 import useResponsiveWidth from "@/hooks/useResponsiveWidth";
+import Loading from "@/pages/Loading";
 
 function Root() {
   const { sm } = useResponsiveWidth();
@@ -14,7 +16,9 @@ function Root() {
           </div>
         )}
         <main className="w-full h-auto flex-grow shrink flex flex-col justify-start items-center">
+          <Suspense fallback={<Loading />}>
             <Outlet />
+          </Suspense>
         </main>
       </div>
     </div>

web/src/pages/NotFound.tsx

@@ -1,23 +1,14 @@
-import { Button } from "@mui/joy";
+import MobileHeader from "@/components/MobileHeader";
-import { Link } from "react-router-dom";
-import Icon from "@/components/Icon";
-import { useTranslate } from "@/utils/i18n";
 
 const NotFound = () => {
-  const t = useTranslate();
-
   return (
-    <div className="w-full h-full overflow-y-auto overflow-x-hidden">
+    <section className="@container w-full max-w-5xl min-h-[100svh] flex flex-col justify-start items-center sm:pt-3 md:pt-6 pb-8">
-      <div className="w-full h-full flex flex-col justify-center items-center">
+      <MobileHeader />
-        <Icon.Meh strokeWidth={1} className="w-20 h-auto opacity-80 dark:text-gray-300" />
+      <div className="w-full px-4 grow flex flex-col justify-center items-center sm:px-6">
-        <p className="mt-4 text-5xl font-mono dark:text-gray-300">404</p>
+        <p className="font-medium">{"The page you are looking for can't be found."}</p>
-        <Link className="mt-4" to="/">
+        <p className="mt-4 text-[8rem] font-mono dark:text-gray-300">404</p>
-          <Button variant="outlined" startDecorator={<Icon.Home className="w-4 h-auto" />}>
-            {t("router.go-to-home")}
-          </Button>
-        </Link>
-      </div>
       </div>
+    </section>
   );
 };