Merge pull request #176 from dgageot/speed-up-tools-tab

Improve the speed of the Tools tab

Author: trungutt

src/extension/ui/src/components/tabs/ToolCatalog.tsx

@@ -12,7 +12,7 @@ interface ToolCatalogProps {
 }
 
 const ToolCatalog: React.FC<ToolCatalogProps> = ({ search, client, showMine }) => {
-    const { catalogItems } = useCatalogAll(client)
+    const { catalogItems, registryLoading } = useCatalogAll(client)
 
     // Memoize the filtered catalog items to prevent unnecessary recalculations
     const filteredCatalogItems = useMemo(() => {
@@ -31,6 +31,7 @@ const ToolCatalog: React.FC<ToolCatalogProps> = ({ search, client, showMine }) =
                         <Tile
                             item={catalogItem}
                             client={client}
+                            registryLoading={registryLoading}
                         />
                     </Grid2>
                 )

src/extension/ui/src/components/tile/Index.tsx

@@ -9,16 +9,15 @@ import {
   Dialog,
   DialogContent,
   DialogTitle,
-  Divider,
   IconButton,
   Stack,
   TextField,
-  Typography,
+  Typography
 } from '@mui/material';
 import { useState } from 'react';
 
 import { MCP_POLICY_NAME } from '../../Constants';
-import { useCatalogAll, useCatalogOperations } from '../../queries/useCatalog';
+import { useCatalogOperations } from '../../queries/useCatalog';
 import { useSecrets } from '../../queries/useSecrets';
 import { CatalogItemRichened } from '../../types/catalog';
 import Bottom from './Bottom';
@@ -29,9 +28,10 @@ import Top from './Top';
 type TileProps = {
   item: CatalogItemRichened;
   client: v1.DockerDesktopClient;
+  registryLoading: boolean;
 };
 
-const Tile = ({ item, client }: TileProps) => {
+const Tile = ({ item, client, registryLoading }: TileProps) => {
   const [showSecretDialog, setShowSecretDialog] = useState(false);
   const [assignedSecrets] = useState<{ name: string; assigned: boolean }[]>([]);
   const [changedSecrets, setChangedSecrets] = useState<{
@@ -43,7 +43,6 @@ const Tile = ({ item, client }: TileProps) => {
     useSecrets(client);
   const { registerCatalogItem, unregisterCatalogItem } =
     useCatalogOperations(client);
-  const { registryLoading } = useCatalogAll(client);
 
   if (registryLoading || secretsLoading) {
     return (
@@ -140,12 +139,12 @@ const Tile = ({ item, client }: TileProps) => {
           </Stack>
         </DialogContent>
       </Dialog>
-      <ConfigurationModal
+      {showConfigModal && <ConfigurationModal
         open={showConfigModal}
         onClose={() => setShowConfigModal(false)}
         catalogItem={item}
         client={client}
-      />
+      />}
       <Card>
         <CardActionArea
           sx={{ padding: 1.5 }}