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) => {
*
(null)
const prevProviderKey = useRef('')
+ 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])