mirrors/TidGi-Desktop
1
Fork 0
mirror of https://github.com/tiddly-gittly/TidGi-Desktop.git synced 2026-01-22 20:41:39 -08:00
Code Issues Projects Releases Packages Wiki Activity

Add ContentLoading component and suspense fallback

Browse source
This commit is contained in:
linonetwo 2025-12-09 22:06:19 +08:00
parent d9ecf7c8f9
commit 0809995ae6
2 changed files with 33 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

21
src/pages/Main/ContentLoading.tsx Normal file
View file

@ -0,0 +1,21 @@
import { CircularProgress } from '@mui/material';
import { styled } from '@mui/material/styles';
const LoadingRoot = styled('div')`
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
background-color: ${({ theme }) => theme.palette.background.default};
`;
export function ContentLoading(): React.JSX.Element {
return (
<LoadingRoot>
<CircularProgress />
</LoadingRoot>
);
}

21
src/pages/Main/index.tsx
View file

@ -1,12 +1,13 @@
import { Helmet } from '@dr.pogodin/react-helmet';
import { styled } from '@mui/material/styles';
import { lazy } from 'react';
import { lazy, Suspense } from 'react';
import { useTranslation } from 'react-i18next';
import { Route, Switch } from 'wouter';
import { PageType } from '@/constants/pageTypes';
import { usePreferenceObservable } from '@services/preferences/hooks';
import { WindowNames } from '@services/windows/WindowProperties';
import { ContentLoading } from './ContentLoading';
import FindInPage from './FindInPage';
import { SideBar } from './Sidebar';
import { useInitialPage } from './useInitialPage';
@ -77,14 +78,16 @@ export default function Main(): React.JSX.Element {
{showSidebar && <SideBar />}
<ContentRoot $sidebar={showSidebar}>
<FindInPage />
<Switch>
<Route path={`/${PageType.wiki}/:id/`} component={WikiBackground} />
<Route path={`/${PageType.agent}`} component={subPages.Agent} />
<Route path={`/${PageType.guide}`} component={subPages.Guide} />
<Route path={`/${PageType.help}`} component={subPages.Help} />
<Route path='/' component={subPages.Guide} />
<Route component={subPages.Guide} />
</Switch>
<Suspense fallback={<ContentLoading />}>
<Switch>
<Route path={`/${PageType.wiki}/:id/`} component={WikiBackground} />
<Route path={`/${PageType.agent}`} component={subPages.Agent} />
<Route path={`/${PageType.guide}`} component={subPages.Guide} />
<Route path={`/${PageType.help}`} component={subPages.Help} />
<Route path='/' component={subPages.Guide} />
<Route component={subPages.Guide} />
</Switch>
</Suspense>
</ContentRoot>
</Root>
</OuterRoot>