fix: only fetch deployment settings on deployments page (#5466)

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>