fix: loader when importing

web-app/src/routes/settings/providers/$providerName.tsx

@@ -83,6 +83,7 @@ function ProviderDetail() {
   const [refreshingModels, setRefreshingModels] = useState(false)
   const [isCheckingBackendUpdate, setIsCheckingBackendUpdate] = useState(false)
   const [isInstallingBackend, setIsInstallingBackend] = useState(false)
+  const [importingModel, setImportingModel] = useState<string | null>(null)
   const { checkForUpdate: checkForBackendUpdate, installBackend } =
     useBackendUpdater()
   const { providerName } = useParams({ from: Route.id })
@@ -102,58 +103,66 @@ function ProviderDetail() {
     )
 
   const handleModelImportSuccess = async (importedModelName?: string) => {
-    // Refresh the provider to update the models list
+    if (importedModelName) {
-    await serviceHub.providers().getProviders().then(setProviders)
+      setImportingModel(importedModelName)
+    }
 
-    // If a model was imported and it might have vision capabilities, check and update
+    try {
-    if (importedModelName && providerName === 'llamacpp') {
+      // Refresh the provider to update the models list
-      try {
+      await serviceHub.providers().getProviders().then(setProviders)
-        const mmprojExists = await serviceHub
-          .models()
-          .checkMmprojExists(importedModelName)
-        if (mmprojExists) {
-          // Get the updated provider after refresh
-          const { getProviderByName, updateProvider: updateProviderState } =
-            useModelProvider.getState()
-          const llamacppProvider = getProviderByName('llamacpp')
 
-          if (llamacppProvider) {
+      // If a model was imported and it might have vision capabilities, check and update
-            const modelIndex = llamacppProvider.models.findIndex(
+      if (importedModelName && providerName === 'llamacpp') {
-              (m: Model) => m.id === importedModelName
+        try {
-            )
+          const mmprojExists = await serviceHub
-            if (modelIndex !== -1) {
+            .models()
-              const model = llamacppProvider.models[modelIndex]
+            .checkMmprojExists(importedModelName)
-              const capabilities = model.capabilities || []
+          if (mmprojExists) {
+            // Get the updated provider after refresh
+            const { getProviderByName, updateProvider: updateProviderState } =
+              useModelProvider.getState()
+            const llamacppProvider = getProviderByName('llamacpp')
 
-              // Add 'vision' capability if not already present AND if user hasn't manually configured capabilities
+            if (llamacppProvider) {
-              // Check if model has a custom capabilities config flag
+              const modelIndex = llamacppProvider.models.findIndex(
+                (m: Model) => m.id === importedModelName
+              )
+              if (modelIndex !== -1) {
+                const model = llamacppProvider.models[modelIndex]
+                const capabilities = model.capabilities || []
 
-              const hasUserConfiguredCapabilities =
+                // Add 'vision' capability if not already present AND if user hasn't manually configured capabilities
-                (model as any)._userConfiguredCapabilities === true
+                // Check if model has a custom capabilities config flag
 
-              if (
+                const hasUserConfiguredCapabilities =
-                !capabilities.includes('vision') &&
+                  (model as any)._userConfiguredCapabilities === true
-                !hasUserConfiguredCapabilities
-              ) {
-                const updatedModels = [...llamacppProvider.models]
-                updatedModels[modelIndex] = {
-                  ...model,
-                  capabilities: [...capabilities, 'vision'],
-                  // Mark this as auto-detected, not user-configured
-                  _autoDetectedVision: true,
-                } as any
 
-                updateProviderState('llamacpp', { models: updatedModels })
+                if (
-                console.log(
+                  !capabilities.includes('vision') &&
-                  `Vision capability added to model after provider refresh: ${importedModelName}`
+                  !hasUserConfiguredCapabilities
-                )
+                ) {
+                  const updatedModels = [...llamacppProvider.models]
+                  updatedModels[modelIndex] = {
+                    ...model,
+                    capabilities: [...capabilities, 'vision'],
+                    // Mark this as auto-detected, not user-configured
+                    _autoDetectedVision: true,
+                  } as any
+
+                  updateProviderState('llamacpp', { models: updatedModels })
+                  console.log(
+                    `Vision capability added to model after provider refresh: ${importedModelName}`
+                  )
+                }
               }
             }
           }
+        } catch (error) {
+          console.error('Error checking mmproj existence after import:', error)
         }
-      } catch (error) {
-        console.error('Error checking mmproj existence after import:', error)
       }
+    } finally {
+      // The importing state will be cleared by the useEffect when model appears in list
     }
   }
 
@@ -175,6 +184,29 @@ function ProviderDetail() {
     return () => clearInterval(intervalId)
   }, [serviceHub, setActiveModels])
 
+  // Clear importing state when model appears in the provider's model list
+  useEffect(() => {
+    if (importingModel && provider?.models) {
+      const modelExists = provider.models.some(
+        (model) => model.id === importingModel
+      )
+      if (modelExists) {
+        setImportingModel(null)
+      }
+    }
+  }, [importingModel, provider?.models])
+
+  // Fallback: Clear importing state after 10 seconds to prevent infinite loading
+  useEffect(() => {
+    if (importingModel) {
+      const timeoutId = setTimeout(() => {
+        setImportingModel(null)
+      }, 10000) // 10 seconds fallback
+
+      return () => clearTimeout(timeoutId)
+    }
+  }, [importingModel])
+
   // Auto-refresh provider settings to get updated backend configuration
   const refreshSettings = useCallback(async () => {
     if (!provider) return
@@ -831,6 +863,28 @@ function ProviderDetail() {
                       </p>
                     </div>
                   )}
+                  {/* Show importing skeleton first if there's one */}
+                  {importingModel && (
+                    <CardItem
+                      key="importing-skeleton"
+                      title={
+                        <div className="flex items-center gap-2">
+                          <div className="flex items-center gap-2 animate-pulse">
+                            <div className="bg-accent/20 flex gap-2 text-accent px-2 py-1 rounded-full text-xs">
+                              <IconLoader
+                                size={16}
+                                className="animate-spin text-accent"
+                              />
+                              Importing...
+                            </div>
+                            <h1 className="font-medium line-clamp-1">
+                              {importingModel}
+                            </h1>
+                          </div>
+                        </div>
+                      }
+                    />
+                  )}
                 </Card>
               </div>
             </div>