Switch to react query, add caching

Author: colinmcneil

src/extension/ui/package-lock.json

@@ -10,6 +10,7 @@
     "@emotion/styled": "11.10.4",
     "@mui/icons-material": "6.4.5",
     "@mui/material": "6.4.5",
+    "@tanstack/react-query": "^5.69.0",
     "ansi-to-html": "^0.7.2",
     "json-edit-react": "^1.23.1",
     "react": "^18.2.0",
@@ -23,6 +24,7 @@
   },
   "devDependencies": {
     "@docker/extension-api-client-types": "0.3.4",
+    "@tanstack/react-query-devtools": "^5.69.0",
     "@types/jest": "^29.1.2",
     "@types/node": "^18.7.18",
     "@types/react": "^18.0.17",

src/extension/ui/package.json

@@ -6,7 +6,7 @@ import { Close } from '@mui/icons-material';
 import { CatalogGrid } from './components/CatalogGrid';
 import { POLL_INTERVAL } from './Constants';
 import { CatalogProvider, useCatalogContext } from './context/CatalogContext';
-import { MCPClientProvider } from './context/MCPClientContext';
+import { MCPClientProvider, useMCPClientContext } from './context/MCPClientContext';
 import ConfigurationModal from './components/ConfigurationModal';
 import { Settings as SettingsIcon } from '@mui/icons-material';
 
@@ -63,35 +63,51 @@ interface AppContentProps {
 }
 
 function AppContent({ settings, setSettings, configuringItem, setConfiguringItem }: AppContentProps) {
-  const { imagesLoadingResults, loadImagesIfNeeded, secrets, catalogItems, registryItems, } = useCatalogContext();
-  if (!imagesLoadingResults || imagesLoadingResults.stderr) {
-    return <Paper sx={{ padding: 2, height: '90vh', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }}>
-      {!imagesLoadingResults && <CircularProgress sx={{ marginBottom: 2 }} />}
-      {!imagesLoadingResults && <Typography>Loading images...</Typography>}
-      {imagesLoadingResults && <Alert sx={{ fontSize: '1.5em' }} action={<Button variant='outlined' color='secondary' onClick={() => loadImagesIfNeeded()}>Retry</Button>} title="Error loading images" severity="error">{imagesLoadingResults.stderr}</Alert>}
-      <Typography>{imagesLoadingResults?.stdout}</Typography>
-    </Paper>
-  }
+  const {
+    imagesLoadingResults,
+    loadImagesIfNeeded,
+    catalogItems,
+    secretsLoading,
+    catalogLoading,
+    registryLoading,
+    imagesIsFetching
+  } = useCatalogContext();
 
-  if (!secrets) {
-    return <Paper sx={{ padding: 2, height: '90vh', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }}>
-      <CircularProgress />
-      <Typography>Loading secrets...</Typography>
-    </Paper>
-  }
+  const { isFetching: mcpFetching } = useMCPClientContext();
+
+  // Instead of showing full-page loading states for each resource, let's implement a more unified approach
+  // Only show full-page loading during initial load, not during background refetching
+  const isInitialLoading = !catalogItems;
 
-  if (!catalogItems) {
-    return <Paper sx={{ padding: 2, height: '90vh', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }}>
-      <CircularProgress />
-      <Typography>Loading catalog...</Typography>
-    </Paper>
+  // Critical error check - only for images as they're required for the app to function
+  if (imagesLoadingResults?.stderr) {
+    return (
+      <Paper sx={{ padding: 2, height: '90vh', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }}>
+        <Alert
+          sx={{ fontSize: '1.5em' }}
+          action={
+            <Button variant='outlined' color='secondary' onClick={() => loadImagesIfNeeded()}>
+              Retry
+            </Button>
+          }
+          title="Error loading images"
+          severity="error"
+        >
+          {imagesLoadingResults.stderr}
+        </Alert>
+        <Typography>{imagesLoadingResults?.stdout}</Typography>
+      </Paper>
+    );
   }
 
-  if (!registryItems) {
-    return <Paper sx={{ padding: 2, height: '90vh', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }}>
-      <CircularProgress />
-      <Typography>Loading registry...</Typography>
-    </Paper>
+  // Show one unified loading screen during initial load
+  if (isInitialLoading) {
+    return (
+      <Paper sx={{ padding: 2, height: '90vh', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }}>
+        <CircularProgress sx={{ marginBottom: 2 }} />
+        <Typography>Loading application...</Typography>
+      </Paper>
+    );
   }
 
   return (
@@ -119,7 +135,6 @@ function AppContent({ settings, setSettings, configuringItem, setConfiguringItem
         </Dialog>
       )}
 
-      {/* Replace the old PromptConfig dialog with our new ConfigurationModal */}
       {configuringItem && (
         <ConfigurationModal
           open={configuringItem !== null}
@@ -129,6 +144,27 @@ function AppContent({ settings, setSettings, configuringItem, setConfiguringItem
         />
       )}
 
+      {/* Show a small loading indicator in the corner during background refetching */}
+      {(imagesIsFetching || secretsLoading || catalogLoading || registryLoading || mcpFetching) && (
+        <Box
+          sx={{
+            position: 'fixed',
+            bottom: 16,
+            right: 16,
+            zIndex: 9999,
+            display: 'flex',
+            alignItems: 'center',
+            backgroundColor: 'background.paper',
+            borderRadius: 2,
+            padding: 1,
+            boxShadow: 3
+          }}
+        >
+          <CircularProgress size={20} sx={{ mr: 1 }} />
+          <Typography variant="caption">Refreshing data...</Typography>
+        </Box>
+      )}
+
       <Stack direction="column" spacing={1} justifyContent='center' alignItems='center'>
         <Stack direction="row" spacing={1} justifyContent='space-evenly' alignItems='center' sx={{ width: '100%', maxWidth: '1000px' }}>
           <Logo />

src/extension/ui/src/App.tsx

@@ -49,12 +49,10 @@ export const CatalogGrid: React.FC<CatalogGridProps> = ({
         mcpClientStates,
         buttonsLoading,
         setButtonsLoading,
-        updateMCPClientStates
+        updateMCPClientStates,
+        isFetching: mcpFetching
     } = useMCPClientContext();
 
-    if (!registryItems) {
-        return <CircularProgress />
-    }
 
     const [showReloadModal, setShowReloadModal] = useState<boolean>(false);
     const [search, setSearch] = useState<string>('');
@@ -83,6 +81,11 @@ export const CatalogGrid: React.FC<CatalogGridProps> = ({
         loadDDVersion();
     }, []);
 
+
+    if (!registryItems) {
+        return <CircularProgress />
+    }
+
     const hasOutOfCatalog = catalogItems.length > 0 && Object.keys(registryItems).length > 0 && !Object.keys(registryItems).every((i) =>
         catalogItems.some((c) => c.name === i)
     )
@@ -106,7 +109,7 @@ export const CatalogGrid: React.FC<CatalogGridProps> = ({
         return <CircularProgress />
     }
 
-    const hasMCPConfigured = Object.values(mcpClientStates).some(state => state.exists && state.configured);
+    const hasMCPConfigured = mcpFetching || Object.values(mcpClientStates || {}).some(state => state.exists && state.configured);
 
     return (
         <Stack spacing={2} justifyContent='center' alignItems='center'>
@@ -133,7 +136,13 @@ export const CatalogGrid: React.FC<CatalogGridProps> = ({
             }}>registry.yaml</Button>} severity="info">
                 <Typography sx={{ width: '100%' }}>You have some prompts registered which are not available in the catalog.</Typography>
             </Alert>}
-            {!hasMCPConfigured && <Alert action={<Button variant='outlined' color='secondary' onClick={showSettings}>Configure</Button>} severity="error" sx={{ fontWeight: 'bold' }}>MCP Clients are not configured. Please configure MCP Clients to use the MCP Catalog.</Alert>}
+            {!hasMCPConfigured &&
+                <Alert
+                    severity="error"
+                    sx={{ fontSize: '1.2em', width: '90vw', maxWidth: '1000px', mt: 2 }}>
+                    No configured clients detected. Please configure at least one client in the <strong>Clients</strong> tab.
+                </Alert>
+            }
             <Box sx={{ position: 'sticky', top: 0, zIndex: 1000, backgroundColor: 'background.default' }}>
                 <Tabs value={tab} onChange={(_, newValue) => setTab(newValue)} sx={{ width: '90vw', maxWidth: '1000px' }}>
                     <Tooltip title="These are all of the tiles you have available across the catalog.">
@@ -146,7 +155,7 @@ export const CatalogGrid: React.FC<CatalogGridProps> = ({
                         <Tab sx={{ fontSize: '1.5em' }} label="Environment" />
                     </Tooltip>
                     <Tooltip title="These are clients which you have configured to use your tools.">
-                        <Tab sx={{ fontSize: '1.5em' }} label="Clients" />
+                        <Tab sx={{ ...{ fontSize: '1.5em' }, ...(!hasMCPConfigured ? { color: 'docker.amber.400' } : {}) }} label="Clients" />
                     </Tooltip>
                 </Tabs>
                 {tab < 2 && <Stack direction="row" spacing={1} alignItems='center' sx={{ mt: 1, py: 1 }}>
@@ -242,7 +251,7 @@ export const CatalogGrid: React.FC<CatalogGridProps> = ({
                 )}
                 {tab === 3 && (
                     <YourClients
-                        mcpClientStates={mcpClientStates}
+                        mcpClientStates={mcpClientStates || {}}
                         onUpdate={updateMCPClientStates}
                         setButtonsLoading={setButtonsLoading}
                         buttonsLoading={buttonsLoading}

src/extension/ui/src/components/CatalogGrid.tsx

@@ -8,6 +8,7 @@ import { trackEvent } from "../../Usage";
 import ConfigurationModal from "../ConfigurationModal";
 import { v1 } from "@docker/extension-api-client-types";
 import { createDockerDesktopClient } from "@docker/extension-api-client";
+import { useCatalogContext } from "../../context/CatalogContext";
 
 const iconSize = 16;
 
@@ -61,14 +62,26 @@ const TileActions = ({ item, registered, register, unregister, onSecretChange, s
         const assignedSecrets = Secrets.getAssignedSecrets(item, secrets);
         setAssignedSecrets(assignedSecrets)
     }
+
+    const { registryLoading } = useCatalogContext()
+
     const [isRegistering, setIsRegistering] = useState(false)
+    const [localRegistered, setLocalRegistered] = useState(registered)
     const [showConfigModal, setShowConfigModal] = useState(false)
     const [assignedSecrets, setAssignedSecrets] = useState<{ name: string, assigned: boolean }[]>([])
 
+    useEffect(() => {
+        setLocalRegistered(registered)
+    }, [registered])
+
     useEffect(() => {
         loadAssignedSecrets()
     }, [secrets])
 
+    if (registryLoading) {
+        return <CircularProgress size={20} />
+    }
+
     const unAssignedSecrets = assignedSecrets.filter(s => !s.assigned)
 
     const hasAllSecrets = unAssignedSecrets.length === 0
@@ -80,11 +93,6 @@ const TileActions = ({ item, registered, register, unregister, onSecretChange, s
     const hasAllConfig = unAssignedConfig.length === 0
 
     const getActionButton = () => {
-        if (isRegistering) {
-            return <Tooltip title="Waiting for Docker Desktop to be ready...">
-                <CircularProgress size={20} />
-            </Tooltip>
-        }
 
         if (!hasAllSecrets || !hasAllConfig) {
             return <Stack direction="row" spacing={0} alignItems="center">
@@ -110,16 +118,28 @@ const TileActions = ({ item, registered, register, unregister, onSecretChange, s
                     <Settings />
                 </IconButton>
             </Tooltip>}
-            <Tooltip title={registered ? "Unregistering this tile will hide it from MCP clients." : "Registering this tile will expose it to MCP clients."}>
-                <Switch checked={registered} onChange={async (event, checked) => {
-                    setIsRegistering(true)
-                    if (checked) {
-                        await register(item)
-                    } else {
-                        await unregister(item)
-                    }
-                    setIsRegistering(false)
-                }} />
+            <Tooltip title={localRegistered ? "Unregistering this tile will hide it from MCP clients." : "Registering this tile will expose it to MCP clients."}>
+                <Switch
+                    checked={localRegistered}
+                    disabled={isRegistering}
+                    onChange={async (event, checked) => {
+                        setIsRegistering(true)
+                        setLocalRegistered(checked)
+
+                        try {
+                            if (checked) {
+                                await register(item)
+                            } else {
+                                await unregister(item)
+                            }
+                        } catch (error) {
+                            // If operation fails, revert the local state
+                            setLocalRegistered(!checked)
+                        } finally {
+                            setIsRegistering(false)
+                        }
+                    }}
+                />
             </Tooltip>
         </Stack>
     }