From 4d0a55957aac112790f29878ec85b2ee83c0df11 Mon Sep 17 00:00:00 2001
From: xiose <huyanlin@nuaa.edu.cn>
Date: Thu, 19 Mar 2026 19:01:28 +0800
Subject: [PATCH] feat(web): lazy-load profile review tabs

- useProfileReviewList now accepts enabled parameter
- Profile review tabs only fetch data when activated
---
 web/src/features/review/use-profile-review-list.ts | 3 ++-
 web/src/pages/dashboard/profile-review-table.tsx   | 9 +++++----
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/web/src/features/review/use-profile-review-list.ts b/web/src/features/review/use-profile-review-list.ts
index 9d19661d..448fd8e0 100644
--- a/web/src/features/review/use-profile-review-list.ts
+++ b/web/src/features/review/use-profile-review-list.ts
@@ -1,10 +1,11 @@
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { adminApi } from '@/api/client'
 
-export function useProfileReviewList(status: string, page = 0, size = 20) {
+export function useProfileReviewList(status: string, page = 0, size = 20, enabled = true) {
   return useQuery({
     queryKey: ['profile-reviews', status, page, size],
     queryFn: () => adminApi.getProfileReviews({ status, page, size }),
+    enabled,
   })
 }
 
diff --git a/web/src/pages/dashboard/profile-review-table.tsx b/web/src/pages/dashboard/profile-review-table.tsx
index 1937a3ee..fe03b49f 100644
--- a/web/src/pages/dashboard/profile-review-table.tsx
+++ b/web/src/pages/dashboard/profile-review-table.tsx
@@ -60,10 +60,11 @@ export function ProfileReviewTable() {
     APPROVED: 0,
     REJECTED: 0,
   })
+  const [activeStatus, setActiveStatus] = useState<ReviewStatus>('PENDING')
 
-  const pendingQuery = useProfileReviewList('PENDING', pages.PENDING, PAGE_SIZE)
-  const approvedQuery = useProfileReviewList('APPROVED', pages.APPROVED, PAGE_SIZE)
-  const rejectedQuery = useProfileReviewList('REJECTED', pages.REJECTED, PAGE_SIZE)
+  const pendingQuery = useProfileReviewList('PENDING', pages.PENDING, PAGE_SIZE, activeStatus === 'PENDING')
+  const approvedQuery = useProfileReviewList('APPROVED', pages.APPROVED, PAGE_SIZE, activeStatus === 'APPROVED')
+  const rejectedQuery = useProfileReviewList('REJECTED', pages.REJECTED, PAGE_SIZE, activeStatus === 'REJECTED')
 
   const approveMutation = useApproveProfileReview()
   const rejectMutation = useRejectProfileReview()
@@ -321,7 +322,7 @@ export function ProfileReviewTable() {
               {renderPendingSummaryCard(pendingCount)}
             </div>
 
-            <Tabs defaultValue="PENDING">
+            <Tabs value={activeStatus} onValueChange={(v) => setActiveStatus(v as ReviewStatus)}>
               <TabsList className="gap-4 rounded-xl border-b-0 bg-muted/70 p-1 shadow-none">
                 <TabsTrigger
                   value="PENDING"