From 51475c8062e53d4f731ce9e5f7e6c8ea9ce77cb9 Mon Sep 17 00:00:00 2001
From: Seefs <40468931+seefs001@users.noreply.github.com>
Date: Sat, 13 Jun 2026 00:10:26 +0800
Subject: [PATCH] fix: only fetch deployment settings on deployments page
 (#5466)

---
 web/default/src/features/models/index.tsx | 87 +++++++++++------------
 1 file changed, 40 insertions(+), 47 deletions(-)

diff --git a/web/default/src/features/models/index.tsx b/web/default/src/features/models/index.tsx
index 758deb76..ce4c6147 100644
--- a/web/default/src/features/models/index.tsx
+++ b/web/default/src/features/models/index.tsx
@@ -54,7 +54,6 @@ const SECTION_META: Record<ModelsSectionId, { titleKey: string }> = {
 function ModelsContent() {
   const { t } = useTranslation()
   const navigate = useNavigate()
-  const queryClient = useQueryClient()
   const { tabCategory, setTabCategory } = useModels()
   const params = route.useParams()
   const activeSection = (params.section ??
@@ -70,41 +69,6 @@ function ModelsContent() {
     }
   }, [activeSection, setTabCategory, tabCategory])
 
-  const {
-    loading: deploymentLoading,
-    loadingPhase,
-    isIoNetEnabled,
-    connectionLoading,
-    connectionOk,
-    connectionError,
-    testConnection,
-    refresh: refreshDeploymentSettings,
-  } = useModelDeploymentSettings()
-
-  // Ensure settings are fresh when switching to deployments section
-  useEffect(() => {
-    if (activeSection === 'deployments') {
-      refreshDeploymentSettings()
-    }
-  }, [activeSection, refreshDeploymentSettings])
-
-  // Prefetch deployments list while connection check is in progress
-  // This allows the data to be ready as soon as the guard passes
-  useEffect(() => {
-    if (
-      activeSection === 'deployments' &&
-      isIoNetEnabled &&
-      loadingPhase === 'connection'
-    ) {
-      const defaultParams = { p: 1, page_size: 10 }
-      queryClient.prefetchQuery({
-        queryKey: deploymentsQueryKeys.list(defaultParams),
-        queryFn: () => listDeployments(defaultParams),
-        staleTime: 30 * 1000, // 30 seconds
-      })
-    }
-  }, [activeSection, isIoNetEnabled, loadingPhase, queryClient])
-
   const handleSectionChange = useCallback(
     (section: string) => {
       void navigate({
@@ -146,17 +110,7 @@ function ModelsContent() {
               {activeSection === 'metadata' ? (
                 <ModelsTable />
               ) : (
-                <DeploymentAccessGuard
-                  loading={deploymentLoading}
-                  loadingPhase={loadingPhase}
-                  isEnabled={isIoNetEnabled}
-                  connectionLoading={connectionLoading}
-                  connectionOk={connectionOk}
-                  connectionError={connectionError}
-                  onRetry={testConnection}
-                >
-                  <DeploymentsTable />
-                </DeploymentAccessGuard>
+                <DeploymentsSection />
               )}
             </div>
           </div>
@@ -172,6 +126,45 @@ function ModelsContent() {
   )
 }
 
+function DeploymentsSection() {
+  const queryClient = useQueryClient()
+  const {
+    loading: deploymentLoading,
+    loadingPhase,
+    isIoNetEnabled,
+    connectionLoading,
+    connectionOk,
+    connectionError,
+    testConnection,
+  } = useModelDeploymentSettings()
+
+  // Prefetch deployments list while connection check is in progress.
+  useEffect(() => {
+    if (isIoNetEnabled && loadingPhase === 'connection') {
+      const defaultParams = { p: 1, page_size: 10 }
+      queryClient.prefetchQuery({
+        queryKey: deploymentsQueryKeys.list(defaultParams),
+        queryFn: () => listDeployments(defaultParams),
+        staleTime: 30 * 1000,
+      })
+    }
+  }, [isIoNetEnabled, loadingPhase, queryClient])
+
+  return (
+    <DeploymentAccessGuard
+      loading={deploymentLoading}
+      loadingPhase={loadingPhase}
+      isEnabled={isIoNetEnabled}
+      connectionLoading={connectionLoading}
+      connectionOk={connectionOk}
+      connectionError={connectionError}
+      onRetry={testConnection}
+    >
+      <DeploymentsTable />
+    </DeploymentAccessGuard>
+  )
+}
+
 export function Models() {
   return (
     <ModelsProvider>