usememos/memos
1
1
Fork 0
mirror of https://github.com/usememos/memos.git synced 2024-09-21 06:55:55 +08: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
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 36 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
web/src/App.tsx
View file

@ -1,9 +1,10 @@
import { CssVarsProvider } from "@mui/joy/styles";
import { useEffect } from "react";
import { useEffect, Suspense } from "react";
import { useTranslation } from "react-i18next";
import { RouterProvider } from "react-router-dom";
import { locationService } from "./services";
import { useAppSelector } from "./store";
import Loading from "./pages/Loading";
import router from "./router";
import * as storage from "./helpers/storage";
import theme from "./theme";
@ -43,7 +44,9 @@ function App() {
return (
<CssVarsProvider theme={theme}>
<RouterProvider router={router} />
<Suspense fallback={<Loading />}>
<RouterProvider router={router} />
</Suspense>
</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 { lazy } from "react";
import { isNullorUndefined } from "../helpers/utils";
import { globalService, userService } from "../services";
import Auth from "../pages/Auth";
import Explore from "../pages/Explore";
import Home from "../pages/Home";
import MemoDetail from "../pages/MemoDetail";
const Auth = lazy(() => import("../pages/Auth"));
const Explore = lazy(() => import("../pages/Explore"));
const Home = lazy(() => import("../pages/Home"));
const MemoDetail = lazy(() => import("../pages/MemoDetail"));
const router = createBrowserRouter([
{