From 919f75af1ad6ebacff50ddf66d464ad2ecd2da7c Mon Sep 17 00:00:00 2001
From: Steven <stevenlgtm@gmail.com>
Date: Fri, 22 Dec 2023 19:27:09 +0800
Subject: [PATCH] chore: update suspense loading

---
 web/src/App.tsx            | 11 ++---------
 web/src/layouts/Root.tsx   |  6 +++++-
 web/src/pages/NotFound.tsx | 23 +++++++----------------
 3 files changed, 14 insertions(+), 26 deletions(-)

diff --git a/web/src/App.tsx b/web/src/App.tsx
index ac216f47..3e20e0fc 100644
--- a/web/src/App.tsx
+++ b/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 ? (
-    <Loading />
-  ) : (
-    <Suspense fallback={<Loading />}>
-      <Outlet />
-    </Suspense>
-  );
+  return loading ? null : <Outlet />;
 };
 
 export default App;
diff --git a/web/src/layouts/Root.tsx b/web/src/layouts/Root.tsx
index 50aa9555..1e59cdf5 100644
--- a/web/src/layouts/Root.tsx
+++ b/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">
-          <Outlet />
+          <Suspense fallback={<Loading />}>
+            <Outlet />
+          </Suspense>
         </main>
       </div>
     </div>
diff --git a/web/src/pages/NotFound.tsx b/web/src/pages/NotFound.tsx
index 762b8a45..0fac1e20 100644
--- a/web/src/pages/NotFound.tsx
+++ b/web/src/pages/NotFound.tsx
@@ -1,23 +1,14 @@
-import { Button } from "@mui/joy";
-import { Link } from "react-router-dom";
-import Icon from "@/components/Icon";
-import { useTranslate } from "@/utils/i18n";
+import MobileHeader from "@/components/MobileHeader";
 
 const NotFound = () => {
-  const t = useTranslate();
-
   return (
-    <div className="w-full h-full overflow-y-auto overflow-x-hidden">
-      <div className="w-full h-full flex flex-col justify-center items-center">
-        <Icon.Meh strokeWidth={1} className="w-20 h-auto opacity-80 dark:text-gray-300" />
-        <p className="mt-4 text-5xl font-mono dark:text-gray-300">404</p>
-        <Link className="mt-4" to="/">
-          <Button variant="outlined" startDecorator={<Icon.Home className="w-4 h-auto" />}>
-            {t("router.go-to-home")}
-          </Button>
-        </Link>
+    <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">
+      <MobileHeader />
+      <div className="w-full px-4 grow flex flex-col justify-center items-center sm:px-6">
+        <p className="font-medium">{"The page you are looking for can't be found."}</p>
+        <p className="mt-4 text-[8rem] font-mono dark:text-gray-300">404</p>
       </div>
-    </div>
+    </section>
   );
 };