From 3d0ce15fe85bd9f044b00f5f1b3ef44e3ea95ee2 Mon Sep 17 00:00:00 2001
From: lugnicca <lugnicca@gmail.com>
Date: Tue, 2 Sep 2025 18:19:12 +0200
Subject: [PATCH] fix: prevent stale provider model requests from polluting UI
 state

---
 web-app/src/containers/dialogs/AddModel.tsx | 1 +
 web-app/src/hooks/useProviderModels.ts      | 6 +++++-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/web-app/src/containers/dialogs/AddModel.tsx b/web-app/src/containers/dialogs/AddModel.tsx
index a633867f6..3ccdc6d65 100644
--- a/web-app/src/containers/dialogs/AddModel.tsx
+++ b/web-app/src/containers/dialogs/AddModel.tsx
@@ -95,6 +95,7 @@ export const DialogAddModel = ({ provider, trigger }: DialogAddModelProps) => {
             <span className="text-destructive">*</span>
           </label>
           <ModelCombobox
+            key={`${provider.provider}-${provider.base_url || ''}`}
             value={modelId}
             onChange={setModelId}
             models={models}
diff --git a/web-app/src/hooks/useProviderModels.ts b/web-app/src/hooks/useProviderModels.ts
index 7e5ee6650..ee5104133 100644
--- a/web-app/src/hooks/useProviderModels.ts
+++ b/web-app/src/hooks/useProviderModels.ts
@@ -16,6 +16,7 @@ export const useProviderModels = (provider?: ModelProvider): UseProviderModelsSt
   const [loading, setLoading] = useState(false)
   const [error, setError] = useState<string | null>(null)
   const prevProviderKey = useRef<string>('')
+  const requestIdRef = useRef(0)
 
   const fetchModels = useCallback(async () => {
     if (!provider || !provider.base_url) {
@@ -44,11 +45,13 @@ export const useProviderModels = (provider?: ModelProvider): UseProviderModelsSt
       return
     }
 
+    const currentRequestId = ++requestIdRef.current
     setLoading(true)
     setError(null)
 
     try {
       const fetchedModels = await fetchModelsFromProvider(provider)
+      if (currentRequestId !== requestIdRef.current) return
       const sortedModels = fetchedModels.sort((a, b) => a.localeCompare(b))
 
       setModels(sortedModels)
@@ -59,11 +62,12 @@ export const useProviderModels = (provider?: ModelProvider): UseProviderModelsSt
         timestamp: Date.now(),
       })
     } catch (err) {
+      if (currentRequestId !== requestIdRef.current) return
       const errorMessage = err instanceof Error ? err.message : 'Failed to fetch models'
       setError(errorMessage)
       console.error(`Error fetching models from ${provider.provider}:`, err)
     } finally {
-      setLoading(false)
+      if (currentRequestId === requestIdRef.current) setLoading(false)
     }
   }, [provider])