diff --git a/src/pages/Main/ContentLoading.tsx b/src/pages/Main/ContentLoading.tsx new file mode 100644 index 00000000..b36d806c --- /dev/null +++ b/src/pages/Main/ContentLoading.tsx @@ -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 ( + + + + ); +} diff --git a/src/pages/Main/index.tsx b/src/pages/Main/index.tsx index d0a0c1e3..b862c27f 100644 --- a/src/pages/Main/index.tsx +++ b/src/pages/Main/index.tsx @@ -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 && } - - - - - - - - + }> + + + + + + + + +