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,6 +103,11 @@ function ProviderDetail() {
     )
 
   const handleModelImportSuccess = async (importedModelName?: string) => {
+    if (importedModelName) {
+      setImportingModel(importedModelName)
+    }
+
+    try {
       // Refresh the provider to update the models list
       await serviceHub.providers().getProviders().then(setProviders)
 
@@ -155,6 +161,9 @@ function ProviderDetail() {
           console.error('Error checking mmproj existence after import:', error)
         }
       }
+    } finally {
+      // The importing state will be cleared by the useEffect when model appears in list
+    }
   }
 
   useEffect(() => {
@@ -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>