Merge pull request #207 from dgageot/improve-progress-bar

Improve progress bar

Author: trungutt

src/extension/ui/src/App.tsx

@@ -1,11 +1,10 @@
 import { createDockerDesktopClient } from '@docker/extension-api-client';
-import { useEffect, useCallback, memo } from 'react';
+import { memo, useCallback, useEffect } from 'react';
 
 import { CatalogGrid } from './components/CatalogGrid';
 import LoadingState from './components/LoadingState';
 import { useCatalogAll } from './queries/useCatalog';
 import { useConfig } from './queries/useConfig';
-import { useMCPClient } from './queries/useMCPClient';
 import { useRequiredImages } from './queries/useRequiredImages';
 import { useSecrets } from './queries/useSecrets';
 import { syncRegistryWithConfig } from './Registry';
@@ -20,7 +19,6 @@ export function App() {
   // Use hooks directly in the component
   const catalogAll = useCatalogAll(client);
   const requiredImages = useRequiredImages(client);
-  const mcpClient = useMCPClient(client);
   const config = useConfig(client);
   const secrets = useSecrets(client);
 
@@ -33,24 +31,22 @@ export function App() {
 
   // Create a context-like combined props object to pass to children
   const appProps = {
-    // Catalog related props
-    ...catalogAll,
+    imagesLoading: requiredImages.imagesLoading,
+    configLoading: config.configLoading,
+    secretsLoading: secrets.isLoading,
+    catalogLoading: catalogAll.catalogLoading,
+    registryLoading: catalogAll.registryLoading,
 
-    // Required images props
-    ...requiredImages,
-
-    // MCP Client props
-    ...mcpClient,
-
-    // Config props
-    ...config,
+    catalogItems: catalogAll.catalogItems,
+    registryItems: catalogAll.registryItems,
   };
 
   const isLoading =
+    requiredImages.imagesLoading ||
+    config.configLoading ||
+    secrets.isLoading ||
     catalogAll.catalogLoading ||
-    catalogAll.registryLoading ||
-    requiredImages.isLoading ||
-    secrets.isLoading;
+    catalogAll.registryLoading;
 
   useEffect(() => {
     syncRegistry();

src/extension/ui/src/components/LoadingState.tsx

@@ -10,27 +10,23 @@ interface LoadingStateProps {
 }
 
 const LoadingState: React.FC<LoadingStateProps> = ({ appProps }) => {
-    // Extract the loading states from appProps
-    const { secretsLoading, catalogLoading, registryLoading } = appProps;
-    const { imageStates, isLoading: imagesLoading } = appProps;
-    const { configLoading } = appProps;
-
-    // Determine if any loading is happening
-    const isLoading = secretsLoading || catalogLoading || registryLoading || imagesLoading || configLoading;
-
+    const { imagesLoading, configLoading, secretsLoading, catalogLoading, registryLoading } = appProps;
     const [progress, setProgress] = useState(0);
+    const isLoading = imagesLoading || configLoading || secretsLoading || catalogLoading || registryLoading;
 
     useEffect(() => {
-        const imageProgressTotal = imagesLoading ? 100 : 0;
-        const configProgressTotal = configLoading ? 100 : 0;
-        const secretsProgressTotal = secretsLoading ? 100 : 0;
-        const catalogProgressTotal = catalogLoading ? 100 : 0;
-        const registryProgressTotal = registryLoading ? 100 : 0;
+        const progress = [
+            imagesLoading ? 0 : 100,
+            configLoading ? 0 : 100,
+            secretsLoading ? 0 : 100,
+            catalogLoading ? 0 : 100,
+            registryLoading ? 0 : 100,
+        ]
+
+        const progressPercent = Math.round(progress.reduce((a, b) => a + b) / progress.length);
 
-        const totalLoadedProgress = imageProgressTotal + configProgressTotal + secretsProgressTotal + catalogProgressTotal + registryProgressTotal;
-        const totalPossibleProgress = 500;
-        setProgress(Math.round((totalLoadedProgress / totalPossibleProgress) * 100));
-    }, [imageStates, configLoading, secretsLoading, catalogLoading, registryLoading]);
+        setProgress(progressPercent);
+    }, [imagesLoading, configLoading, secretsLoading, catalogLoading, registryLoading]);
 
     if (!isLoading) return null;
 

src/extension/ui/src/queries/useCatalog.ts

@@ -4,7 +4,6 @@ import { useCallback, useEffect, useMemo, useState } from "react";
 import { parse, stringify } from "yaml";
 import {
   CATALOG_URL,
-  POLL_INTERVAL,
   REGISTRY_YAML
 } from "../Constants";
 import { writeToPromptsVolume } from "../FileUtils";
@@ -72,7 +71,6 @@ function useCatalog(client: v1.DockerDesktopClient) {
     refetch: refetchCatalog,
   } = useQuery({
     queryKey: ["catalog"],
-    enabled: !secretsLoading && !registryLoading && !configLoading,
     queryFn: async () => {
       const response = await fetch(
         localStorage.getItem("catalogUrl") || CATALOG_URL
@@ -173,10 +171,7 @@ function useRegistry(client: v1.DockerDesktopClient) {
         setCanRegister(true);
         throw error;
       }
-    },
-    refetchInterval: POLL_INTERVAL,
-    staleTime: 30000,
-    gcTime: 300000,
+    }
   });
 
   useQuery({

src/extension/ui/src/queries/useConfig.ts

@@ -37,10 +37,7 @@ export function useConfig(client: v1.DockerDesktopClient) {
         client.desktopUI.toast.error("Failed to get stored config: " + error);
         throw error;
       }
-    },
-    refetchInterval: POLL_INTERVAL,
-    staleTime: 30000,
-    gcTime: 300000,
+    }
   });
 
   const saveConfigMutation = useMutation({
@@ -52,8 +49,10 @@ export function useConfig(client: v1.DockerDesktopClient) {
       newConfig: { [key: string]: any };
     }) => {
       try {
-        const updatedConfig = {  ...((queryClient.getQueryData(["config"]) as Record<string, any>) ||
-          {}), [itemName]: newConfig };
+        const updatedConfig = {
+          ...((queryClient.getQueryData(["config"]) as Record<string, any>) ||
+            {}), [itemName]: newConfig
+        };
 
         await writeToPromptsVolume(client, 'config.yaml', stringify(updatedConfig));
 

src/extension/ui/src/queries/useRequiredImages.ts

@@ -3,12 +3,13 @@ import { useEffect, useState } from "react";
 import { BUSYBOX } from "../Constants";
 
 export function useRequiredImages(client: v1.DockerDesktopClient) {
-    const [isLoading, setIsLoading] = useState(false);
+    const [imagesLoading, setImagesLoading] = useState(true);
 
     const imageName = BUSYBOX;
     const fetchRequiredImage = async () => {
         try {
             await client.docker.cli.exec('inspect', [imageName]);
+            return;
         } catch (error) {
             // Ignore
         }
@@ -22,13 +23,12 @@ export function useRequiredImages(client: v1.DockerDesktopClient) {
     }
 
     useEffect(() => {
-        setIsLoading(true);
         fetchRequiredImage().then(() => {
-            setIsLoading(false);
+            setImagesLoading(false);
         });
     }, []);
 
     return {
-        isLoading,
+        imagesLoading,
     };
 } 

src/extension/ui/src/queries/useSecrets.ts

@@ -1,7 +1,6 @@
+import { v1 } from "@docker/extension-api-client-types";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { client } from "../App";
 import Secrets from "../Secrets";
-import { v1 } from "@docker/extension-api-client-types";
 import { Secret } from "../types";
 
 export function useSecrets(client: v1.DockerDesktopClient) {