From 0809995ae66dc547e6e25b772c76fae105dfd53a Mon Sep 17 00:00:00 2001
From: linonetwo <linonetwo012@gmail.com>
Date: Tue, 9 Dec 2025 22:06:19 +0800
Subject: [PATCH] Add ContentLoading component and suspense fallback

---
 src/pages/Main/ContentLoading.tsx | 21 +++++++++++++++++++++
 src/pages/Main/index.tsx          | 21 ++++++++++++---------
 2 files changed, 33 insertions(+), 9 deletions(-)
 create mode 100644 src/pages/Main/ContentLoading.tsx

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 (
+    <LoadingRoot>
+      <CircularProgress />
+    </LoadingRoot>
+  );
+}
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 && <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>