chore: avoid unnecessary loading for the model selector in agent node

web/app/components/header/account-setting/model-provider-page/model-parameter-modal/agent-model-trigger.tsx

@@ -67,42 +67,71 @@ const AgentModelTrigger: FC<AgentModelTriggerProps> = ({
     }
   }, [modelProviders, providerName])
   const [pluginInfo, setPluginInfo] = useState<PluginInfoFromMarketPlace | null>(null)
-  const [isPluginChecked, setIsPluginChecked] = useState(false)
+  const [isPluginChecked, setIsPluginChecked] = useState(!!modelProvider)
   const [installed, setInstalled] = useState(false)
   const [inModelList, setInModelList] = useState(false)
   const invalidateInstalledPluginList = useInvalidateInstalledPluginList()
   const handleOpenModal = useModelModalHandler()
-  useEffect(() => {
+  const checkPluginInfo = useMemo(async () => {
-    (async () => {
+    if (!providerName || !modelId)
-      if (modelId && currentProvider) {
+      return null
+
+    const parts = providerName.split('/')
     try {
-          const modelsData = await fetchModelProviderModelList(`/workspaces/current/model-providers/${currentProvider?.provider}/models`)
+      const pluginInfo = await fetchPluginInfoFromMarketPlace({
-          if (modelId && modelsData.data.find(item => item.model === modelId))
+        org: parts[0],
-            setInModelList(true)
+        name: parts[1],
+      })
+      if (pluginInfo.data.plugin.category === PluginType.model)
+        return pluginInfo.data.plugin
     }
     catch (error) {
       // pass
     }
-      }
+    return null
-      if (providerName) {
+  }, [providerName, modelId])
-        const parts = providerName.split('/')
+
-        const org = parts[0]
+  const checkModelList = useMemo(async () => {
-        const name = parts[1]
+    if (!modelId || !currentProvider)
+      return false
+
     try {
-          const pluginInfo = await fetchPluginInfoFromMarketPlace({ org, name })
+      const modelsData = await fetchModelProviderModelList(
-          if (pluginInfo.data.plugin.category === PluginType.model)
+        `/workspaces/current/model-providers/${currentProvider?.provider}/models`,
-            setPluginInfo(pluginInfo.data.plugin)
+      )
+      return !!modelsData.data.find(item => item.model === modelId)
     }
     catch (error) {
       // pass
     }
+    return false
+  }, [modelId, currentProvider])
+
+  useEffect(() => {
+    let isSubscribed = true
+
+    const initializeChecks = async () => {
+      if (!isPluginChecked) {
+        const [pluginResult, modelListResult] = await Promise.all([
+          checkPluginInfo,
+          checkModelList,
+        ])
+
+        if (isSubscribed) {
+          if (pluginResult)
+            setPluginInfo(pluginResult)
+          setInModelList(modelListResult)
           setIsPluginChecked(true)
         }
-      else {
-        setIsPluginChecked(true)
       }
-    })()
+    }
-  }, [providerName, modelId, currentProvider])
+
+    initializeChecks()
+
+    return () => {
+      isSubscribed = false
+    }
+  }, [checkPluginInfo, checkModelList, isPluginChecked, modelId, currentProvider])
 
   if (modelId && !isPluginChecked)
     return <Loading />