u

src/components/SectionLayout.jsx

@@ -1,6 +1,7 @@
-import { useState, useRef, useEffect } from 'react';
+import { useState, useRef, useEffect, Suspense } from 'react';
 import { Outlet, useLocation } from 'react-router-dom';
 import Box from '@mui/material/Box';
+import CircularProgress from '@mui/material/CircularProgress';
 import Popover from '@mui/material/Popover';
 import MenuList from '@mui/material/MenuList';
 import MenuItem from '@mui/material/MenuItem';
@@ -198,7 +199,15 @@ export default function SectionLayout({ sectionPath }) {
       showTitle={!isArticleDetail}
       titleAction={titleAction}
     >
-      <Outlet />
+      <Suspense
+        fallback={
+          <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', py: 8 }}>
+            <CircularProgress />
+          </Box>
+        }
+      >
+        <Outlet />
+      </Suspense>
     </PageLayout>
   );
 }