⚡️ perf: improve auth page performance (lobehub#5287)

sadokx · Jan 4, 2025 · 932114e · 932114e
1 parent 3973249
commit 932114e
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 2 deletions.
diff --git a/src/app/(main)/profile/@category/default.tsx b/src/app/(main)/profile/@category/default.tsx
@@ -1,7 +1,15 @@
+import { Suspense } from 'react';
+
+import SkeletonLoading from '@/components/Loading/SkeletonLoading';
+
 import CategoryContent from './features/CategoryContent';
 
 const Category = () => {
-  return <CategoryContent />;
+  return (
+    <Suspense fallback={<SkeletonLoading paragraph={{ rows: 7 }} title={false} />}>
+      <CategoryContent />
+    </Suspense>
+  );
 };
 
 Category.displayName = 'SettingCategory';

diff --git a/src/app/(main)/profile/_layout/Desktop/SideBar.tsx b/src/app/(main)/profile/_layout/Desktop/SideBar.tsx
@@ -1,10 +1,12 @@
 'use client';
 
 import { createStyles } from 'antd-style';
+import { Suspense } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox, FlexboxProps } from 'react-layout-kit';
 
 import BrandWatermark from '@/components/BrandWatermark';
+import CircleLoading from '@/components/Loading/CircleLoading';
 import PanelTitle from '@/components/PanelTitle';
 
 const useStyles = createStyles(({ token, css }) => ({
@@ -33,7 +35,7 @@ const SidebarLayout = ({ children, className, title, desc, ...rest }: SidebarLay
       {...rest}
     >
       <PanelTitle desc={desc || t('header.desc')} title={title || t('header.title')} />
-      {children}
+      <Suspense fallback={<CircleLoading />}>{children}</Suspense>
       <BrandWatermark paddingInline={12} />
     </Flexbox>
   );