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 && }
-
-
-
-
-
-
-
-
+ }>
+
+
+
+
+
+
+
+
+