From 72e4476accc0f5bc93f39508818e81d25f168238 Mon Sep 17 00:00:00 2001
From: Mohamed Boudra <boudra.moha@gmail.com>
Date: Sat, 18 Apr 2026 16:03:13 +0700
Subject: [PATCH] refactor(app): replace providers-snapshot invalidate with
 refetchIfStale

invalidate() flagged the query stale and kicked off a refetch unconditionally,
causing a loading flash every time the model selector opened. Expose
refetchIfStale() instead so callers only refetch when data is actually stale.
---
 .../app/src/components/agent-status-bar.tsx   |  7 +++----
 .../app/src/hooks/use-agent-form-state.ts     | 19 +++++++++----------
 .../app/src/hooks/use-agent-input-draft.ts    |  2 +-
 .../app/src/hooks/use-providers-snapshot.ts   |  8 ++++----
 4 files changed, 17 insertions(+), 19 deletions(-)

diff --git a/packages/app/src/components/agent-status-bar.tsx b/packages/app/src/components/agent-status-bar.tsx
index d7aa38dea..5f501ab8a 100644
--- a/packages/app/src/components/agent-status-bar.tsx
+++ b/packages/app/src/components/agent-status-bar.tsx
@@ -867,8 +867,7 @@ export const AgentStatusBar = memo(function AgentStatusBar({
   const {
     entries: snapshotEntries,
     isLoading: snapshotIsLoading,
-    isFetching: snapshotIsFetching,
-    invalidate: invalidateSnapshot,
+    refetchIfStale: refetchSnapshotIfStale,
   } = useProvidersSnapshot(serverId, agent?.cwd);
 
   const snapshotModels = useMemo(() => {
@@ -1034,8 +1033,8 @@ export const AgentStatusBar = memo(function AgentStatusBar({
           console.warn("[AgentStatusBar] setAgentFeature failed", error);
         });
       }}
-      isModelLoading={snapshotIsLoading || snapshotIsFetching}
-      onModelSelectorOpen={invalidateSnapshot}
+      isModelLoading={snapshotIsLoading}
+      onModelSelectorOpen={refetchSnapshotIfStale}
       onDropdownClose={onDropdownClose}
       disabled={!client}
     />
diff --git a/packages/app/src/hooks/use-agent-form-state.ts b/packages/app/src/hooks/use-agent-form-state.ts
index 9a82f4cab..959a2d0e8 100644
--- a/packages/app/src/hooks/use-agent-form-state.ts
+++ b/packages/app/src/hooks/use-agent-form-state.ts
@@ -91,7 +91,7 @@ export type UseAgentFormStateResult = {
   isModelLoading: boolean;
   modelError: string | null;
   refreshProviderModels: () => void;
-  invalidateProviderModels: () => void;
+  refetchProviderModelsIfStale: () => void;
   setProviderAndModelFromUser: (provider: AgentProvider, modelId: string) => void;
   workingDirIsEmpty: boolean;
   persistFormPreferences: () => Promise<void>;
@@ -360,10 +360,9 @@ export function useAgentFormState(options: UseAgentFormStateOptions = {}): UseAg
   const {
     entries: snapshotEntries,
     isLoading: snapshotIsLoading,
-    isFetching: snapshotIsFetching,
     error: snapshotError,
     refresh: refreshSnapshot,
-    invalidate: invalidateSnapshot,
+    refetchIfStale: refetchSnapshotIfStale,
   } = useProvidersSnapshot(formState.serverId, formState.workingDir);
 
   const allProviderEntries = useMemo(() => snapshotEntries ?? [], [snapshotEntries]);
@@ -413,7 +412,7 @@ export function useAgentFormState(options: UseAgentFormStateOptions = {}): UseAg
   const allProviderModels = snapshotAllProviderModels;
   const availableModels = snapshotSelectedProviderModels;
   const modeOptions = snapshotSelectedProviderModes;
-  const isAllModelsLoading = snapshotIsLoading || snapshotIsFetching;
+  const isAllModelsLoading = snapshotIsLoading;
 
   // Combine initialValues with initialServerId for resolution
   const combinedInitialValues = useMemo((): FormInitialValues | undefined => {
@@ -625,9 +624,9 @@ export function useAgentFormState(options: UseAgentFormStateOptions = {}): UseAg
     refreshSnapshot();
   }, [refreshSnapshot]);
 
-  const invalidateProviderModels = useCallback(() => {
-    invalidateSnapshot();
-  }, [invalidateSnapshot]);
+  const refetchProviderModelsIfStale = useCallback(() => {
+    refetchSnapshotIfStale();
+  }, [refetchSnapshotIfStale]);
 
   const persistFormPreferences = useCallback(async () => {
     const resolvedModel = resolveEffectiveModel(availableModels, formState.model);
@@ -662,7 +661,7 @@ export function useAgentFormState(options: UseAgentFormStateOptions = {}): UseAg
   const effectiveModel = resolveEffectiveModel(availableModels, formState.model);
   const resolvedModelId = effectiveModel?.id ?? formState.model;
   const availableThinkingOptions = effectiveModel?.thinkingOptions ?? [];
-  const isModelLoading = snapshotIsLoading || snapshotIsFetching;
+  const isModelLoading = snapshotIsLoading;
   const modelError = snapshotError;
 
   const workingDirIsEmpty = !formState.workingDir.trim();
@@ -695,7 +694,7 @@ export function useAgentFormState(options: UseAgentFormStateOptions = {}): UseAg
       isModelLoading,
       modelError,
       refreshProviderModels,
-      invalidateProviderModels,
+      refetchProviderModelsIfStale,
       setProviderAndModelFromUser,
       workingDirIsEmpty,
       persistFormPreferences,
@@ -727,7 +726,7 @@ export function useAgentFormState(options: UseAgentFormStateOptions = {}): UseAg
       isModelLoading,
       modelError,
       refreshProviderModels,
-      invalidateProviderModels,
+      refetchProviderModelsIfStale,
       setProviderAndModelFromUser,
       workingDirIsEmpty,
       persistFormPreferences,
diff --git a/packages/app/src/hooks/use-agent-input-draft.ts b/packages/app/src/hooks/use-agent-input-draft.ts
index e8f710315..b75d4cacf 100644
--- a/packages/app/src/hooks/use-agent-input-draft.ts
+++ b/packages/app/src/hooks/use-agent-input-draft.ts
@@ -167,7 +167,7 @@ function buildDraftStatusControls(input: {
     features,
     onSetFeature,
     onDropdownClose,
-    onModelSelectorOpen: formState.invalidateProviderModels,
+    onModelSelectorOpen: formState.refetchProviderModelsIfStale,
   };
 }
 
diff --git a/packages/app/src/hooks/use-providers-snapshot.ts b/packages/app/src/hooks/use-providers-snapshot.ts
index 4f0982507..8edfbd8c1 100644
--- a/packages/app/src/hooks/use-providers-snapshot.ts
+++ b/packages/app/src/hooks/use-providers-snapshot.ts
@@ -27,7 +27,7 @@ interface UseProvidersSnapshotResult {
   error: string | null;
   supportsSnapshot: boolean;
   refresh: (providers?: AgentProvider[]) => Promise<void>;
-  invalidate: () => void;
+  refetchIfStale: () => void;
 }
 
 export function useProvidersSnapshot(
@@ -99,8 +99,8 @@ export function useProvidersSnapshot(
     [refreshSnapshot],
   );
 
-  const invalidate = useCallback(() => {
-    void queryClient.invalidateQueries({ queryKey });
+  const refetchIfStale = useCallback(() => {
+    void queryClient.refetchQueries({ queryKey, type: "active", stale: true });
   }, [queryClient, queryKey]);
 
   return {
@@ -111,7 +111,7 @@ export function useProvidersSnapshot(
     error: snapshotQuery.error instanceof Error ? snapshotQuery.error.message : null,
     supportsSnapshot,
     refresh,
-    invalidate,
+    refetchIfStale,
   };
 }