From 932114ebc97df465d8a6d6b0226e9307cc93cda2 Mon Sep 17 00:00:00 2001
From: Arvin Xu <arvinx@foxmail.com>
Date: Sat, 4 Jan 2025 20:20:49 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20perf:=20improve=20auth=20p?=
 =?UTF-8?q?age=20performance=20(#5287)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/(main)/profile/@category/default.tsx       | 10 +++++++++-
 src/app/(main)/profile/_layout/Desktop/SideBar.tsx |  4 +++-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/app/(main)/profile/@category/default.tsx b/src/app/(main)/profile/@category/default.tsx
index 8765afe01ffc..6177d698b504 100644
--- 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
index 5e5eebf200c5..673ae17db77f 100644
--- 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>
   );