YourSelfHosted/memos
1
0
Fork 0
mirror of https://github.com/usememos/memos.git synced 2025-06-05 22:09:59 +02:00
Code Issues Packages Projects Releases Wiki Activity

chore: update suspense loading

Browse Source
This commit is contained in:
Steven
2023-12-22 19:27:09 +08:00
parent 17e905085f
commit 919f75af1a
3 changed files with 14 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
web/src/App.tsx
View File

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

6
web/src/layouts/Root.tsx
View File

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

23
web/src/pages/NotFound.tsx
View File

@ -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 NotFound = () => {
const t = useTranslate();
return ( 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>
</div> </section>
); );
}; };