diff --git a/web/containers/Providers/DataLoader.tsx b/web/containers/Providers/DataLoader.tsx
index 8faa87865..ed4c07ec3 100644
--- a/web/containers/Providers/DataLoader.tsx
+++ b/web/containers/Providers/DataLoader.tsx
@@ -38,9 +38,7 @@ const DataLoader: React.FC<Props> = ({ children }) => {
   const { loadDataModel, isUpdated } = useModels()
   useEffect(() => {
     // Listen for model updates
-    if (isUpdated) {
-      loadDataModel()
-    }
+    loadDataModel()
   }, [isUpdated, loadDataModel])
 
   useEffect(() => {
diff --git a/web/hooks/useModels.ts b/web/hooks/useModels.ts
index 684ac2729..0aed91ed2 100644
--- a/web/hooks/useModels.ts
+++ b/web/hooks/useModels.ts
@@ -1,4 +1,4 @@
-import { useCallback, useEffect } from 'react'
+import { useCallback, useEffect, useRef } from 'react'
 
 import {
   ExtensionTypeEnum,
@@ -29,10 +29,15 @@ import {
 const useModels = () => {
   const setDownloadedModels = useSetAtom(downloadedModelsAtom)
   const setExtensionModels = useSetAtom(configuredModelsAtom)
+  const hasFetchedDownloadedModels = useRef(false) // Track whether the function has been executed
+
   let isUpdated = false
 
   const getData = useCallback(() => {
+    if (hasFetchedDownloadedModels.current) return
+
     const getDownloadedModels = async () => {
+      hasFetchedDownloadedModels.current = true
       const localModels = (await getModels()).map((e) => ({
         ...e,
         name: ModelManager.instance().models.get(e.id)?.name ?? e.id,
@@ -72,7 +77,7 @@ const useModels = () => {
     // Fetch all data
     getExtensionModels()
     getDownloadedModels()
-  }, [setDownloadedModels, setExtensionModels])
+  }, [])
 
   const reloadData = useDebouncedCallback(() => getData(), 300)
 
@@ -91,7 +96,7 @@ const useModels = () => {
         events.off(ModelEvent.OnModelsUpdate, async () => {})
       }
     }
-  }, [getData, isUpdated, reloadData])
+  }, [isUpdated, reloadData])
 
   return {
     loadDataModel: getData,