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

feat: dynamic lazy loading route with simple loading page (#632)

Browse Source 
* feat: dynamic loading route with simple loading page

* fix: lint fix

* Update web/src/less/loading.less

Co-authored-by: boojack <stevenlgtm@gmail.com>

Co-authored-by: boojack <stevenlgtm@gmail.com>
This commit is contained in:
Wence
2022-11-30 06:13:22 +08:00
committed by GitHub
parent 6384f5af74
commit b8f24af5ae
4 changed files with 36 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
web/src/App.tsx
View File

@ -1,9 +1,10 @@
import { CssVarsProvider } from "@mui/joy/styles"; import { CssVarsProvider } from "@mui/joy/styles";
import { useEffect } from "react"; import { useEffect, Suspense } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { RouterProvider } from "react-router-dom"; import { RouterProvider } from "react-router-dom";
import { locationService } from "./services"; import { locationService } from "./services";
import { useAppSelector } from "./store"; import { useAppSelector } from "./store";
import Loading from "./pages/Loading";
import router from "./router"; import router from "./router";
import * as storage from "./helpers/storage"; import * as storage from "./helpers/storage";
import theme from "./theme"; import theme from "./theme";
@ -43,7 +44,9 @@ function App() {
return ( return (
<CssVarsProvider theme={theme}> <CssVarsProvider theme={theme}>
<Suspense fallback={<Loading />}>
<RouterProvider router={router} /> <RouterProvider router={router} />
</Suspense>
</CssVarsProvider> </CssVarsProvider>
); );
} }

11
web/src/less/loading.less Normal file
View File

@ -0,0 +1,11 @@
.page-wrapper.loading {
@apply flex flex-row justify-center items-center w-full h-screen bg-white dark:bg-zinc-900;
> .page-container {
@apply w-80 max-w-full h-full py-4 flex flex-col justify-center items-center;
>.loading-icon {
@apply animate-spin;
}
}
}

14
web/src/pages/Loading.tsx Normal file
View File

@ -0,0 +1,14 @@
import Icon from "../components/Icon";
import "../less/loading.less";
function Loading() {
return (
<div className="page-wrapper loading">
<div className="page-container">
<Icon.Loader className="loading-icon" />
</div>
</div>
);
}
export default Loading;

10
web/src/router/index.tsx
View File

@ -1,10 +1,12 @@
import { createBrowserRouter, redirect } from "react-router-dom"; import { createBrowserRouter, redirect } from "react-router-dom";
import { lazy } from "react";
import { isNullorUndefined } from "../helpers/utils"; import { isNullorUndefined } from "../helpers/utils";
import { globalService, userService } from "../services"; import { globalService, userService } from "../services";
import Auth from "../pages/Auth";
import Explore from "../pages/Explore"; const Auth = lazy(() => import("../pages/Auth"));
import Home from "../pages/Home"; const Explore = lazy(() => import("../pages/Explore"));
import MemoDetail from "../pages/MemoDetail"; const Home = lazy(() => import("../pages/Home"));
const MemoDetail = lazy(() => import("../pages/MemoDetail"));
const router = createBrowserRouter([ const router = createBrowserRouter([
{ {