From a3413e5ab961ed115cf7bad9153481ef0f8693c4 Mon Sep 17 00:00:00 2001
From: Daniel Languiller <dlanguiller@microsoft.com>
Date: Thu, 30 Oct 2025 14:32:34 +1100
Subject: [PATCH 01/31] feature: (WIP) loading states for planes

---
 src/web/src/services/hooks/index.ts           |  7 ++
 .../src/services/hooks/useAsyncOperation.ts   | 95 +++++++++++++++++++
 src/web/src/services/specsApi.ts              | 10 +-
 .../WorkspaceCreateDialog.tsx                 | 27 ++++--
 4 files changed, 129 insertions(+), 10 deletions(-)
 create mode 100644 src/web/src/services/hooks/index.ts
 create mode 100644 src/web/src/services/hooks/useAsyncOperation.ts

diff --git a/src/web/src/services/hooks/index.ts b/src/web/src/services/hooks/index.ts
new file mode 100644
index 00000000..406c611d
--- /dev/null
+++ b/src/web/src/services/hooks/index.ts
@@ -0,0 +1,7 @@
+export { useAsyncOperation } from "./useAsyncOperation";
+export type {
+  AsyncOperationState,
+  AsyncOperationActions,
+  AsyncServiceMethod,
+  UseAsyncOperationResult,
+} from "./useAsyncOperation";
diff --git a/src/web/src/services/hooks/useAsyncOperation.ts b/src/web/src/services/hooks/useAsyncOperation.ts
new file mode 100644
index 00000000..9cfcf410
--- /dev/null
+++ b/src/web/src/services/hooks/useAsyncOperation.ts
@@ -0,0 +1,95 @@
+import { useState, useCallback } from "react";
+
+export interface AsyncOperationState<T> {
+  data: T | null;
+  loading: boolean;
+  error: Error | null;
+  loadingMessage: string;
+}
+
+export interface AsyncOperationActions<T> {
+  execute: (...args: any[]) => Promise<T | undefined>;
+  reset: () => void;
+}
+
+export interface AsyncServiceMethod<T> {
+  loadingMessage: string;
+  fn: (...args: any[]) => Promise<T>;
+}
+
+export interface UseAsyncOperationResult<T> extends AsyncOperationState<T>, AsyncOperationActions<T> {}
+
+/**
+ * Generic hook for wrapping async service operations with loading states and messages.
+ *
+ * @param serviceMethod - Object containing the async function and loading message
+ * @returns Object with data, loading, error, loadingMessage, execute, and reset
+ *
+ * @example
+ * ```typescript
+ * const resourceProviders = useAsyncOperation({
+ *   loadingMessage: "Loading resource providers...",
+ *   fn: specsApi.getResourceProviders
+ * });
+ *
+ * // Usage
+ * await resourceProviders.execute(moduleUrl);
+ *
+ * // In JSX
+ * {resourceProviders.loading && (
+ *   <Box>
+ *     <CircularProgress />
+ *     <Typography>{resourceProviders.loadingMessage}</Typography>
+ *   </Box>
+ * )}
+ * ```
+ */
+export const useAsyncOperation = <T>(serviceMethod?: AsyncServiceMethod<T>): UseAsyncOperationResult<T> => {
+  const [data, setData] = useState<T | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+  const [loadingMessage, setLoadingMessage] = useState<string>("");
+
+  const execute = useCallback(
+    async (...args: any[]): Promise<T | undefined> => {
+      if (!serviceMethod) {
+        console.warn("useAsyncOperation: No service method provided");
+        return;
+      }
+
+      setLoading(true);
+      setError(null);
+      setLoadingMessage(serviceMethod.loadingMessage);
+
+      try {
+        const result = await serviceMethod.fn(...args);
+        setData(result);
+        return result;
+      } catch (err) {
+        const error = err instanceof Error ? err : new Error(String(err));
+        setError(error);
+        throw error;
+      } finally {
+        setLoading(false);
+        setLoadingMessage("");
+      }
+    },
+    [serviceMethod],
+  );
+
+  const reset = useCallback(() => {
+    setData(null);
+    setError(null);
+    setLoading(false);
+    setLoadingMessage("");
+  }, []);
+
+  return {
+    data,
+    loading,
+    error,
+    loadingMessage,
+    execute,
+    reset,
+  };
+};
diff --git a/src/web/src/services/specsApi.ts b/src/web/src/services/specsApi.ts
index 9d577552..8693b0f8 100644
--- a/src/web/src/services/specsApi.ts
+++ b/src/web/src/services/specsApi.ts
@@ -26,9 +26,13 @@ export const specsApi = {
     return res.data.map((v: any) => v.name);
   },
 
-  getModulesForPlane: async (planeName: string): Promise<string[]> => {
-    const res = await axios.get(`/Swagger/Specs/${planeName}`);
-    return res.data.map((v: any) => v.url);
+  getModulesForPlane: {
+    // @TODO: revisit msg:
+    loadingMessage: "Loading modules for plane... (this may take up to 40+ seconds)",
+    fn: async (planeName: string): Promise<string[]> => {
+      const res = await axios.get(`/Swagger/Specs/${planeName}`);
+      return res.data.map((v: any) => v.url);
+    },
   },
 
   getResourceProviders: async (moduleUrl: string): Promise<string[]> => {
diff --git a/src/web/src/views/workspace/components/WorkspaceInstruction/WorkspaceCreateDialog.tsx b/src/web/src/views/workspace/components/WorkspaceInstruction/WorkspaceCreateDialog.tsx
index b72525e5..4cb596c5 100644
--- a/src/web/src/views/workspace/components/WorkspaceInstruction/WorkspaceCreateDialog.tsx
+++ b/src/web/src/views/workspace/components/WorkspaceInstruction/WorkspaceCreateDialog.tsx
@@ -13,6 +13,7 @@ import React, { useState, useEffect, useCallback } from "react";
 import SwaggerItemSelector from "../../common/SwaggerItemSelector";
 import styled from "@emotion/styled";
 import { workspaceApi, specsApi, errorHandlerApi } from "../../../../services";
+import { useAsyncOperation } from "../../../../services/hooks";
 import type { Plane } from "../../interfaces";
 
 interface WorkspaceCreateDialogProps {
@@ -26,6 +27,8 @@ const WorkspaceCreateDialog: React.FC<WorkspaceCreateDialogProps> = ({ openDialo
   const [invalidText, setInvalidText] = useState<string | undefined>(undefined);
   const [workspaceName, setWorkspaceName] = useState<string>(name);
 
+  const modulesLoader = useAsyncOperation(specsApi.getModulesForPlane);
+
   const [planes, setPlanes] = useState<Plane[]>([]);
   const [planeOptions, setPlaneOptions] = useState<string[]>([]);
   const [selectedPlane, setSelectedPlane] = useState<string | null>(null);
@@ -103,21 +106,18 @@ const WorkspaceCreateDialog: React.FC<WorkspaceCreateDialogProps> = ({ openDialo
         await onModuleSelectionUpdate(null);
       } else {
         try {
-          setLoading(true);
-          const options = await specsApi.getModulesForPlane(plane.name);
+          const options = await modulesLoader.execute(plane.name);
           setPlanes((prevPlanes) => {
             const updatedPlanes = [...prevPlanes];
             const index = updatedPlanes.findIndex((v: Plane) => v.name === plane.name);
-            updatedPlanes[index].moduleOptions = options;
+            updatedPlanes[index].moduleOptions = options || [];
             return updatedPlanes;
           });
-          setLoading(false);
-          setModuleOptions(options);
+          setModuleOptions(options || []);
           setModuleOptionsCommonPrefix(`/Swagger/Specs/${plane.name}/`);
           await onModuleSelectionUpdate(null);
         } catch (err: any) {
           console.error(err);
-          setLoading(false);
           setInvalidText(errorHandlerApi.getErrorMessage(err));
         }
       }
@@ -256,6 +256,12 @@ const WorkspaceCreateDialog: React.FC<WorkspaceCreateDialogProps> = ({ openDialo
             {invalidText}{" "}
           </Alert>
         )}
+        {/* @TODO: revisit msg and component */}
+        {modulesLoader.loading && (
+          <Alert variant="outlined" severity="info">
+            {modulesLoader.loadingMessage}
+          </Alert>
+        )}
         <InputLabel shrink> API Specs</InputLabel>
         <Box
           sx={{
@@ -310,7 +316,14 @@ const WorkspaceCreateDialog: React.FC<WorkspaceCreateDialogProps> = ({ openDialo
         <Box>
           <Button onClick={handleClose}>Cancel</Button>
           <Button
-            disabled={loading || !selectedPlane || !selectedModule || !selectedResourceProvider || !workspaceName}
+            disabled={
+              loading ||
+              modulesLoader.loading ||
+              !selectedPlane ||
+              !selectedModule ||
+              !selectedResourceProvider ||
+              !workspaceName
+            }
             onClick={handleCreate}
             color="success"
           >

From 5e47936bc9ea83025be281002cc4e65ee5c9c90d Mon Sep 17 00:00:00 2001
From: Daniel Languiller <dlanguiller@microsoft.com>
Date: Thu, 30 Oct 2025 14:58:04 +1100
Subject: [PATCH 02/31] feature: (WIP) with loading component

---
 .../WorkspaceCreateDialog.tsx                 | 21 ++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/src/web/src/views/workspace/components/WorkspaceInstruction/WorkspaceCreateDialog.tsx b/src/web/src/views/workspace/components/WorkspaceInstruction/WorkspaceCreateDialog.tsx
index 4cb596c5..a49b47a3 100644
--- a/src/web/src/views/workspace/components/WorkspaceInstruction/WorkspaceCreateDialog.tsx
+++ b/src/web/src/views/workspace/components/WorkspaceInstruction/WorkspaceCreateDialog.tsx
@@ -8,6 +8,8 @@ import {
   Button,
   InputLabel,
   Alert,
+  Typography,
+  CircularProgress,
 } from "@mui/material";
 import React, { useState, useEffect, useCallback } from "react";
 import SwaggerItemSelector from "../../common/SwaggerItemSelector";
@@ -257,10 +259,27 @@ const WorkspaceCreateDialog: React.FC<WorkspaceCreateDialogProps> = ({ openDialo
           </Alert>
         )}
         {/* @TODO: revisit msg and component */}
-        {modulesLoader.loading && (
+        {/* {modulesLoader.loading && (
           <Alert variant="outlined" severity="info">
             {modulesLoader.loadingMessage}
           </Alert>
+        )} */}
+        {modulesLoader.loading && (
+          <Box
+            sx={{
+              p: 1.5,
+              mb: 2,
+              backgroundColor: "lightblue",
+              color: "text.primary",
+              borderRadius: 2,
+              display: "flex",
+              alignItems: "center",
+              gap: 2,
+            }}
+          >
+            <CircularProgress size={20} color="primary" />
+            <Typography variant="body2">{modulesLoader.loadingMessage}</Typography>
+          </Box>
         )}
         <InputLabel shrink> API Specs</InputLabel>
         <Box

From 3a225f532a9a5135c1daef89ad141ab22243c616 Mon Sep 17 00:00:00 2001
From: Daniel Languiller <dlanguiller@microsoft.com>
Date: Thu, 30 Oct 2025 14:59:07 +1100
Subject: [PATCH 03/31] feature: (WIP) adding todo comments

---
 .../WorkspaceInstruction/WorkspaceCreateDialog.tsx         | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/web/src/views/workspace/components/WorkspaceInstruction/WorkspaceCreateDialog.tsx b/src/web/src/views/workspace/components/WorkspaceInstruction/WorkspaceCreateDialog.tsx
index a49b47a3..5c82cf22 100644
--- a/src/web/src/views/workspace/components/WorkspaceInstruction/WorkspaceCreateDialog.tsx
+++ b/src/web/src/views/workspace/components/WorkspaceInstruction/WorkspaceCreateDialog.tsx
@@ -259,11 +259,8 @@ const WorkspaceCreateDialog: React.FC<WorkspaceCreateDialogProps> = ({ openDialo
           </Alert>
         )}
         {/* @TODO: revisit msg and component */}
-        {/* {modulesLoader.loading && (
-          <Alert variant="outlined" severity="info">
-            {modulesLoader.loadingMessage}
-          </Alert>
-        )} */}
+        {/* @TODO:  export to reusable component in /src/components */}
+        {/* @TODO: convert to styled component as used elsewhere */}
         {modulesLoader.loading && (
           <Box
             sx={{

From 06ad799e24847aada9e034145fe1138ff6bdcb1a Mon Sep 17 00:00:00 2001
From: Daniel Languiller <dlanguiller@microsoft.com>
Date: Fri, 31 Oct 2025 13:04:23 +1100
Subject: [PATCH 04/31] feature: refactor loading banner to new component

---
 .../src/components/AsyncOperationBanner.tsx   | 71 +++++++++++++++++++
 src/web/src/components/index.ts               |  4 ++
 src/web/src/services/specsApi.ts              |  2 +-
 .../WorkspaceCreateDialog.tsx                 | 24 +------
 4 files changed, 78 insertions(+), 23 deletions(-)
 create mode 100644 src/web/src/components/AsyncOperationBanner.tsx
 create mode 100644 src/web/src/components/index.ts

diff --git a/src/web/src/components/AsyncOperationBanner.tsx b/src/web/src/components/AsyncOperationBanner.tsx
new file mode 100644
index 00000000..b1d29bbe
--- /dev/null
+++ b/src/web/src/components/AsyncOperationBanner.tsx
@@ -0,0 +1,71 @@
+import React from "react";
+import { Box, CircularProgress, Typography } from "@mui/material";
+import type { UseAsyncOperationResult } from "../services/hooks";
+
+interface AsyncOperationBannerProps {
+  /**
+   * The async operation result from useAsyncOperation hook
+   */
+  operation: UseAsyncOperationResult<any>;
+  /**
+   * Optional custom background color (defaults to light blue)
+   */
+  backgroundColor?: string;
+  /**
+   * Optional custom text color (defaults to text.primary)
+   */
+  textColor?: string;
+  /**
+   * Optional custom spinner color (defaults to primary)
+   */
+  spinnerColor?: "primary" | "secondary" | "error" | "info" | "success" | "warning" | "inherit";
+  /**
+   * Optional custom spinner size (defaults to 20)
+   */
+  spinnerSize?: number;
+}
+
+/**
+ * A reusable banner component that displays loading state for async operations.
+ * Shows a rectangular banner of the specified colour with spinner and loading message when operation is loading.
+ *
+ * @example
+ * ```tsx
+ * const modulesLoader = useAsyncOperation(specsApi.getModulesForPlane);
+ *
+ * return (
+ *   <AsyncOperationBanner operation={modulesLoader} />
+ * );
+ * ```
+ */
+export const AsyncOperationBanner: React.FC<AsyncOperationBannerProps> = ({
+  operation,
+  backgroundColor = "lightblue",
+  textColor = "text.primary",
+  spinnerColor = "primary",
+  spinnerSize = 20,
+}) => {
+  if (!operation.loading) {
+    return null;
+  }
+
+  return (
+    <Box
+      sx={{
+        p: 1.5,
+        mb: 2,
+        backgroundColor,
+        color: textColor,
+        borderRadius: 2,
+        display: "flex",
+        alignItems: "center",
+        gap: 2,
+      }}
+    >
+      <CircularProgress size={spinnerSize} color={spinnerColor} />
+      <Typography variant="body2">{operation.loadingMessage}</Typography>
+    </Box>
+  );
+};
+
+export default AsyncOperationBanner;
diff --git a/src/web/src/components/index.ts b/src/web/src/components/index.ts
new file mode 100644
index 00000000..566e20ef
--- /dev/null
+++ b/src/web/src/components/index.ts
@@ -0,0 +1,4 @@
+export { AppNavBar } from "./AppNavBar";
+export { default as AsyncOperationBanner } from "./AsyncOperationBanner";
+export { default as EditorPageLayout } from "./EditorPageLayout";
+export { default as PageLayout } from "./PageLayout";
diff --git a/src/web/src/services/specsApi.ts b/src/web/src/services/specsApi.ts
index 8693b0f8..a4506dce 100644
--- a/src/web/src/services/specsApi.ts
+++ b/src/web/src/services/specsApi.ts
@@ -28,7 +28,7 @@ export const specsApi = {
 
   getModulesForPlane: {
     // @TODO: revisit msg:
-    loadingMessage: "Loading modules for plane... (this may take up to 40+ seconds)",
+    loadingMessage: "Loading modules for plane...",
     fn: async (planeName: string): Promise<string[]> => {
       const res = await axios.get(`/Swagger/Specs/${planeName}`);
       return res.data.map((v: any) => v.url);
diff --git a/src/web/src/views/workspace/components/WorkspaceInstruction/WorkspaceCreateDialog.tsx b/src/web/src/views/workspace/components/WorkspaceInstruction/WorkspaceCreateDialog.tsx
index 5c82cf22..9703e537 100644
--- a/src/web/src/views/workspace/components/WorkspaceInstruction/WorkspaceCreateDialog.tsx
+++ b/src/web/src/views/workspace/components/WorkspaceInstruction/WorkspaceCreateDialog.tsx
@@ -8,14 +8,13 @@ import {
   Button,
   InputLabel,
   Alert,
-  Typography,
-  CircularProgress,
 } from "@mui/material";
 import React, { useState, useEffect, useCallback } from "react";
 import SwaggerItemSelector from "../../common/SwaggerItemSelector";
 import styled from "@emotion/styled";
 import { workspaceApi, specsApi, errorHandlerApi } from "../../../../services";
 import { useAsyncOperation } from "../../../../services/hooks";
+import AsyncOperationBanner from "../../../../components/AsyncOperationBanner";
 import type { Plane } from "../../interfaces";
 
 interface WorkspaceCreateDialogProps {
@@ -258,26 +257,7 @@ const WorkspaceCreateDialog: React.FC<WorkspaceCreateDialogProps> = ({ openDialo
             {invalidText}{" "}
           </Alert>
         )}
-        {/* @TODO: revisit msg and component */}
-        {/* @TODO:  export to reusable component in /src/components */}
-        {/* @TODO: convert to styled component as used elsewhere */}
-        {modulesLoader.loading && (
-          <Box
-            sx={{
-              p: 1.5,
-              mb: 2,
-              backgroundColor: "lightblue",
-              color: "text.primary",
-              borderRadius: 2,
-              display: "flex",
-              alignItems: "center",
-              gap: 2,
-            }}
-          >
-            <CircularProgress size={20} color="primary" />
-            <Typography variant="body2">{modulesLoader.loadingMessage}</Typography>
-          </Box>
-        )}
+        <AsyncOperationBanner operation={modulesLoader} />
         <InputLabel shrink> API Specs</InputLabel>
         <Box
           sx={{

From f68737e3320771b0ac84577ac26296c79f995ead Mon Sep 17 00:00:00 2001
From: Daniel Languiller <dlanguiller@microsoft.com>
Date: Fri, 31 Oct 2025 13:22:11 +1100
Subject: [PATCH 05/31] feature: refactor AsyncOperationBanner to use styled
 component

---
 .../src/components/AsyncOperationBanner.tsx   | 46 +++++++------------
 1 file changed, 17 insertions(+), 29 deletions(-)

diff --git a/src/web/src/components/AsyncOperationBanner.tsx b/src/web/src/components/AsyncOperationBanner.tsx
index b1d29bbe..7f9b124b 100644
--- a/src/web/src/components/AsyncOperationBanner.tsx
+++ b/src/web/src/components/AsyncOperationBanner.tsx
@@ -1,30 +1,29 @@
 import React from "react";
 import { Box, CircularProgress, Typography } from "@mui/material";
+import { styled } from "@mui/material/styles";
 import type { UseAsyncOperationResult } from "../services/hooks";
 
 interface AsyncOperationBannerProps {
-  /**
-   * The async operation result from useAsyncOperation hook
-   */
   operation: UseAsyncOperationResult<any>;
-  /**
-   * Optional custom background color (defaults to light blue)
-   */
   backgroundColor?: string;
-  /**
-   * Optional custom text color (defaults to text.primary)
-   */
   textColor?: string;
-  /**
-   * Optional custom spinner color (defaults to primary)
-   */
   spinnerColor?: "primary" | "secondary" | "error" | "info" | "success" | "warning" | "inherit";
-  /**
-   * Optional custom spinner size (defaults to 20)
-   */
   spinnerSize?: number;
 }
 
+const LoadingBanner = styled(Box)<{ backgroundColor?: string; textColor?: string }>(
+  ({ theme, backgroundColor, textColor }) => ({
+    padding: theme.spacing(1.5),
+    marginBottom: theme.spacing(2),
+    backgroundColor: backgroundColor || theme.palette.grey[200],
+    color: textColor || theme.palette.text.primary,
+    borderRadius: theme.spacing(1),
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(2),
+  }),
+);
+
 /**
  * A reusable banner component that displays loading state for async operations.
  * Shows a rectangular banner of the specified colour with spinner and loading message when operation is loading.
@@ -40,7 +39,7 @@ interface AsyncOperationBannerProps {
  */
 export const AsyncOperationBanner: React.FC<AsyncOperationBannerProps> = ({
   operation,
-  backgroundColor = "lightblue",
+  backgroundColor = "grey.200",
   textColor = "text.primary",
   spinnerColor = "primary",
   spinnerSize = 20,
@@ -50,21 +49,10 @@ export const AsyncOperationBanner: React.FC<AsyncOperationBannerProps> = ({
   }
 
   return (
-    <Box
-      sx={{
-        p: 1.5,
-        mb: 2,
-        backgroundColor,
-        color: textColor,
-        borderRadius: 2,
-        display: "flex",
-        alignItems: "center",
-        gap: 2,
-      }}
-    >
+    <LoadingBanner backgroundColor={backgroundColor} textColor={textColor}>
       <CircularProgress size={spinnerSize} color={spinnerColor} />
       <Typography variant="body2">{operation.loadingMessage}</Typography>
-    </Box>
+    </LoadingBanner>
   );
 };
 

From 6b048202e3ab3539bf60671da772b828bee2c8f1 Mon Sep 17 00:00:00 2001
From: Daniel Languiller <dlanguiller@microsoft.com>
Date: Fri, 31 Oct 2025 16:27:59 +1100
Subject: [PATCH 06/31] feature: add loading handling to WSEditorSwaggerPicker
 and WSEditorClientConfig

---
 src/web/src/components/AsyncOperationBanner.tsx    |  4 +++-
 src/web/src/services/specsApi.ts                   |  6 ------
 .../components/WSEditor/WSEditorClientConfig.tsx   | 14 +++++++++-----
 .../WSEditorSwaggerPicker.tsx                      | 11 ++++++++---
 4 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/src/web/src/components/AsyncOperationBanner.tsx b/src/web/src/components/AsyncOperationBanner.tsx
index 7f9b124b..5c4bd7e3 100644
--- a/src/web/src/components/AsyncOperationBanner.tsx
+++ b/src/web/src/components/AsyncOperationBanner.tsx
@@ -26,7 +26,9 @@ const LoadingBanner = styled(Box)<{ backgroundColor?: string; textColor?: string
 
 /**
  * A reusable banner component that displays loading state for async operations.
- * Shows a rectangular banner of the specified colour with spinner and loading message when operation is loading.
+ * Designed to be used with the UseAsyncOperationResult interface.
+ *
+ * Returns null if !loading
  *
  * @example
  * ```tsx
diff --git a/src/web/src/services/specsApi.ts b/src/web/src/services/specsApi.ts
index a4506dce..6f8fa05a 100644
--- a/src/web/src/services/specsApi.ts
+++ b/src/web/src/services/specsApi.ts
@@ -27,7 +27,6 @@ export const specsApi = {
   },
 
   getModulesForPlane: {
-    // @TODO: revisit msg:
     loadingMessage: "Loading modules for plane...",
     fn: async (planeName: string): Promise<string[]> => {
       const res = await axios.get(`/Swagger/Specs/${planeName}`);
@@ -45,11 +44,6 @@ export const specsApi = {
     return res.data;
   },
 
-  getSwaggerModules: async (plane: string): Promise<string[]> => {
-    const res = await axios.get(`/Swagger/Specs/${plane}`);
-    return res.data.map((v: any) => v.url);
-  },
-
   getResourceProvidersWithType: async (moduleUrl: string, type?: string): Promise<string[]> => {
     let url = `${moduleUrl}/ResourceProviders`;
     if (type) {
diff --git a/src/web/src/views/workspace/components/WSEditor/WSEditorClientConfig.tsx b/src/web/src/views/workspace/components/WSEditor/WSEditorClientConfig.tsx
index 4ad5085d..c9615ae3 100644
--- a/src/web/src/views/workspace/components/WSEditor/WSEditorClientConfig.tsx
+++ b/src/web/src/views/workspace/components/WSEditor/WSEditorClientConfig.tsx
@@ -21,6 +21,8 @@ import {
   Tab,
 } from "@mui/material";
 import { workspaceApi, specsApi, errorHandlerApi } from "../../../../services";
+import { useAsyncOperation } from "../../../../services/hooks";
+import AsyncOperationBanner from "../../../../components/AsyncOperationBanner";
 import DoDisturbOnRoundedIcon from "@mui/icons-material/DoDisturbOnRounded";
 import AddCircleRoundedIcon from "@mui/icons-material/AddCircleRounded";
 import SwaggerItemSelector from "../../common/SwaggerItemSelector";
@@ -68,6 +70,9 @@ const WSEditorClientConfigDialog: React.FC<WSEditorClientConfigDialogProps> = ({
   const [invalidText, setInvalidText] = useState<string | undefined>(undefined);
   const [isAdd, setIsAdd] = useState(true);
 
+  // Async operation hooks
+  const modulesLoader = useAsyncOperation(specsApi.getModulesForPlane);
+
   const [endpointType, setEndpointType] = useState<"template" | "http-operation">("template");
 
   const [templateAzureCloud, setTemplateAzureCloud] = useState("");
@@ -125,16 +130,14 @@ const WSEditorClientConfigDialog: React.FC<WSEditorClientConfigDialogProps> = ({
         await onModuleSelectionUpdate(null);
       } else {
         try {
-          setUpdating(true);
-          const options = await specsApi.getSwaggerModules(plane!.name);
-          setUpdating(false);
-          setModuleOptions(options);
+          // Load modules using the new async operation pattern
+          const options = await modulesLoader.execute(plane!.name);
+          setModuleOptions(options || []);
           setModuleOptionsCommonPrefix(`/Swagger/Specs/${plane!.name}/`);
           await onModuleSelectionUpdate(null);
         } catch (err: any) {
           console.error(err);
           const message = errorHandlerApi.getErrorMessage(err);
-          setUpdating(false);
           setInvalidText(`ResponseError: ${message}`);
         }
       }
@@ -728,6 +731,7 @@ const WSEditorClientConfigDialog: React.FC<WSEditorClientConfigDialogProps> = ({
                 pb: 2,
               }}
             >
+              <AsyncOperationBanner operation={modulesLoader} />
               <SwaggerItemSelector
                 name="Module"
                 commonPrefix={moduleOptionsCommonPrefix}
diff --git a/src/web/src/views/workspace/components/WSEditorSwaggerPicker/WSEditorSwaggerPicker.tsx b/src/web/src/views/workspace/components/WSEditorSwaggerPicker/WSEditorSwaggerPicker.tsx
index c83406d8..6fcaaab7 100644
--- a/src/web/src/views/workspace/components/WSEditorSwaggerPicker/WSEditorSwaggerPicker.tsx
+++ b/src/web/src/views/workspace/components/WSEditorSwaggerPicker/WSEditorSwaggerPicker.tsx
@@ -27,6 +27,8 @@ import {
 } from "@mui/material";
 import CloseIcon from "@mui/icons-material/Close";
 import { workspaceApi, specsApi, errorHandlerApi } from "../../../../services";
+import { useAsyncOperation } from "../../../../services/hooks";
+import AsyncOperationBanner from "../../../../components/AsyncOperationBanner";
 import EditorPageLayout from "../../../../components/EditorPageLayout";
 import { styled } from "@mui/material/styles";
 import { getTypespecRPResources, getTypespecRPResourcesOperations } from "../../../../typespec";
@@ -87,6 +89,8 @@ const UpdateOptions = ["Default", "Generic(Get&Put) First", "Patch First", "No u
 const WSEditorSwaggerPicker = ({ workspaceName, plane, onClose }: WSEditorSwaggerPickerProps) => {
   const { filterText, updateFilter, filterResources } = useResourceFilter();
 
+  const modulesLoader = useAsyncOperation(specsApi.getModulesForPlane);
+
   const [loading, setLoading] = useState(false);
   const [invalidText, setInvalidText] = useState<string | undefined>(undefined);
   const [_defaultModule, setDefaultModule] = useState<string | null>(null);
@@ -116,8 +120,8 @@ const WSEditorSwaggerPicker = ({ workspaceName, plane, onClose }: WSEditorSwagge
       await loadWorkspaceResources();
 
       try {
-        const allModules = await specsApi.getSwaggerModules(plane);
-        setModuleOptions(allModules);
+        const allModules = await modulesLoader.execute(plane);
+        setModuleOptions(allModules || []);
         setModuleOptionsCommonPrefix(`/Swagger/Specs/${plane}/`);
 
         const swaggerDefault = await workspaceApi.getSwaggerDefault(workspaceName);
@@ -126,7 +130,7 @@ const WSEditorSwaggerPicker = ({ workspaceName, plane, onClose }: WSEditorSwagge
         }
 
         const moduleValueUrl = `/Swagger/Specs/${plane}/` + swaggerDefault.modNames.join("/");
-        if (allModules.findIndex((v) => v === moduleValueUrl) == -1) {
+        if (!allModules || allModules.findIndex((v) => v === moduleValueUrl) == -1) {
           return;
         }
 
@@ -608,6 +612,7 @@ const WSEditorSwaggerPicker = ({ workspaceName, plane, onClose }: WSEditorSwagge
         >
           <ListSubheader> Swagger Filters</ListSubheader>
           <MiddlePadding />
+          <AsyncOperationBanner operation={modulesLoader} />
           <SwaggerItemSelector
             name="Swagger Module"
             commonPrefix={moduleOptionsCommonPrefix}

From bf9cef3659da784441fec89fa9145512b048ea50 Mon Sep 17 00:00:00 2001
From: Daniel Languiller <dlanguiller@microsoft.com>
Date: Fri, 31 Oct 2025 16:31:28 +1100
Subject: [PATCH 07/31] feature: fix contracting text colours

---
 src/web/src/components/AsyncOperationBanner.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/web/src/components/AsyncOperationBanner.tsx b/src/web/src/components/AsyncOperationBanner.tsx
index 5c4bd7e3..56cb468e 100644
--- a/src/web/src/components/AsyncOperationBanner.tsx
+++ b/src/web/src/components/AsyncOperationBanner.tsx
@@ -42,7 +42,7 @@ const LoadingBanner = styled(Box)<{ backgroundColor?: string; textColor?: string
 export const AsyncOperationBanner: React.FC<AsyncOperationBannerProps> = ({
   operation,
   backgroundColor = "grey.200",
-  textColor = "text.primary",
+  textColor,
   spinnerColor = "primary",
   spinnerSize = 20,
 }) => {

From 3a6ce78be9902b2b39c726870a4348f62a44fdf2 Mon Sep 17 00:00:00 2001
From: Daniel Languiller <dlanguiller@microsoft.com>
Date: Fri, 31 Oct 2025 16:32:49 +1100
Subject: [PATCH 08/31] refactor: remove redundant comments

---
 .../views/workspace/components/WSEditor/WSEditorClientConfig.tsx | 1 -
 .../components/WSEditorSwaggerPicker/WSEditorSwaggerPicker.tsx   | 1 -
 2 files changed, 2 deletions(-)

diff --git a/src/web/src/views/workspace/components/WSEditor/WSEditorClientConfig.tsx b/src/web/src/views/workspace/components/WSEditor/WSEditorClientConfig.tsx
index c9615ae3..c3b5619a 100644
--- a/src/web/src/views/workspace/components/WSEditor/WSEditorClientConfig.tsx
+++ b/src/web/src/views/workspace/components/WSEditor/WSEditorClientConfig.tsx
@@ -70,7 +70,6 @@ const WSEditorClientConfigDialog: React.FC<WSEditorClientConfigDialogProps> = ({
   const [invalidText, setInvalidText] = useState<string | undefined>(undefined);
   const [isAdd, setIsAdd] = useState(true);
 
-  // Async operation hooks
   const modulesLoader = useAsyncOperation(specsApi.getModulesForPlane);
 
   const [endpointType, setEndpointType] = useState<"template" | "http-operation">("template");
diff --git a/src/web/src/views/workspace/components/WSEditorSwaggerPicker/WSEditorSwaggerPicker.tsx b/src/web/src/views/workspace/components/WSEditorSwaggerPicker/WSEditorSwaggerPicker.tsx
index 6fcaaab7..5e51f345 100644
--- a/src/web/src/views/workspace/components/WSEditorSwaggerPicker/WSEditorSwaggerPicker.tsx
+++ b/src/web/src/views/workspace/components/WSEditorSwaggerPicker/WSEditorSwaggerPicker.tsx
@@ -306,7 +306,6 @@ const WSEditorSwaggerPicker = ({ workspaceName, plane, onClose }: WSEditorSwagge
     [plane, existingResources],
   );
 
-  // Effect to load resources when selectedResourceProvider changes
   useEffect(() => {
     if (selectedResourceProvider) {
       loadResources(selectedResourceProvider);

From e7208085674031b41d17db258581ae0f48f36c88 Mon Sep 17 00:00:00 2001
From: Daniel Languiller <dlanguiller@microsoft.com>
Date: Fri, 31 Oct 2025 16:42:55 +1100
Subject: [PATCH 09/31] refactor: remove skipped tests, and adjust to match new
 api module pattern

---
 .../components/WSEditorClientConfig.test.tsx  |  7 +-
 .../components/WSEditorSwaggerPicker.test.tsx | 80 ++-----------------
 .../WSEditorClientConfig.integration.test.tsx |  2 +-
 3 files changed, 11 insertions(+), 78 deletions(-)

diff --git a/src/web/src/__tests__/components/WSEditorClientConfig.test.tsx b/src/web/src/__tests__/components/WSEditorClientConfig.test.tsx
index 5a9134be..d273c081 100644
--- a/src/web/src/__tests__/components/WSEditorClientConfig.test.tsx
+++ b/src/web/src/__tests__/components/WSEditorClientConfig.test.tsx
@@ -12,7 +12,10 @@ vi.mock("../../services", () => ({
   },
   specsApi: {
     getPlanes: vi.fn(),
-    getSwaggerModules: vi.fn(),
+    getModulesForPlane: {
+      loadingMessage: "Loading modules for plane...",
+      fn: vi.fn(),
+    },
     getResourceProviders: vi.fn(),
     getProviderResources: vi.fn(),
   },
@@ -54,7 +57,7 @@ describe("WSEditorClientConfigDialog", () => {
   beforeEach(() => {
     vi.clearAllMocks();
     (specsApi.getPlanes as any).mockResolvedValue(mockPlanes);
-    (specsApi.getSwaggerModules as any).mockResolvedValue(["storage", "compute"]);
+    (specsApi.getModulesForPlane.fn as any).mockResolvedValue(["storage", "compute"]);
     (specsApi.getResourceProviders as any).mockResolvedValue(mockResourceProviders);
     (specsApi.getProviderResources as any).mockResolvedValue(mockProviderResources);
     (errorHandlerApi.getErrorMessage as any).mockReturnValue("Mock error message");
diff --git a/src/web/src/__tests__/components/WSEditorSwaggerPicker.test.tsx b/src/web/src/__tests__/components/WSEditorSwaggerPicker.test.tsx
index e2cd9f85..21ee075d 100644
--- a/src/web/src/__tests__/components/WSEditorSwaggerPicker.test.tsx
+++ b/src/web/src/__tests__/components/WSEditorSwaggerPicker.test.tsx
@@ -84,7 +84,10 @@ describe("WSEditorSwaggerPicker", () => {
     vi.mocked(workspaceApi).addSwaggerResources.mockResolvedValue(undefined);
     vi.mocked(workspaceApi).addTypespecResources.mockResolvedValue(undefined);
 
-    vi.mocked(specsApi).getSwaggerModules.mockResolvedValue(mockModules);
+    vi.mocked(specsApi).getModulesForPlane = {
+      loadingMessage: "Loading modules for plane...",
+      fn: vi.fn().mockResolvedValue(mockModules),
+    };
     vi.mocked(specsApi).getResourceProvidersWithType.mockResolvedValue(mockResourceProviders);
     vi.mocked(specsApi).getProviderResources.mockResolvedValue(mockResources);
     vi.mocked(specsApi).filterResourcesByPlane.mockResolvedValue({ resources: mockResources });
@@ -126,7 +129,7 @@ describe("WSEditorSwaggerPicker", () => {
       render(<WSEditorSwaggerPicker {...defaultProps} />);
 
       await waitFor(() => {
-        expect(vi.mocked(specsApi).getSwaggerModules).toHaveBeenCalledWith("ResourceManagement");
+        expect(vi.mocked(specsApi).getModulesForPlane.fn).toHaveBeenCalledWith("ResourceManagement");
       });
     });
 
@@ -686,79 +689,6 @@ describe("WSEditorSwaggerPicker", () => {
       expect(onCloseMock).toHaveBeenCalledWith(false);
     });
   });
-
-  describe("Error Handling", () => {
-    it.skip("displays error when swagger modules fail to load", async () => {
-      // @NOTE: will address once loading issues have been addressed
-      vi.mocked(specsApi).getSwaggerModules.mockRejectedValue(new Error("Failed to load modules"));
-
-      render(<WSEditorSwaggerPicker {...defaultProps} />);
-
-      await waitFor(() => {
-        expect(screen.getByText(/ResponseError/)).toBeInTheDocument();
-      });
-    });
-
-    it.skip("displays error when resource providers fail to load", async () => {
-      // @NOTE: will address once loading issues have been addressed
-      vi.mocked(specsApi).getResourceProvidersWithType.mockRejectedValue(new Error("Failed to load providers"));
-
-      render(<WSEditorSwaggerPicker {...defaultProps} />);
-
-      await waitFor(() => {
-        expect(screen.getByText(/ResponseError/)).toBeInTheDocument();
-      });
-    });
-
-    it.skip("displays error when resources fail to load", async () => {
-      // @NOTE: will address once loading issues have been addressed
-      vi.mocked(specsApi).getProviderResources.mockRejectedValue(new Error("Failed to load resources"));
-
-      render(<WSEditorSwaggerPicker {...defaultProps} />);
-
-      await waitFor(() => {
-        expect(screen.getByText(/ResponseError/)).toBeInTheDocument();
-      });
-    });
-
-    it.skip("displays error when submission fails", async () => {
-      // @NOTE: will address once loading issues have been addressed
-      vi.mocked(workspaceApi).addSwaggerResources.mockRejectedValue(new Error("Submission failed"));
-
-      render(<WSEditorSwaggerPicker {...defaultProps} />);
-
-      await waitFor(() => {
-        const resourceCheckbox = screen.getAllByRole("checkbox")[1];
-        fireEvent.click(resourceCheckbox);
-      });
-
-      const submitButton = screen.getByRole("button", { name: /submit/i });
-      fireEvent.click(submitButton);
-
-      await waitFor(() => {
-        expect(screen.getByText(/ResponseError/)).toBeInTheDocument();
-      });
-    });
-
-    it.skip("allows dismissing error messages", async () => {
-      // @NOTE: will address once loading issues have been addressed
-      vi.mocked(specsApi).getSwaggerModules.mockRejectedValue(new Error("Failed to load modules"));
-
-      render(<WSEditorSwaggerPicker {...defaultProps} />);
-
-      await waitFor(() => {
-        const errorAlert = screen.getByText(/ResponseError/);
-        expect(errorAlert).toBeInTheDocument();
-      });
-
-      const closeErrorButton = screen.getByLabelText(/close/i);
-      fireEvent.click(closeErrorButton);
-
-      await waitFor(() => {
-        expect(screen.queryByText(/ResponseError/)).not.toBeInTheDocument();
-      });
-    });
-  });
 });
 
 describe("SwaggerItemSelector", () => {
diff --git a/src/web/src/__tests__/integration/WSEditorClientConfig.integration.test.tsx b/src/web/src/__tests__/integration/WSEditorClientConfig.integration.test.tsx
index 010c3201..f0b7143e 100644
--- a/src/web/src/__tests__/integration/WSEditorClientConfig.integration.test.tsx
+++ b/src/web/src/__tests__/integration/WSEditorClientConfig.integration.test.tsx
@@ -94,7 +94,7 @@ describe("WSEditorClientConfigDialog - Integration", () => {
   });
 
   describe("Complete User Workflows", () => {
-    it("should handle user inputs for relevant fields", async () => {
+    it("should handle user inputs for relevant fields", { timeout: 10000 }, async () => {
       const user = userEvent.setup();
       render(<WSEditorClientConfigDialog workspaceUrl={mockWorkspaceUrl} open={true} onClose={mockOnClose} />);
 

From c8dc0717053ff83a30245849126e925bc840209b Mon Sep 17 00:00:00 2001
From: Daniel Languiller <dlanguiller@microsoft.com>
Date: Fri, 31 Oct 2025 16:49:39 +1100
Subject: [PATCH 10/31] refactor: remove redundant comment

---
 .../views/workspace/components/WSEditor/WSEditorClientConfig.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/web/src/views/workspace/components/WSEditor/WSEditorClientConfig.tsx b/src/web/src/views/workspace/components/WSEditor/WSEditorClientConfig.tsx
index c3b5619a..0104fe7c 100644
--- a/src/web/src/views/workspace/components/WSEditor/WSEditorClientConfig.tsx
+++ b/src/web/src/views/workspace/components/WSEditor/WSEditorClientConfig.tsx
@@ -129,7 +129,6 @@ const WSEditorClientConfigDialog: React.FC<WSEditorClientConfigDialogProps> = ({
         await onModuleSelectionUpdate(null);
       } else {
         try {
-          // Load modules using the new async operation pattern
           const options = await modulesLoader.execute(plane!.name);
           setModuleOptions(options || []);
           setModuleOptionsCommonPrefix(`/Swagger/Specs/${plane!.name}/`);

From 0776133a220df657bfedb790e9072c992b95ad31 Mon Sep 17 00:00:00 2001
From: Daniel Languiller <dlanguiller@microsoft.com>
Date: Fri, 31 Oct 2025 17:13:21 +1100
Subject: [PATCH 11/31] refactor: make GenerateDialog use new async pattern

---
 src/web/src/services/cliApi.ts                | 18 ++++++---
 .../views/cli/components/GenerateDialog.tsx   | 37 ++++++++-----------
 2 files changed, 28 insertions(+), 27 deletions(-)

diff --git a/src/web/src/services/cliApi.ts b/src/web/src/services/cliApi.ts
index 18cfd6cb..965371ac 100644
--- a/src/web/src/services/cliApi.ts
+++ b/src/web/src/services/cliApi.ts
@@ -39,11 +39,17 @@ export const cliApi = {
     return res.data;
   },
 
-  updateCliModule: async (repoName: string, moduleName: string, data: any): Promise<void> => {
-    await axios.put(`/CLI/Az/${repoName}/Modules/${moduleName}`, data);
-  },
-
-  patchCliModule: async (repoName: string, moduleName: string, data: any): Promise<void> => {
-    await axios.patch(`/CLI/Az/${repoName}/Modules/${moduleName}`, data);
+  updateCliModule: {
+    loadingMessage: "Generating all CLI commands...",
+    fn: async (repoName: string, moduleName: string, data: any): Promise<void> => {
+      await axios.put(`/CLI/Az/${repoName}/Modules/${moduleName}`, data);
+    },
+  },
+
+  patchCliModule: {
+    loadingMessage: "Generating modified CLI commands...",
+    fn: async (repoName: string, moduleName: string, data: any): Promise<void> => {
+      await axios.patch(`/CLI/Az/${repoName}/Modules/${moduleName}`, data);
+    },
   },
 } as const;
diff --git a/src/web/src/views/cli/components/GenerateDialog.tsx b/src/web/src/views/cli/components/GenerateDialog.tsx
index 4f95560a..fed188d3 100644
--- a/src/web/src/views/cli/components/GenerateDialog.tsx
+++ b/src/web/src/views/cli/components/GenerateDialog.tsx
@@ -1,6 +1,6 @@
-import { useState } from "react";
 import { Alert, Box, Button, Dialog, DialogActions, DialogContent, DialogTitle, LinearProgress } from "@mui/material";
 import { cliApi, errorHandlerApi } from "../../../services";
+import { useAsyncOperation } from "../../../services/hooks";
 import { exportModViewProfile, type ProfileCommandTree } from "../utils/commandTreeInitialization";
 import { type CLIModViewProfiles } from "../interfaces";
 
@@ -17,8 +17,8 @@ interface GenerateDialogProps {
 }
 
 const GenerateDialog = (props: GenerateDialogProps) => {
-  const [updating, setUpdating] = useState<boolean>(false);
-  const [invalidText, setInvalidText] = useState<string | undefined>(undefined);
+  const updateAllOperation = useAsyncOperation(cliApi.updateCliModule);
+  const updateModifiedOperation = useAsyncOperation(cliApi.patchCliModule);
 
   const handleClose = () => {
     props.onClose(false);
@@ -34,15 +34,11 @@ const GenerateDialog = (props: GenerateDialogProps) => {
       profiles: profiles,
     };
 
-    setUpdating(true);
     try {
-      await cliApi.updateCliModule(props.repoName, props.moduleName, data);
-      setUpdating(false);
+      await updateAllOperation.execute(props.repoName, props.moduleName, data);
       props.onClose(true);
-    } catch (err: any) {
-      console.error(err);
-      setInvalidText(errorHandlerApi.getErrorMessage(err));
-      setUpdating(false);
+    } catch (error) {
+      console.error("Generate all failed:", error);
     }
   };
 
@@ -56,36 +52,35 @@ const GenerateDialog = (props: GenerateDialogProps) => {
       profiles: profiles,
     };
 
-    setUpdating(true);
     try {
-      await cliApi.patchCliModule(props.repoName, props.moduleName, data);
-      setUpdating(false);
+      await updateModifiedOperation.execute(props.repoName, props.moduleName, data);
       props.onClose(true);
-    } catch (err: any) {
-      console.error(err);
-      setInvalidText(errorHandlerApi.getErrorMessage(err));
-      setUpdating(false);
+    } catch (error) {
+      console.error("Generate modified failed:", error);
     }
   };
 
+  const isLoading = updateAllOperation.loading || updateModifiedOperation.loading;
+  const error = updateAllOperation.error || updateModifiedOperation.error;
+
   return (
     <Dialog disableEscapeKeyDown open={props.open}>
       <DialogTitle>Generate CLI commands to {props.moduleName}</DialogTitle>
       <DialogContent>
-        {invalidText && (
+        {error && (
           <Alert variant="filled" severity="error">
             {" "}
-            {invalidText}{" "}
+            {errorHandlerApi.getErrorMessage(error)}{" "}
           </Alert>
         )}
       </DialogContent>
       <DialogActions>
-        {updating && (
+        {isLoading && (
           <Box sx={{ width: "100%" }}>
             <LinearProgress color="secondary" />
           </Box>
         )}
-        {!updating && (
+        {!isLoading && (
           <>
             <Button onClick={handleClose}>Cancel</Button>
             <Button onClick={handleGenerateAll}>Generate All</Button>

From b58ffbfb93eed9a0844355616c2fac41f3de6a8e Mon Sep 17 00:00:00 2001
From: Daniel Languiller <dlanguiller@microsoft.com>
Date: Mon, 3 Nov 2025 11:56:23 +1100
Subject: [PATCH 12/31] refactor: change banner spinner to LinearProgress

---
 src/web/src/components/AsyncOperationBanner.tsx | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/src/web/src/components/AsyncOperationBanner.tsx b/src/web/src/components/AsyncOperationBanner.tsx
index 56cb468e..9df1e6cb 100644
--- a/src/web/src/components/AsyncOperationBanner.tsx
+++ b/src/web/src/components/AsyncOperationBanner.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Box, CircularProgress, Typography } from "@mui/material";
+import { Box, LinearProgress, Typography } from "@mui/material";
 import { styled } from "@mui/material/styles";
 import type { UseAsyncOperationResult } from "../services/hooks";
 
@@ -19,8 +19,8 @@ const LoadingBanner = styled(Box)<{ backgroundColor?: string; textColor?: string
     color: textColor || theme.palette.text.primary,
     borderRadius: theme.spacing(1),
     display: "flex",
-    alignItems: "center",
-    gap: theme.spacing(2),
+    flexDirection: "column",
+    gap: theme.spacing(1),
   }),
 );
 
@@ -41,10 +41,8 @@ const LoadingBanner = styled(Box)<{ backgroundColor?: string; textColor?: string
  */
 export const AsyncOperationBanner: React.FC<AsyncOperationBannerProps> = ({
   operation,
-  backgroundColor = "grey.200",
+  backgroundColor = "white",
   textColor,
-  spinnerColor = "primary",
-  spinnerSize = 20,
 }) => {
   if (!operation.loading) {
     return null;
@@ -52,8 +50,8 @@ export const AsyncOperationBanner: React.FC<AsyncOperationBannerProps> = ({
 
   return (
     <LoadingBanner backgroundColor={backgroundColor} textColor={textColor}>
-      <CircularProgress size={spinnerSize} color={spinnerColor} />
-      <Typography variant="body2">{operation.loadingMessage}</Typography>
+      <Typography variant="body1">{operation.loadingMessage}</Typography>
+      <LinearProgress color="secondary" />
     </LoadingBanner>
   );
 };

From da5a2439ecdcb17cf840b46a1efed1f0eaac0dec Mon Sep 17 00:00:00 2001
From: Daniel Languiller <dlanguiller@microsoft.com>
Date: Mon, 3 Nov 2025 12:01:04 +1100
Subject: [PATCH 13/31] refactor: remove loadingMessage string from cli api
 calls as they are redundant

---
 src/web/src/services/cliApi.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/web/src/services/cliApi.ts b/src/web/src/services/cliApi.ts
index 965371ac..7e75204e 100644
--- a/src/web/src/services/cliApi.ts
+++ b/src/web/src/services/cliApi.ts
@@ -40,14 +40,14 @@ export const cliApi = {
   },
 
   updateCliModule: {
-    loadingMessage: "Generating all CLI commands...",
+    loadingMessage: "",
     fn: async (repoName: string, moduleName: string, data: any): Promise<void> => {
       await axios.put(`/CLI/Az/${repoName}/Modules/${moduleName}`, data);
     },
   },
 
   patchCliModule: {
-    loadingMessage: "Generating modified CLI commands...",
+    loadingMessage: "",
     fn: async (repoName: string, moduleName: string, data: any): Promise<void> => {
       await axios.patch(`/CLI/Az/${repoName}/Modules/${moduleName}`, data);
     },

From 978b23e7dc0bd869c535884eeb30130743c5321f Mon Sep 17 00:00:00 2001
From: Daniel Languiller <dlanguiller@microsoft.com>
Date: Mon, 3 Nov 2025 13:10:08 +1100
Subject: [PATCH 14/31] refactor: GenerateDialog to use use async banner

---
 src/web/src/services/cliApi.ts                |  4 +--
 .../views/cli/components/GenerateDialog.tsx   | 28 +++++++++----------
 2 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/src/web/src/services/cliApi.ts b/src/web/src/services/cliApi.ts
index 7e75204e..cf505f30 100644
--- a/src/web/src/services/cliApi.ts
+++ b/src/web/src/services/cliApi.ts
@@ -40,14 +40,14 @@ export const cliApi = {
   },
 
   updateCliModule: {
-    loadingMessage: "",
+    loadingMessage: "Generating CLI commands...",
     fn: async (repoName: string, moduleName: string, data: any): Promise<void> => {
       await axios.put(`/CLI/Az/${repoName}/Modules/${moduleName}`, data);
     },
   },
 
   patchCliModule: {
-    loadingMessage: "",
+    loadingMessage: "Generating CLI commands...",
     fn: async (repoName: string, moduleName: string, data: any): Promise<void> => {
       await axios.patch(`/CLI/Az/${repoName}/Modules/${moduleName}`, data);
     },
diff --git a/src/web/src/views/cli/components/GenerateDialog.tsx b/src/web/src/views/cli/components/GenerateDialog.tsx
index fed188d3..7c669933 100644
--- a/src/web/src/views/cli/components/GenerateDialog.tsx
+++ b/src/web/src/views/cli/components/GenerateDialog.tsx
@@ -1,6 +1,7 @@
-import { Alert, Box, Button, Dialog, DialogActions, DialogContent, DialogTitle, LinearProgress } from "@mui/material";
+import { Alert, Button, Dialog, DialogActions, DialogContent, DialogTitle } from "@mui/material";
 import { cliApi, errorHandlerApi } from "../../../services";
 import { useAsyncOperation } from "../../../services/hooks";
+import { AsyncOperationBanner } from "../../../components";
 import { exportModViewProfile, type ProfileCommandTree } from "../utils/commandTreeInitialization";
 import { type CLIModViewProfiles } from "../interfaces";
 
@@ -65,8 +66,10 @@ const GenerateDialog = (props: GenerateDialogProps) => {
 
   return (
     <Dialog disableEscapeKeyDown open={props.open}>
-      <DialogTitle>Generate CLI commands to {props.moduleName}</DialogTitle>
+      <DialogTitle>{!isLoading && `Generate CLI commands for ${props.moduleName} module?`}</DialogTitle>
       <DialogContent>
+        <AsyncOperationBanner operation={updateAllOperation} />
+        <AsyncOperationBanner operation={updateModifiedOperation} />
         {error && (
           <Alert variant="filled" severity="error">
             {" "}
@@ -75,18 +78,15 @@ const GenerateDialog = (props: GenerateDialogProps) => {
         )}
       </DialogContent>
       <DialogActions>
-        {isLoading && (
-          <Box sx={{ width: "100%" }}>
-            <LinearProgress color="secondary" />
-          </Box>
-        )}
-        {!isLoading && (
-          <>
-            <Button onClick={handleClose}>Cancel</Button>
-            <Button onClick={handleGenerateAll}>Generate All</Button>
-            <Button onClick={handleGenerateModified}>Generate Edited Only</Button>
-          </>
-        )}
+        <Button onClick={handleClose} disabled={isLoading}>
+          Cancel
+        </Button>
+        <Button onClick={handleGenerateAll} disabled={isLoading}>
+          Generate All
+        </Button>
+        <Button onClick={handleGenerateModified} disabled={isLoading}>
+          Generate Edited Only
+        </Button>
       </DialogActions>
     </Dialog>
   );

From e8c4278ed8c7c33fddbb007fdbdc34f59642aa63 Mon Sep 17 00:00:00 2001
From: Daniel Languiller <dlanguiller@microsoft.com>
Date: Mon, 3 Nov 2025 13:46:18 +1100
Subject: [PATCH 15/31] refactor: commandApi.deleteOperation to new pattern

---
 src/web/src/services/commandApi.ts            |  7 ++-
 .../CommandDeleteDialog.tsx                   | 44 +++++++------------
 2 files changed, 20 insertions(+), 31 deletions(-)

diff --git a/src/web/src/services/commandApi.ts b/src/web/src/services/commandApi.ts
index e458dbb6..71931782 100644
--- a/src/web/src/services/commandApi.ts
+++ b/src/web/src/services/commandApi.ts
@@ -11,8 +11,11 @@ export const commandApi = {
     return res.data;
   },
 
-  deleteResource: async (resourceUrl: string): Promise<void> => {
-    await axios.delete(resourceUrl);
+  deleteResource: {
+    loadingMessage: "Deleting commands...",
+    fn: async (resourceUrl: string): Promise<void> => {
+      await axios.delete(resourceUrl);
+    },
   },
 
   updateCommand: async (leafUrl: string, data: any): Promise<any> => {
diff --git a/src/web/src/views/workspace/components/WSEditorCommandContent/CommandDeleteDialog.tsx b/src/web/src/views/workspace/components/WSEditorCommandContent/CommandDeleteDialog.tsx
index 795909db..7eedc02e 100644
--- a/src/web/src/views/workspace/components/WSEditorCommandContent/CommandDeleteDialog.tsx
+++ b/src/web/src/views/workspace/components/WSEditorCommandContent/CommandDeleteDialog.tsx
@@ -1,15 +1,8 @@
-import {
-  Box,
-  Button,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogTitle,
-  LinearProgress,
-  Typography,
-} from "@mui/material";
+import { Button, Dialog, DialogActions, DialogContent, DialogTitle, Typography } from "@mui/material";
 import React, { useState, useEffect } from "react";
 import { commandApi } from "../../../../services";
+import { useAsyncOperation } from "../../../../services/hooks";
+import { AsyncOperationBanner } from "../../../../components";
 import { COMMAND_PREFIX } from "../../../../constants";
 import { DecodeResponseCommand } from "../../utils/decodeResponseCommand";
 import type { Command, ResponseCommand } from "../../interfaces";
@@ -22,7 +15,7 @@ export interface CommandDeleteDialogProps {
 }
 
 const CommandDeleteDialog: React.FC<CommandDeleteDialogProps> = (props) => {
-  const [updating, setUpdating] = useState<boolean>(false);
+  const deleteOperation = useAsyncOperation(commandApi.deleteResource);
   const [relatedCommands, setRelatedCommands] = useState<string[]>([]);
 
   const getUrls = () => {
@@ -73,39 +66,32 @@ const CommandDeleteDialog: React.FC<CommandDeleteDialogProps> = (props) => {
   };
 
   const handleDelete = async () => {
-    setUpdating(true);
     const urls = getUrls();
 
     try {
-      await Promise.all(urls.map((url) => commandApi.deleteResource(url)));
-      setUpdating(false);
+      await Promise.all(urls.map((url) => deleteOperation.execute(url)));
       props.onClose(true);
-    } catch (err) {
-      setUpdating(false);
-      console.error(err);
+    } catch (error) {
+      console.error("Delete failed:", error);
     }
   };
 
   return (
     <Dialog disableEscapeKeyDown open={props.open}>
-      <DialogTitle>Delete Commands</DialogTitle>
+      {!deleteOperation.loading && <DialogTitle>Delete Commands</DialogTitle>}
       <DialogContent dividers={true}>
+        <AsyncOperationBanner operation={deleteOperation} />
         {relatedCommands.map((command, idx) => (
           <Typography key={`command-${idx}`} variant="body2">{`${COMMAND_PREFIX}${command}`}</Typography>
         ))}
       </DialogContent>
       <DialogActions>
-        {updating && (
-          <Box sx={{ width: "100%" }}>
-            <LinearProgress color="secondary" />
-          </Box>
-        )}
-        {!updating && (
-          <>
-            <Button onClick={handleClose}>Cancel</Button>
-            <Button onClick={handleDelete}>Delete</Button>
-          </>
-        )}
+        <Button onClick={handleClose} disabled={deleteOperation.loading}>
+          Cancel
+        </Button>
+        <Button onClick={handleDelete} disabled={deleteOperation.loading}>
+          Delete
+        </Button>
       </DialogActions>
     </Dialog>
   );

From d827f1a7ca15ef0633f955b164fe5bbd779be118 Mon Sep 17 00:00:00 2001
From: Daniel Languiller <dlanguiller@microsoft.com>
Date: Mon, 3 Nov 2025 13:51:52 +1100
Subject: [PATCH 16/31] refactor: fix tests for commandApi.deleteOperation

---
 .../components/WSEditorCommandContent.test.tsx         | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/web/src/__tests__/components/WSEditorCommandContent.test.tsx b/src/web/src/__tests__/components/WSEditorCommandContent.test.tsx
index dbca2c27..bee518d6 100644
--- a/src/web/src/__tests__/components/WSEditorCommandContent.test.tsx
+++ b/src/web/src/__tests__/components/WSEditorCommandContent.test.tsx
@@ -127,7 +127,10 @@ describe("WSEditorCommandContent", () => {
     vi.clearAllMocks();
     vi.mocked(commandApi).getCommand.mockResolvedValue(mockCommand);
     vi.mocked(commandApi).getCommandsForResource.mockResolvedValue([mockCommand]);
-    vi.mocked(commandApi).deleteResource.mockResolvedValue(undefined);
+    vi.mocked(commandApi).deleteResource = {
+      loadingMessage: "Deleting commands...",
+      fn: vi.fn().mockResolvedValue(undefined),
+    };
     vi.mocked(commandApi).updateCommand.mockResolvedValue(mockCommand);
     vi.mocked(commandApi).updateCommandExamples.mockResolvedValue(mockCommand);
     vi.mocked(commandApi).updateCommandOutputs.mockResolvedValue(mockCommand);
@@ -500,7 +503,10 @@ describe("WSEditorCommandContent", () => {
     });
 
     it("handles delete dialog confirmation", async () => {
-      vi.mocked(commandApi).deleteResource.mockResolvedValue(undefined);
+      vi.mocked(commandApi).deleteResource = {
+        loadingMessage: "Deleting commands...",
+        fn: vi.fn().mockResolvedValue(undefined),
+      };
 
       render(<WSEditorCommandContent {...defaultProps} />);
 

From d21c9855804822e693671fc8944ebff4107ca24c Mon Sep 17 00:00:00 2001
From: Daniel Languiller <dlanguiller@microsoft.com>
Date: Mon, 3 Nov 2025 15:14:04 +1100
Subject: [PATCH 17/31] refactor: update ExampleDialog loading handlers

---
 .../WSEditorCommandContent.test.tsx           | 20 +++++++--
 src/web/src/services/commandApi.ts            | 42 +++++++++++-------
 .../WSEditorCommandContent/CommandDialog.tsx  | 43 +++++++++----------
 .../WSEditorCommandContent/ExampleDialog.tsx  | 41 ++++++++----------
 4 files changed, 81 insertions(+), 65 deletions(-)

diff --git a/src/web/src/__tests__/components/WSEditorCommandContent.test.tsx b/src/web/src/__tests__/components/WSEditorCommandContent.test.tsx
index bee518d6..a6f016df 100644
--- a/src/web/src/__tests__/components/WSEditorCommandContent.test.tsx
+++ b/src/web/src/__tests__/components/WSEditorCommandContent.test.tsx
@@ -131,8 +131,22 @@ describe("WSEditorCommandContent", () => {
       loadingMessage: "Deleting commands...",
       fn: vi.fn().mockResolvedValue(undefined),
     };
-    vi.mocked(commandApi).updateCommand.mockResolvedValue(mockCommand);
-    vi.mocked(commandApi).updateCommandExamples.mockResolvedValue(mockCommand);
+    vi.mocked(commandApi).updateCommand = {
+      loadingMessage: "Updating command...",
+      fn: vi.fn().mockResolvedValue(mockCommand),
+    };
+    vi.mocked(commandApi).renameCommand = {
+      loadingMessage: "Renaming command...",
+      fn: vi.fn().mockResolvedValue(mockCommand),
+    };
+    vi.mocked(commandApi).updateCommandExamples = {
+      loadingMessage: "Updating command examples...",
+      fn: vi.fn().mockResolvedValue(mockCommand),
+    };
+    vi.mocked(commandApi).generateSwaggerExamples = {
+      loadingMessage: "Generating examples from OpenAPI...",
+      fn: vi.fn().mockResolvedValue([]),
+    };
     vi.mocked(commandApi).updateCommandOutputs.mockResolvedValue(mockCommand);
   });
 
@@ -473,7 +487,7 @@ describe("WSEditorCommandContent", () => {
 
     it("handles example dialog close with changes", async () => {
       const updatedCommand = { ...mockCommand, version: "2.0" };
-      vi.mocked(commandApi).updateCommandExamples.mockResolvedValue(updatedCommand);
+      (vi.mocked(commandApi).updateCommandExamples.fn as any).mockResolvedValue(updatedCommand);
 
       render(<WSEditorCommandContent {...defaultProps} />);
 
diff --git a/src/web/src/services/commandApi.ts b/src/web/src/services/commandApi.ts
index 71931782..fea6f9f1 100644
--- a/src/web/src/services/commandApi.ts
+++ b/src/web/src/services/commandApi.ts
@@ -18,27 +18,39 @@ export const commandApi = {
     },
   },
 
-  updateCommand: async (leafUrl: string, data: any): Promise<any> => {
-    const res = await axios.patch(leafUrl, data);
-    return res.data;
+  updateCommand: {
+    loadingMessage: "Updating command...",
+    fn: async (leafUrl: string, data: any): Promise<any> => {
+      const res = await axios.patch(leafUrl, data);
+      return res.data;
+    },
   },
 
-  renameCommand: async (leafUrl: string, newName: string): Promise<any> => {
-    const res = await axios.post(`${leafUrl}/Rename`, { name: newName });
-    return res.data;
+  renameCommand: {
+    loadingMessage: "Renaming command...",
+    fn: async (leafUrl: string, newName: string): Promise<any> => {
+      const res = await axios.post(`${leafUrl}/Rename`, { name: newName });
+      return res.data;
+    },
   },
 
-  updateCommandExamples: async (leafUrl: string, examples: any[]): Promise<any> => {
-    const res = await axios.patch(leafUrl, { examples });
-    return res.data;
+  updateCommandExamples: {
+    loadingMessage: "Updating command examples...",
+    fn: async (leafUrl: string, examples: any[]): Promise<any> => {
+      const res = await axios.patch(leafUrl, { examples });
+      return res.data;
+    },
   },
 
-  generateSwaggerExamples: async (leafUrl: string): Promise<any[]> => {
-    const res = await axios.post(`${leafUrl}/GenerateExamples`, { source: "swagger" });
-    return res.data.map((v: any) => ({
-      name: v.name,
-      commands: v.commands,
-    }));
+  generateSwaggerExamples: {
+    loadingMessage: "Generating examples from OpenAPI...",
+    fn: async (leafUrl: string): Promise<any[]> => {
+      const res = await axios.post(`${leafUrl}/GenerateExamples`, { source: "swagger" });
+      return res.data.map((v: any) => ({
+        name: v.name,
+        commands: v.commands,
+      }));
+    },
   },
 
   addSubcommands: async (resourceUrl: string, data: any): Promise<void> => {
diff --git a/src/web/src/views/workspace/components/WSEditorCommandContent/CommandDialog.tsx b/src/web/src/views/workspace/components/WSEditorCommandContent/CommandDialog.tsx
index 837038d1..0b8f53ca 100644
--- a/src/web/src/views/workspace/components/WSEditorCommandContent/CommandDialog.tsx
+++ b/src/web/src/views/workspace/components/WSEditorCommandContent/CommandDialog.tsx
@@ -1,6 +1,5 @@
 import {
   Alert,
-  Box,
   Button,
   Dialog,
   DialogActions,
@@ -8,13 +7,14 @@ import {
   DialogTitle,
   FormControlLabel,
   InputLabel,
-  LinearProgress,
   Radio,
   RadioGroup,
   TextField,
 } from "@mui/material";
 import React, { useState, useCallback } from "react";
 import { commandApi, errorHandlerApi } from "../../../../services";
+import { useAsyncOperation } from "../../../../services/hooks";
+import { AsyncOperationBanner } from "../../../../components";
 import { DecodeResponseCommand } from "../../utils/decodeResponseCommand";
 import type { Command } from "../../interfaces";
 
@@ -26,13 +26,15 @@ export interface CommandDialogProps {
 }
 
 const CommandDialog: React.FC<CommandDialogProps> = ({ workspaceUrl, open, command, onClose }) => {
+  const updateOperation = useAsyncOperation(commandApi.updateCommand);
+  const renameOperation = useAsyncOperation(commandApi.renameCommand);
+
   const [name, setName] = useState(command.names.join(" "));
   const [shortHelp, setShortHelp] = useState(command.help?.short ?? "");
   const [longHelp, setLongHelp] = useState(command.help?.lines?.join("\n") ?? "");
   const [stage, setStage] = useState(command.stage);
   const [confirmation, setConfirmation] = useState(command.confirmation ?? "");
   const [invalidText, setInvalidText] = useState<string | undefined>(undefined);
-  const [updating, setUpdating] = useState(false);
 
   const handleModify = useCallback(async () => {
     let trimmedName = name.trim();
@@ -67,8 +69,6 @@ const CommandDialog: React.FC<CommandDialogProps> = ({ workspaceUrl, open, comma
       lines = trimmedLongHelp.split("\n").filter((l) => l.length > 0);
     }
 
-    setUpdating(true);
-
     const leafUrl =
       `${workspaceUrl}/CommandTree/Nodes/aaz/` +
       command.names.slice(0, -1).join("/") +
@@ -76,7 +76,7 @@ const CommandDialog: React.FC<CommandDialogProps> = ({ workspaceUrl, open, comma
       command.names[command.names.length - 1];
 
     try {
-      const commandData = await commandApi.updateCommand(leafUrl, {
+      const commandData = await updateOperation.execute(leafUrl, {
         help: {
           short: trimmedShortHelp,
           lines: lines,
@@ -88,18 +88,15 @@ const CommandDialog: React.FC<CommandDialogProps> = ({ workspaceUrl, open, comma
       const commandName = names.join(" ");
       if (commandName === command.names.join(" ")) {
         const cmd = DecodeResponseCommand(commandData);
-        setUpdating(false);
         onClose(cmd);
       } else {
-        const renamedData = await commandApi.renameCommand(leafUrl, commandName);
+        const renamedData = await renameOperation.execute(leafUrl, commandName);
         const cmd = DecodeResponseCommand(renamedData);
-        setUpdating(false);
         onClose(cmd);
       }
     } catch (err: any) {
       console.error(err);
       setInvalidText(errorHandlerApi.getErrorMessage(err));
-      setUpdating(false);
     }
   }, [name, shortHelp, longHelp, confirmation, stage, workspaceUrl, command, onClose]);
 
@@ -108,14 +105,19 @@ const CommandDialog: React.FC<CommandDialogProps> = ({ workspaceUrl, open, comma
     onClose();
   }, [onClose]);
 
+  const isLoading = updateOperation.loading || renameOperation.loading;
+  const error = updateOperation.error || renameOperation.error;
+
   return (
     <Dialog disableEscapeKeyDown open={open} sx={{ "& .MuiDialog-paper": { width: "80%" } }}>
       <DialogTitle>Command</DialogTitle>
       <DialogContent dividers={true}>
-        {invalidText && (
+        <AsyncOperationBanner operation={updateOperation} />
+        <AsyncOperationBanner operation={renameOperation} />
+        {(invalidText || error) && (
           <Alert variant="filled" severity="error">
             {" "}
-            {invalidText}{" "}
+            {invalidText || errorHandlerApi.getErrorMessage(error!)}{" "}
           </Alert>
         )}
         <InputLabel required shrink sx={{ font: "inherit" }}>
@@ -191,17 +193,12 @@ const CommandDialog: React.FC<CommandDialogProps> = ({ workspaceUrl, open, comma
         />
       </DialogContent>
       <DialogActions>
-        {updating && (
-          <Box sx={{ width: "100%" }}>
-            <LinearProgress color="secondary" />
-          </Box>
-        )}
-        {!updating && (
-          <React.Fragment>
-            <Button onClick={handleClose}>Cancel</Button>
-            <Button onClick={handleModify}>Save</Button>
-          </React.Fragment>
-        )}
+        <Button onClick={handleClose} disabled={isLoading}>
+          Cancel
+        </Button>
+        <Button onClick={handleModify} disabled={isLoading}>
+          Save
+        </Button>
       </DialogActions>
     </Dialog>
   );
diff --git a/src/web/src/views/workspace/components/WSEditorCommandContent/ExampleDialog.tsx b/src/web/src/views/workspace/components/WSEditorCommandContent/ExampleDialog.tsx
index 479bea6f..b4b88bb0 100644
--- a/src/web/src/views/workspace/components/WSEditorCommandContent/ExampleDialog.tsx
+++ b/src/web/src/views/workspace/components/WSEditorCommandContent/ExampleDialog.tsx
@@ -11,7 +11,6 @@ import {
   Input,
   InputAdornment,
   InputLabel,
-  LinearProgress,
   TextField,
   Typography,
   TypographyProps,
@@ -22,6 +21,8 @@ import DoDisturbOnRoundedIcon from "@mui/icons-material/DoDisturbOnRounded";
 import AddCircleRoundedIcon from "@mui/icons-material/AddCircleRounded";
 import CloseIcon from "@mui/icons-material/Close";
 import { commandApi, errorHandlerApi } from "../../../../services";
+import { useAsyncOperation } from "../../../../services/hooks";
+import { AsyncOperationBanner } from "../../../../components";
 import { COMMAND_PREFIX } from "../../../../constants";
 import { ExampleItemSelector } from "./ExampleItemSelector";
 import { DecodeResponseCommand } from "../../utils/decodeResponseCommand";
@@ -43,11 +44,13 @@ const ExampleCommandTypography = styled(Typography)<TypographyProps>(({ theme })
 }));
 
 const ExampleDialog: React.FC<ExampleDialogProps> = ({ workspaceUrl, open, command, idx, onClose }) => {
+  const updateExamplesOperation = useAsyncOperation(commandApi.updateCommandExamples);
+  const generateExamplesOperation = useAsyncOperation(commandApi.generateSwaggerExamples);
+
   const [name, setName] = useState<string>("");
   const [exampleCommands, setExampleCommands] = useState<string[]>([""]);
   const [isAdd, setIsAdd] = useState<boolean>(true);
   const [invalidText, setInvalidText] = useState<string | undefined>(undefined);
-  const [updating, setUpdating] = useState<boolean>(false);
   const [source, setSource] = useState<string | undefined>(undefined);
   const [exampleOptions, setExampleOptions] = useState<Example[]>([]);
 
@@ -58,7 +61,6 @@ const ExampleDialog: React.FC<ExampleDialogProps> = ({ workspaceUrl, open, comma
       setExampleCommands([""]);
       setIsAdd(true);
       setInvalidText(undefined);
-      setUpdating(false);
       setSource(undefined);
       setExampleOptions([]);
     } else {
@@ -67,7 +69,6 @@ const ExampleDialog: React.FC<ExampleDialogProps> = ({ workspaceUrl, open, comma
       setExampleCommands(example.commands);
       setIsAdd(false);
       setInvalidText(undefined);
-      setUpdating(false);
       setSource(undefined);
       setExampleOptions([]);
     }
@@ -81,21 +82,17 @@ const ExampleDialog: React.FC<ExampleDialogProps> = ({ workspaceUrl, open, comma
         "/Leaves/" +
         command.names[command.names.length - 1];
 
-      setUpdating(true);
-
       try {
-        const responseData = await commandApi.updateCommandExamples(leafUrl, examples);
+        const responseData = await updateExamplesOperation.execute(leafUrl, examples);
         const cmd = DecodeResponseCommand(responseData);
-        setUpdating(false);
         onClose(cmd);
       } catch (err: any) {
         console.error(err);
         const message = errorHandlerApi.getErrorMessage(err);
         setInvalidText(`ResponseError: ${message}`);
-        setUpdating(false);
       }
     },
-    [workspaceUrl, command.names, onClose],
+    [workspaceUrl, command.names, onClose, updateExamplesOperation],
   );
 
   const handleDelete = useCallback(() => {
@@ -205,19 +202,18 @@ const ExampleDialog: React.FC<ExampleDialogProps> = ({ workspaceUrl, open, comma
         command.names[command.names.length - 1];
 
       setSource("swagger");
-      setUpdating(true);
-      const examples = await commandApi.generateSwaggerExamples(leafUrl);
-      setExampleOptions(examples);
-      setUpdating(false);
-      if (examples.length > 0) {
-        onExampleSelectorUpdate(examples[0].name);
+      const examples = await generateExamplesOperation.execute(leafUrl);
+      if (examples) {
+        setExampleOptions(examples);
+        if (examples.length > 0) {
+          onExampleSelectorUpdate(examples[0].name);
+        }
       }
     } catch (err: any) {
       console.error(err.response);
-      setUpdating(false);
       setInvalidText(errorHandlerApi.getErrorMessage(err));
     }
-  }, [workspaceUrl, command.names]);
+  }, [workspaceUrl, command.names, generateExamplesOperation]);
 
   const onExampleSelectorUpdate = useCallback(
     (exampleDisplayName: string | null) => {
@@ -359,12 +355,9 @@ const ExampleDialog: React.FC<ExampleDialogProps> = ({ workspaceUrl, open, comma
       </DialogContent>
       {(!isAdd || source != undefined) && (
         <DialogActions>
-          {updating && (
-            <Box sx={{ width: "100%" }}>
-              <LinearProgress color="secondary" />
-            </Box>
-          )}
-          {!updating && (
+          <AsyncOperationBanner operation={updateExamplesOperation} />
+          <AsyncOperationBanner operation={generateExamplesOperation} />
+          {!updateExamplesOperation.loading && !generateExamplesOperation.loading && (
             <React.Fragment>
               {!isAdd && (
                 <React.Fragment>

From 43922c784288a0ac33621c0cedc3a0611652267f Mon Sep 17 00:00:00 2001
From: Daniel Languiller <dlanguiller@microsoft.com>
Date: Mon, 3 Nov 2025 15:22:00 +1100
Subject: [PATCH 18/31] refactor: update Outputdialog with new loading pattern

---
 .../WSEditorCommandContent.test.tsx           |  5 +++-
 src/web/src/services/commandApi.ts            |  9 ++++---
 .../WSEditorCommandContent/OutputDialog.tsx   | 27 +++++++------------
 3 files changed, 20 insertions(+), 21 deletions(-)

diff --git a/src/web/src/__tests__/components/WSEditorCommandContent.test.tsx b/src/web/src/__tests__/components/WSEditorCommandContent.test.tsx
index a6f016df..965e519d 100644
--- a/src/web/src/__tests__/components/WSEditorCommandContent.test.tsx
+++ b/src/web/src/__tests__/components/WSEditorCommandContent.test.tsx
@@ -147,7 +147,10 @@ describe("WSEditorCommandContent", () => {
       loadingMessage: "Generating examples from OpenAPI...",
       fn: vi.fn().mockResolvedValue([]),
     };
-    vi.mocked(commandApi).updateCommandOutputs.mockResolvedValue(mockCommand);
+    vi.mocked(commandApi).updateCommandOutputs = {
+      loadingMessage: "Updating command outputs...",
+      fn: vi.fn().mockResolvedValue(mockCommand),
+    };
   });
 
   describe("Core Rendering", () => {
diff --git a/src/web/src/services/commandApi.ts b/src/web/src/services/commandApi.ts
index fea6f9f1..415e4cd4 100644
--- a/src/web/src/services/commandApi.ts
+++ b/src/web/src/services/commandApi.ts
@@ -57,9 +57,12 @@ export const commandApi = {
     await axios.post(resourceUrl, data);
   },
 
-  updateCommandOutputs: async (leafUrl: string, outputs: any[]): Promise<any> => {
-    const res = await axios.patch(leafUrl, { outputs });
-    return res.data;
+  updateCommandOutputs: {
+    loadingMessage: "Updating command outputs...",
+    fn: async (leafUrl: string, outputs: any[]): Promise<any> => {
+      const res = await axios.patch(leafUrl, { outputs });
+      return res.data;
+    },
   },
 
   updateCommandArgument: async (argumentUrl: string, data: any): Promise<void> => {
diff --git a/src/web/src/views/workspace/components/WSEditorCommandContent/OutputDialog.tsx b/src/web/src/views/workspace/components/WSEditorCommandContent/OutputDialog.tsx
index b5750163..645a0db0 100644
--- a/src/web/src/views/workspace/components/WSEditorCommandContent/OutputDialog.tsx
+++ b/src/web/src/views/workspace/components/WSEditorCommandContent/OutputDialog.tsx
@@ -9,7 +9,6 @@ import {
   DialogTitle,
   FormControlLabel,
   FormLabel,
-  LinearProgress,
   Switch,
   Typography,
   TypographyProps,
@@ -17,6 +16,8 @@ import {
 } from "@mui/material";
 import { styled } from "@mui/material";
 import { commandApi, errorHandlerApi } from "../../../../services";
+import { useAsyncOperation } from "../../../../services/hooks";
+import { AsyncOperationBanner } from "../../../../components";
 import { DecodeResponseCommand } from "../../utils/decodeResponseCommand";
 
 interface ObjectOutput {
@@ -81,7 +82,7 @@ interface OutputDialogProps {
 }
 
 const OutputDialog: React.FC<OutputDialogProps> = (props) => {
-  const [updating, setUpdating] = useState<boolean>(false);
+  const updateOutputsOperation = useAsyncOperation(commandApi.updateCommandOutputs);
   const [invalidText, setInvalidText] = useState<string | undefined>(undefined);
   const outputs = props.command.outputs ?? [];
   const output = outputs[props.idx!];
@@ -95,7 +96,6 @@ const OutputDialog: React.FC<OutputDialogProps> = (props) => {
 
   const handleUpdateOutput = async () => {
     setInvalidText(undefined);
-    setUpdating(true);
 
     if (isObjectOutput(output) || isArrayOutput(output)) {
       let commandNames = props.command.names;
@@ -104,22 +104,17 @@ const OutputDialog: React.FC<OutputDialogProps> = (props) => {
         commandNames.slice(0, -1).join("/") +
         "/Leaves/" +
         commandNames[commandNames.length - 1];
-      console.log("Original clientFlatten: ");
-      console.log(output.clientFlatten);
+
       output.clientFlatten = !output.clientFlatten;
-      console.log("New clientFlatten: ");
-      console.log(output.clientFlatten);
 
       try {
-        const responseData = await commandApi.updateCommandOutputs(leafUrl, outputs);
+        const responseData = await updateOutputsOperation.execute(leafUrl, outputs);
         const cmd = DecodeResponseCommand(responseData);
-        setUpdating(false);
         props.onClose(cmd);
       } catch (err: any) {
         console.error(err);
         const message = errorHandlerApi.getErrorMessage(err);
         setInvalidText(`ResponseError: ${message}`);
-        setUpdating(false);
       }
     } else {
       console.error(`Invalid output type for flatten switch: ${output.type}`);
@@ -177,13 +172,11 @@ const OutputDialog: React.FC<OutputDialogProps> = (props) => {
         )}
       </DialogContent>
       <DialogActions>
-        {updating && (
-          <Box sx={{ width: "100%" }}>
-            <LinearProgress color="secondary" />
-          </Box>
-        )}
-        {!updating && <Button onClick={handleClose}>Cancel</Button>}
-        <Button onClick={handleUpdateOutput}>Update</Button>
+        <AsyncOperationBanner operation={updateOutputsOperation} />
+        {!updateOutputsOperation.loading && <Button onClick={handleClose}>Cancel</Button>}
+        <Button onClick={handleUpdateOutput} disabled={updateOutputsOperation.loading}>
+          Update
+        </Button>
       </DialogActions>
     </Dialog>
   );

From 1c91ae522c453bad75f9e2789efe6b34a394096d Mon Sep 17 00:00:00 2001
From: Daniel Languiller <dlanguiller@microsoft.com>
Date: Mon, 3 Nov 2025 15:41:22 +1100
Subject: [PATCH 19/31] refactor: update ArgumentDialog to be using new pattern

---
 src/web/src/services/commandApi.ts            | 25 +++++++----
 .../ArgumentDialog.tsx                        | 41 ++++++++-----------
 2 files changed, 34 insertions(+), 32 deletions(-)

diff --git a/src/web/src/services/commandApi.ts b/src/web/src/services/commandApi.ts
index 415e4cd4..a0afd7d0 100644
--- a/src/web/src/services/commandApi.ts
+++ b/src/web/src/services/commandApi.ts
@@ -65,12 +65,18 @@ export const commandApi = {
     },
   },
 
-  updateCommandArgument: async (argumentUrl: string, data: any): Promise<void> => {
-    await axios.patch(argumentUrl, data);
+  updateCommandArgument: {
+    loadingMessage: "Updating command argument...",
+    fn: async (argumentUrl: string, data: any): Promise<void> => {
+      await axios.patch(argumentUrl, data);
+    },
   },
 
-  updateArgumentById: async (argId: string, data: any): Promise<void> => {
-    await axios.patch(argId, data);
+  updateArgumentById: {
+    loadingMessage: "Updating argument...",
+    fn: async (argId: string, data: any): Promise<void> => {
+      await axios.patch(argId, data);
+    },
   },
 
   flattenArgument: async (flattenUrl: string, data?: any): Promise<void> => {
@@ -102,10 +108,13 @@ export const commandApi = {
     return res.data;
   },
 
-  findSimilarArguments: async (commandUrl: string, argVar: string): Promise<any> => {
-    const similarUrl = `${commandUrl}/Arguments/${argVar}/FindSimilar`;
-    const res = await axios.post(similarUrl);
-    return res.data;
+  findSimilarArguments: {
+    loadingMessage: "Finding similar arguments...",
+    fn: async (commandUrl: string, argVar: string): Promise<any> => {
+      const similarUrl = `${commandUrl}/Arguments/${argVar}/FindSimilar`;
+      const res = await axios.post(similarUrl);
+      return res.data;
+    },
   },
 
   createSubresource: async (
diff --git a/src/web/src/views/workspace/components/WSEditorCommandArgumentsContent/ArgumentDialog.tsx b/src/web/src/views/workspace/components/WSEditorCommandArgumentsContent/ArgumentDialog.tsx
index f9f647b0..415d1366 100644
--- a/src/web/src/views/workspace/components/WSEditorCommandArgumentsContent/ArgumentDialog.tsx
+++ b/src/web/src/views/workspace/components/WSEditorCommandArgumentsContent/ArgumentDialog.tsx
@@ -9,7 +9,6 @@ import {
   DialogTitle,
   FormControlLabel,
   InputLabel,
-  LinearProgress,
   Radio,
   RadioGroup,
   Switch,
@@ -17,6 +16,8 @@ import {
 } from "@mui/material";
 
 import { commandApi, errorHandlerApi } from "../../../../services";
+import { useAsyncOperation } from "../../../../services/hooks";
+import { AsyncOperationBanner } from "../../../../components";
 import React, { useEffect, useState } from "react";
 import WSECArgumentSimilarPicker, { ArgSimilarTree, BuildArgSimilarTree } from "./WSECArgumentSimilarPicker";
 import { convertArgDefaultText } from "../../utils/convertArgDefaultText";
@@ -131,7 +132,13 @@ interface ArgumentDialogProps {
 }
 
 const ArgumentDialog: React.FC<ArgumentDialogProps> = (props) => {
-  const [updating, setUpdating] = useState<boolean>(false);
+  const updateArgumentOperation = useAsyncOperation(commandApi.updateCommandArgument);
+  const findSimilarOperation = useAsyncOperation(commandApi.findSimilarArguments);
+  const updateArgumentByIdOperation = useAsyncOperation(commandApi.updateArgumentById);
+
+  const isLoading =
+    updateArgumentOperation.loading || findSimilarOperation.loading || updateArgumentByIdOperation.loading;
+
   const [stage, setStage] = useState<string>("");
   const [invalidText, setInvalidText] = useState<string | undefined>(undefined);
   const [options, setOptions] = useState<string>("");
@@ -292,18 +299,14 @@ const ArgumentDialog: React.FC<ArgumentDialogProps> = (props) => {
       return;
     }
 
-    setUpdating(true);
-
     const argumentUrl = `${props.commandUrl}/Arguments/${props.arg.var}`;
 
     try {
-      await commandApi.updateCommandArgument(argumentUrl, data);
-      setUpdating(false);
+      await updateArgumentOperation.execute(argumentUrl, data);
       await props.onClose(true);
     } catch (err: any) {
       console.error(err);
       setInvalidText(errorHandlerApi.getErrorMessage(err));
-      setUpdating(false);
     }
   };
 
@@ -312,11 +315,8 @@ const ArgumentDialog: React.FC<ArgumentDialogProps> = (props) => {
       return;
     }
 
-    setUpdating(true);
-
     try {
-      const res = await commandApi.findSimilarArguments(props.commandUrl, props.arg.var);
-      setUpdating(false);
+      const res = await findSimilarOperation.execute(props.commandUrl, props.arg.var);
       const { tree, expandedIds } = BuildArgSimilarTree(res);
       setArgSimilarTree(tree);
       setArgSimilarTreeExpandedIds(expandedIds);
@@ -324,7 +324,6 @@ const ArgumentDialog: React.FC<ArgumentDialogProps> = (props) => {
     } catch (err: any) {
       console.error(err);
       setInvalidText(errorHandlerApi.getErrorMessage(err));
-      setUpdating(false);
     }
   };
 
@@ -347,14 +346,13 @@ const ArgumentDialog: React.FC<ArgumentDialogProps> = (props) => {
       return;
     }
 
-    setUpdating(true);
     let invalidText = "";
     const updatedIds: string[] = [...argSimilarTreeArgIdsUpdated];
     for (const idx in argSimilarTree!.selectedArgIds) {
       const argId = argSimilarTree!.selectedArgIds[idx];
       if (updatedIds.indexOf(argId) === -1) {
         try {
-          await commandApi.updateArgumentById(argId, data);
+          await updateArgumentByIdOperation.execute(argId, data);
           updatedIds.push(argId);
           setArgSimilarTreeArgIdsUpdated([...updatedIds]);
         } catch (err: any) {
@@ -366,9 +364,7 @@ const ArgumentDialog: React.FC<ArgumentDialogProps> = (props) => {
 
     if (invalidText.length > 0) {
       setInvalidText(invalidText);
-      setUpdating(false);
     } else {
-      setUpdating(false);
       await props.onClose(true);
     }
   };
@@ -410,7 +406,6 @@ const ArgumentDialog: React.FC<ArgumentDialogProps> = (props) => {
     setShortHelp(props.arg.help?.short ?? "");
     setLongHelp(props.arg.help?.lines?.join("\n") ?? "");
     setConfigurationKey(props.arg.configurationKey ?? "");
-    setUpdating(false);
     setArgSimilarTree(undefined);
     setArgSimilarTreeExpandedIds([]);
 
@@ -719,12 +714,10 @@ const ArgumentDialog: React.FC<ArgumentDialogProps> = (props) => {
         </>
       )}
       <DialogActions>
-        {updating && (
-          <Box sx={{ width: "100%" }}>
-            <LinearProgress color="secondary" />
-          </Box>
-        )}
-        {!updating && !argSimilarTree && (
+        <AsyncOperationBanner operation={updateArgumentOperation} />
+        <AsyncOperationBanner operation={findSimilarOperation} />
+        <AsyncOperationBanner operation={updateArgumentByIdOperation} />
+        {!isLoading && !argSimilarTree && (
           <>
             <Button onClick={handleClose}>Cancel</Button>
             {!props.arg.var.startsWith("@") && (
@@ -733,7 +726,7 @@ const ArgumentDialog: React.FC<ArgumentDialogProps> = (props) => {
             {!isClientArg && <Button onClick={handleDisplaySimilar}>Update Similar</Button>}
           </>
         )}
-        {!updating && argSimilarTree && (
+        {!isLoading && argSimilarTree && (
           <>
             <Button onClick={handleDisableSimilar}>Back</Button>
             <Button onClick={handleModifySimilar} disabled={argSimilarTree.selectedArgIds.length === 0}>

From deba26fac3c1730065b9eddfb2b54c19515e123f Mon Sep 17 00:00:00 2001
From: Daniel Languiller <dlanguiller@microsoft.com>
Date: Mon, 3 Nov 2025 16:56:35 +1100
Subject: [PATCH 20/31] refactor: update deleteWorkspace usages to new loading
 pattern

---
 .../src/__tests__/api/workspaceApi.test.tsx   |  4 ++-
 .../components/WorkspaceSelector.test.tsx     | 11 +++++--
 src/web/src/services/commandApi.ts            |  8 ++++-
 src/web/src/services/workspaceApi.ts          |  9 ++++--
 .../WSEditor/WSEditorDeleteDialog.tsx         | 30 +++++--------------
 .../ArgumentDialog.tsx                        |  2 +-
 6 files changed, 33 insertions(+), 31 deletions(-)

diff --git a/src/web/src/__tests__/api/workspaceApi.test.tsx b/src/web/src/__tests__/api/workspaceApi.test.tsx
index 0d7058ca..54c92dd1 100644
--- a/src/web/src/__tests__/api/workspaceApi.test.tsx
+++ b/src/web/src/__tests__/api/workspaceApi.test.tsx
@@ -77,7 +77,9 @@ describe("Workspace API", () => {
 
   describe("deleteWorkspace", () => {
     it("should delete workspace by name", async () => {
-      await expect(workspaceApi.deleteWorkspace("test-workspace-1")).resolves.toBeUndefined();
+      const operation = workspaceApi.deleteWorkspace;
+      expect(operation.loadingMessage).toBe("Deleting workspace...");
+      await expect(operation.fn("test-workspace-1")).resolves.toBeUndefined();
     });
   });
 
diff --git a/src/web/src/__tests__/components/WorkspaceSelector.test.tsx b/src/web/src/__tests__/components/WorkspaceSelector.test.tsx
index 5efbcdba..98b40c6b 100644
--- a/src/web/src/__tests__/components/WorkspaceSelector.test.tsx
+++ b/src/web/src/__tests__/components/WorkspaceSelector.test.tsx
@@ -281,11 +281,16 @@ describe("Workspace Management", () => {
     });
 
     it("should delete workspace successfully", async () => {
-      (workspaceApi.deleteWorkspace as any).mockResolvedValue(undefined);
+      const mockOperation = {
+        loadingMessage: "Deleting workspace...",
+        fn: vi.fn().mockResolvedValue(undefined),
+      };
+      (workspaceApi.deleteWorkspace as any) = mockOperation;
 
-      await workspaceApi.deleteWorkspace("test-workspace-1");
+      await workspaceApi.deleteWorkspace.fn("test-workspace-1");
 
-      expect(workspaceApi.deleteWorkspace).toHaveBeenCalledWith("test-workspace-1");
+      expect(workspaceApi.deleteWorkspace.fn).toHaveBeenCalledWith("test-workspace-1");
+      expect(workspaceApi.deleteWorkspace.loadingMessage).toBe("Deleting workspace...");
     });
 
     it("should rename workspace successfully", async () => {
diff --git a/src/web/src/services/commandApi.ts b/src/web/src/services/commandApi.ts
index a0afd7d0..3c39f34d 100644
--- a/src/web/src/services/commandApi.ts
+++ b/src/web/src/services/commandApi.ts
@@ -108,7 +108,13 @@ export const commandApi = {
     return res.data;
   },
 
-  findSimilarArguments: {
+  findSimilarArguments: async (commandUrl: string, argVar: string): Promise<any> => {
+    const similarUrl = `${commandUrl}/Arguments/${argVar}/FindSimilar`;
+    const res = await axios.post(similarUrl);
+    return res.data;
+  },
+
+  findSimilarArgumentsOperation: {
     loadingMessage: "Finding similar arguments...",
     fn: async (commandUrl: string, argVar: string): Promise<any> => {
       const similarUrl = `${commandUrl}/Arguments/${argVar}/FindSimilar`;
diff --git a/src/web/src/services/workspaceApi.ts b/src/web/src/services/workspaceApi.ts
index cf5eff56..60fecb7e 100644
--- a/src/web/src/services/workspaceApi.ts
+++ b/src/web/src/services/workspaceApi.ts
@@ -56,9 +56,12 @@ export const workspaceApi = {
     return res.data;
   },
 
-  deleteWorkspace: async (workspaceName: string): Promise<void> => {
-    const nodeUrl = `/AAZ/Editor/Workspaces/${workspaceName}`;
-    await axios.delete(nodeUrl);
+  deleteWorkspace: {
+    loadingMessage: "Deleting workspace...",
+    fn: async (workspaceName: string): Promise<void> => {
+      const nodeUrl = `/AAZ/Editor/Workspaces/${workspaceName}`;
+      await axios.delete(nodeUrl);
+    },
   },
 
   renameWorkspace: async (workspaceUrl: string, newName: string): Promise<{ name: string }> => {
diff --git a/src/web/src/views/workspace/components/WSEditor/WSEditorDeleteDialog.tsx b/src/web/src/views/workspace/components/WSEditor/WSEditorDeleteDialog.tsx
index fe05557a..d77783b2 100644
--- a/src/web/src/views/workspace/components/WSEditor/WSEditorDeleteDialog.tsx
+++ b/src/web/src/views/workspace/components/WSEditor/WSEditorDeleteDialog.tsx
@@ -1,16 +1,8 @@
 import React, { useState, Fragment } from "react";
-import {
-  Box,
-  Dialog,
-  DialogTitle,
-  DialogContent,
-  DialogActions,
-  LinearProgress,
-  Button,
-  TextField,
-  Alert,
-} from "@mui/material";
+import { Dialog, DialogTitle, DialogContent, DialogActions, Button, TextField, Alert } from "@mui/material";
 import { workspaceApi, errorHandlerApi } from "../../../../services";
+import { useAsyncOperation } from "../../../../services/hooks";
+import { AsyncOperationBanner } from "../../../../components";
 
 interface WSEditorDeleteDialogProps {
   workspaceName: string;
@@ -19,24 +11,22 @@ interface WSEditorDeleteDialogProps {
 }
 
 const WSEditorDeleteDialog: React.FC<WSEditorDeleteDialogProps> = ({ workspaceName, open, onClose }) => {
-  const [updating, setUpdating] = useState<boolean>(false);
   const [invalidText, setInvalidText] = useState<string | undefined>(undefined);
   const [confirmName, setConfirmName] = useState<string | undefined>(undefined);
 
+  const deleteWorkspaceOperation = useAsyncOperation(workspaceApi.deleteWorkspace);
+
   const handleClose = () => {
     onClose(false);
   };
 
   const handleDelete = async () => {
-    setUpdating(true);
     try {
-      await workspaceApi.deleteWorkspace(workspaceName);
-      setUpdating(false);
+      await deleteWorkspaceOperation.execute(workspaceName);
       onClose(true);
     } catch (err: any) {
       console.error(err);
       setInvalidText(errorHandlerApi.getErrorMessage(err));
-      setUpdating(false);
     }
   };
 
@@ -66,12 +56,8 @@ const WSEditorDeleteDialog: React.FC<WSEditorDeleteDialogProps> = ({ workspaceNa
         />
       </DialogContent>
       <DialogActions>
-        {updating && (
-          <Box sx={{ width: "100%" }}>
-            <LinearProgress color="secondary" />
-          </Box>
-        )}
-        {!updating && (
+        <AsyncOperationBanner operation={deleteWorkspaceOperation} />
+        {!deleteWorkspaceOperation.loading && (
           <Fragment>
             <Button onClick={handleClose}>Cancel</Button>
             <Button onClick={handleDelete} disabled={workspaceName !== confirmName}>
diff --git a/src/web/src/views/workspace/components/WSEditorCommandArgumentsContent/ArgumentDialog.tsx b/src/web/src/views/workspace/components/WSEditorCommandArgumentsContent/ArgumentDialog.tsx
index 415d1366..2fa64c21 100644
--- a/src/web/src/views/workspace/components/WSEditorCommandArgumentsContent/ArgumentDialog.tsx
+++ b/src/web/src/views/workspace/components/WSEditorCommandArgumentsContent/ArgumentDialog.tsx
@@ -133,7 +133,7 @@ interface ArgumentDialogProps {
 
 const ArgumentDialog: React.FC<ArgumentDialogProps> = (props) => {
   const updateArgumentOperation = useAsyncOperation(commandApi.updateCommandArgument);
-  const findSimilarOperation = useAsyncOperation(commandApi.findSimilarArguments);
+  const findSimilarOperation = useAsyncOperation(commandApi.findSimilarArgumentsOperation);
   const updateArgumentByIdOperation = useAsyncOperation(commandApi.updateArgumentById);
 
   const isLoading =

From dc395ba22fe462a27261f944c8545d5c7e0dea6f Mon Sep 17 00:00:00 2001
From: Daniel Languiller <dlanguiller@microsoft.com>
Date: Mon, 3 Nov 2025 17:25:56 +1100
Subject: [PATCH 21/31] refactor: update renameWorkspace to use new loading
 pattern

---
 .../src/__tests__/api/workspaceApi.test.tsx   |  5 ++-
 .../components/WorkspaceSelector.test.tsx     | 10 ++++--
 src/web/src/services/workspaceApi.ts          |  9 +++--
 .../components/WSEditor/WSRenameDialog.tsx    | 33 +++++--------------
 4 files changed, 26 insertions(+), 31 deletions(-)

diff --git a/src/web/src/__tests__/api/workspaceApi.test.tsx b/src/web/src/__tests__/api/workspaceApi.test.tsx
index 54c92dd1..443a089c 100644
--- a/src/web/src/__tests__/api/workspaceApi.test.tsx
+++ b/src/web/src/__tests__/api/workspaceApi.test.tsx
@@ -85,7 +85,10 @@ describe("Workspace API", () => {
 
   describe("renameWorkspace", () => {
     it("should rename workspace and return new name", async () => {
-      const result = await workspaceApi.renameWorkspace("/AAZ/Editor/Workspaces/test-workspace-1", "renamed-workspace");
+      const operation = workspaceApi.renameWorkspace;
+      expect(operation.loadingMessage).toBe("Renaming workspace...");
+
+      const result = await operation.fn("/AAZ/Editor/Workspaces/test-workspace-1", "renamed-workspace");
 
       expect(result).toEqual({
         name: "renamed-workspace",
diff --git a/src/web/src/__tests__/components/WorkspaceSelector.test.tsx b/src/web/src/__tests__/components/WorkspaceSelector.test.tsx
index 98b40c6b..6c926826 100644
--- a/src/web/src/__tests__/components/WorkspaceSelector.test.tsx
+++ b/src/web/src/__tests__/components/WorkspaceSelector.test.tsx
@@ -295,11 +295,15 @@ describe("Workspace Management", () => {
 
     it("should rename workspace successfully", async () => {
       const expectedResult = { name: "renamed-workspace" };
-      (workspaceApi.renameWorkspace as any).mockResolvedValue(expectedResult);
+      const mockFn = vi.fn().mockResolvedValue(expectedResult);
+      (workspaceApi.renameWorkspace as any) = {
+        loadingMessage: "Renaming workspace...",
+        fn: mockFn,
+      };
 
-      const result = await workspaceApi.renameWorkspace("/workspace/test-workspace-1", "renamed-workspace");
+      const result = await workspaceApi.renameWorkspace.fn("/workspace/test-workspace-1", "renamed-workspace");
 
-      expect(workspaceApi.renameWorkspace).toHaveBeenCalledWith("/workspace/test-workspace-1", "renamed-workspace");
+      expect(mockFn).toHaveBeenCalledWith("/workspace/test-workspace-1", "renamed-workspace");
       expect(result).toEqual(expectedResult);
     });
   });
diff --git a/src/web/src/services/workspaceApi.ts b/src/web/src/services/workspaceApi.ts
index 60fecb7e..4dbc4216 100644
--- a/src/web/src/services/workspaceApi.ts
+++ b/src/web/src/services/workspaceApi.ts
@@ -64,9 +64,12 @@ export const workspaceApi = {
     },
   },
 
-  renameWorkspace: async (workspaceUrl: string, newName: string): Promise<{ name: string }> => {
-    const res = await axios.post(`${workspaceUrl}/Rename`, { name: newName });
-    return res.data;
+  renameWorkspace: {
+    loadingMessage: "Renaming workspace...",
+    fn: async (workspaceUrl: string, newName: string): Promise<{ name: string }> => {
+      const res = await axios.post(`${workspaceUrl}/Rename`, { name: newName });
+      return res.data;
+    },
   },
 
   getWorkspaceClientConfig: async (workspaceUrl: string): Promise<ClientConfig | null> => {
diff --git a/src/web/src/views/workspace/components/WSEditor/WSRenameDialog.tsx b/src/web/src/views/workspace/components/WSEditor/WSRenameDialog.tsx
index e701f569..42b2c06f 100644
--- a/src/web/src/views/workspace/components/WSEditor/WSRenameDialog.tsx
+++ b/src/web/src/views/workspace/components/WSEditor/WSRenameDialog.tsx
@@ -1,16 +1,8 @@
 import React, { useState, Fragment } from "react";
-import {
-  Box,
-  Dialog,
-  DialogTitle,
-  DialogContent,
-  DialogActions,
-  LinearProgress,
-  Button,
-  TextField,
-  Alert,
-} from "@mui/material";
+import { Dialog, DialogTitle, DialogContent, DialogActions, Button, TextField, Alert } from "@mui/material";
 import { workspaceApi, errorHandlerApi } from "../../../../services";
+import { useAsyncOperation } from "../../../../services/hooks";
+import { AsyncOperationBanner } from "../../../../components";
 
 interface WSRenameDialogProps {
   workspaceUrl: string;
@@ -22,7 +14,8 @@ interface WSRenameDialogProps {
 const WSRenameDialog: React.FC<WSRenameDialogProps> = ({ workspaceUrl, workspaceName, open, onClose }) => {
   const [newWSName, setNewWSName] = useState<string>(workspaceName);
   const [invalidText, setInvalidText] = useState<string | undefined>(undefined);
-  const [updating, setUpdating] = useState<boolean>(false);
+
+  const renameWorkspaceOperation = useAsyncOperation(workspaceApi.renameWorkspace);
 
   const handleModify = async () => {
     const nName = newWSName.trim();
@@ -32,18 +25,14 @@ const WSRenameDialog: React.FC<WSRenameDialogProps> = ({ workspaceUrl, workspace
     }
 
     setInvalidText(undefined);
-    setUpdating(true);
 
     if (workspaceName === nName) {
-      setUpdating(false);
       onClose(null);
     } else {
       try {
-        const res = await workspaceApi.renameWorkspace(workspaceUrl, nName);
-        setUpdating(false);
-        onClose(res.name);
+        const res = await renameWorkspaceOperation.execute(workspaceUrl, nName);
+        onClose(res?.name || nName);
       } catch (err: any) {
-        setUpdating(false);
         setInvalidText(errorHandlerApi.getErrorMessage(err));
       }
     }
@@ -79,12 +68,8 @@ const WSRenameDialog: React.FC<WSRenameDialogProps> = ({ workspaceUrl, workspace
         />
       </DialogContent>
       <DialogActions>
-        {updating && (
-          <Box sx={{ width: "100%" }}>
-            <LinearProgress color="secondary" />
-          </Box>
-        )}
-        {!updating && (
+        <AsyncOperationBanner operation={renameWorkspaceOperation} />
+        {!renameWorkspaceOperation.loading && (
           <Fragment>
             <Button onClick={handleClose}>Cancel</Button>
             <Button onClick={handleModify}>Save</Button>

From 6f9721e0610169bb8e2a9790fb33870e66342086 Mon Sep 17 00:00:00 2001
From: Daniel Languiller <dlanguiller@microsoft.com>
Date: Mon, 3 Nov 2025 17:56:11 +1100
Subject: [PATCH 22/31] refactor: update deleteCommandgroup to use new loading
 pattern

---
 .../WSEditorCommandGroupContent.test.tsx      | 25 ++++++++++++----
 src/web/src/services/commandApi.ts            |  7 +++--
 .../CommandGroupDeleteDialog.tsx              | 30 +++++--------------
 3 files changed, 32 insertions(+), 30 deletions(-)

diff --git a/src/web/src/__tests__/components/WSEditorCommandGroupContent.test.tsx b/src/web/src/__tests__/components/WSEditorCommandGroupContent.test.tsx
index 0565e713..931830a2 100644
--- a/src/web/src/__tests__/components/WSEditorCommandGroupContent.test.tsx
+++ b/src/web/src/__tests__/components/WSEditorCommandGroupContent.test.tsx
@@ -2,7 +2,7 @@ import { render, screen, waitFor, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { vi } from "vitest";
 import WSEditorCommandGroupContent from "../../views/workspace/components/WSEditorCommandGroupContent/WSEditorCommandGroupContent";
-import * as commandApi from "../../services/commandApi";
+import { commandApi } from "../../services";
 
 interface CommandGroup {
   id: string;
@@ -15,10 +15,22 @@ interface CommandGroup {
   canDelete: boolean;
 }
 
-vi.mock("../../services/commandApi");
-vi.mock("../../services/errorHandlerApi");
+vi.mock("../../services", () => ({
+  commandApi: {
+    deleteCommandGroup: {
+      loadingMessage: "Deleting command group...",
+      fn: vi.fn(),
+    },
+    updateCommandGroup: vi.fn(),
+    renameCommandGroup: vi.fn(),
+  },
+  errorHandlerApi: {
+    getErrorMessage: vi.fn(),
+  },
+}));
 
 const mockCommandApi = commandApi as any;
+
 describe("WSEditorCommandGroupContent", () => {
   const mockWorkspaceUrl = "https://test-workspace.com/workspace/ws1";
 
@@ -37,6 +49,7 @@ describe("WSEditorCommandGroupContent", () => {
 
   beforeEach(() => {
     vi.clearAllMocks();
+    mockCommandApi.deleteCommandGroup.fn.mockResolvedValue(undefined);
   });
 
   describe("Core Rendering", () => {
@@ -270,7 +283,7 @@ describe("WSEditorCommandGroupContent", () => {
       await user.click(confirmDeleteButton);
 
       await waitFor(() => {
-        expect(mockCommandApi.deleteCommandGroup).toHaveBeenCalled();
+        expect(mockCommandApi.deleteCommandGroup.fn).toHaveBeenCalled();
         expect(mockOnUpdateCommandGroup).toHaveBeenCalledWith(null);
       });
     });
@@ -313,7 +326,7 @@ describe("WSEditorCommandGroupContent", () => {
       const user = userEvent.setup();
       const mockError = new Error("Delete failed");
 
-      mockCommandApi.deleteCommandGroup.mockRejectedValue(mockError);
+      mockCommandApi.deleteCommandGroup.fn.mockRejectedValue(mockError);
 
       render(
         <WSEditorCommandGroupContent
@@ -335,7 +348,7 @@ describe("WSEditorCommandGroupContent", () => {
       await user.click(confirmDeleteButton);
 
       await waitFor(() => {
-        expect(mockCommandApi.deleteCommandGroup).toHaveBeenCalled();
+        expect(mockCommandApi.deleteCommandGroup.fn).toHaveBeenCalled();
       });
     });
 
diff --git a/src/web/src/services/commandApi.ts b/src/web/src/services/commandApi.ts
index 3c39f34d..2d80694a 100644
--- a/src/web/src/services/commandApi.ts
+++ b/src/web/src/services/commandApi.ts
@@ -91,8 +91,11 @@ export const commandApi = {
     await axios.post(flattenUrl);
   },
 
-  deleteCommandGroup: async (nodeUrl: string): Promise<void> => {
-    await axios.delete(nodeUrl);
+  deleteCommandGroup: {
+    loadingMessage: "Deleting command group...",
+    fn: async (nodeUrl: string): Promise<void> => {
+      await axios.delete(nodeUrl);
+    },
   },
 
   updateCommandGroup: async (
diff --git a/src/web/src/views/workspace/components/WSEditorCommandGroupContent/CommandGroupDeleteDialog.tsx b/src/web/src/views/workspace/components/WSEditorCommandGroupContent/CommandGroupDeleteDialog.tsx
index 5999a67d..77d29b06 100644
--- a/src/web/src/views/workspace/components/WSEditorCommandGroupContent/CommandGroupDeleteDialog.tsx
+++ b/src/web/src/views/workspace/components/WSEditorCommandGroupContent/CommandGroupDeleteDialog.tsx
@@ -1,14 +1,7 @@
-import {
-  Box,
-  Button,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogTitle,
-  LinearProgress,
-  Typography,
-} from "@mui/material";
+import { Button, Dialog, DialogActions, DialogContent, DialogTitle, Typography } from "@mui/material";
 import { commandApi } from "../../../../services";
+import { useAsyncOperation } from "../../../../services/hooks";
+import { AsyncOperationBanner } from "../../../../components";
 import * as React from "react";
 import { COMMAND_PREFIX } from "../../../../constants";
 import type { CommandGroup } from "../../interfaces";
@@ -26,7 +19,7 @@ const CommandGroupDeleteDialog: React.FC<CommandGroupDeleteDialogProps> = ({
   commandGroup,
   onClose,
 }) => {
-  const [updating, setUpdating] = React.useState<boolean>(false);
+  const deleteCommandGroupOperation = useAsyncOperation(commandApi.deleteCommandGroup);
 
   const handleClose = React.useCallback(() => {
     onClose(false);
@@ -34,31 +27,24 @@ const CommandGroupDeleteDialog: React.FC<CommandGroupDeleteDialogProps> = ({
 
   const handleDelete = React.useCallback(async () => {
     const nodeUrl = `${workspaceUrl}/CommandTree/Nodes/aaz/${commandGroup.names.join("/")}`;
-    setUpdating(true);
 
     try {
-      await commandApi.deleteCommandGroup(nodeUrl);
-      setUpdating(false);
+      await deleteCommandGroupOperation.execute(nodeUrl);
       onClose(true);
     } catch (err: any) {
-      setUpdating(false);
       console.error(err);
     }
-  }, [workspaceUrl, commandGroup.names, onClose]);
+  }, [workspaceUrl, commandGroup.names, onClose, deleteCommandGroupOperation]);
 
   return (
     <Dialog disableEscapeKeyDown open={open}>
       <DialogTitle>Delete Command Group</DialogTitle>
       <DialogContent dividers={true}>
+        <AsyncOperationBanner operation={deleteCommandGroupOperation} />
         <Typography variant="body2">{`${COMMAND_PREFIX}${commandGroup.names.join(" ")}`}</Typography>
       </DialogContent>
       <DialogActions>
-        {updating && (
-          <Box sx={{ width: "100%" }}>
-            <LinearProgress color="secondary" />
-          </Box>
-        )}
-        {!updating && (
+        {!deleteCommandGroupOperation.loading && (
           <React.Fragment>
             <Button onClick={handleClose}>Cancel</Button>
             <Button onClick={handleDelete}>Delete</Button>

From 52bf0f0716cd0b7ff5364c2cef8383aabc18ccfc Mon Sep 17 00:00:00 2001
From: Daniel Languiller <dlanguiller@microsoft.com>
Date: Mon, 3 Nov 2025 18:18:53 +1100
Subject: [PATCH 23/31] refactor: change loading message for loading resrouces

---
 .../__tests__/components/WSEditorClientConfig.test.tsx    | 6 +++++-
 .../__tests__/components/WSEditorSwaggerPicker.test.tsx   | 6 +++---
 src/web/src/services/specsApi.ts                          | 4 ++--
 .../components/WSEditor/WSEditorClientConfig.tsx          | 6 +++---
 .../WSEditorSwaggerPicker/WSEditorSwaggerPicker.tsx       | 6 +++---
 .../WorkspaceInstruction/WorkspaceCreateDialog.tsx        | 8 ++++----
 6 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/src/web/src/__tests__/components/WSEditorClientConfig.test.tsx b/src/web/src/__tests__/components/WSEditorClientConfig.test.tsx
index d273c081..a824f73e 100644
--- a/src/web/src/__tests__/components/WSEditorClientConfig.test.tsx
+++ b/src/web/src/__tests__/components/WSEditorClientConfig.test.tsx
@@ -16,6 +16,10 @@ vi.mock("../../services", () => ({
       loadingMessage: "Loading modules for plane...",
       fn: vi.fn(),
     },
+    getResourcesForWorkspace: {
+      loadingMessage: "Loading resources...",
+      fn: vi.fn(),
+    },
     getResourceProviders: vi.fn(),
     getProviderResources: vi.fn(),
   },
@@ -57,7 +61,7 @@ describe("WSEditorClientConfigDialog", () => {
   beforeEach(() => {
     vi.clearAllMocks();
     (specsApi.getPlanes as any).mockResolvedValue(mockPlanes);
-    (specsApi.getModulesForPlane.fn as any).mockResolvedValue(["storage", "compute"]);
+    (specsApi.getResourcesForWorkspace.fn as any).mockResolvedValue(["storage", "compute"]);
     (specsApi.getResourceProviders as any).mockResolvedValue(mockResourceProviders);
     (specsApi.getProviderResources as any).mockResolvedValue(mockProviderResources);
     (errorHandlerApi.getErrorMessage as any).mockReturnValue("Mock error message");
diff --git a/src/web/src/__tests__/components/WSEditorSwaggerPicker.test.tsx b/src/web/src/__tests__/components/WSEditorSwaggerPicker.test.tsx
index 21ee075d..1cc249fc 100644
--- a/src/web/src/__tests__/components/WSEditorSwaggerPicker.test.tsx
+++ b/src/web/src/__tests__/components/WSEditorSwaggerPicker.test.tsx
@@ -84,8 +84,8 @@ describe("WSEditorSwaggerPicker", () => {
     vi.mocked(workspaceApi).addSwaggerResources.mockResolvedValue(undefined);
     vi.mocked(workspaceApi).addTypespecResources.mockResolvedValue(undefined);
 
-    vi.mocked(specsApi).getModulesForPlane = {
-      loadingMessage: "Loading modules for plane...",
+    vi.mocked(specsApi).getResourcesForWorkspace = {
+      loadingMessage: "Loading resources...",
       fn: vi.fn().mockResolvedValue(mockModules),
     };
     vi.mocked(specsApi).getResourceProvidersWithType.mockResolvedValue(mockResourceProviders);
@@ -129,7 +129,7 @@ describe("WSEditorSwaggerPicker", () => {
       render(<WSEditorSwaggerPicker {...defaultProps} />);
 
       await waitFor(() => {
-        expect(vi.mocked(specsApi).getModulesForPlane.fn).toHaveBeenCalledWith("ResourceManagement");
+        expect(vi.mocked(specsApi).getResourcesForWorkspace.fn).toHaveBeenCalledWith("ResourceManagement");
       });
     });
 
diff --git a/src/web/src/services/specsApi.ts b/src/web/src/services/specsApi.ts
index 6f8fa05a..3bc0bc6a 100644
--- a/src/web/src/services/specsApi.ts
+++ b/src/web/src/services/specsApi.ts
@@ -26,8 +26,8 @@ export const specsApi = {
     return res.data.map((v: any) => v.name);
   },
 
-  getModulesForPlane: {
-    loadingMessage: "Loading modules for plane...",
+  getResourcesForWorkspace: {
+    loadingMessage: "Loading resources...",
     fn: async (planeName: string): Promise<string[]> => {
       const res = await axios.get(`/Swagger/Specs/${planeName}`);
       return res.data.map((v: any) => v.url);
diff --git a/src/web/src/views/workspace/components/WSEditor/WSEditorClientConfig.tsx b/src/web/src/views/workspace/components/WSEditor/WSEditorClientConfig.tsx
index 0104fe7c..615d08de 100644
--- a/src/web/src/views/workspace/components/WSEditor/WSEditorClientConfig.tsx
+++ b/src/web/src/views/workspace/components/WSEditor/WSEditorClientConfig.tsx
@@ -70,7 +70,7 @@ const WSEditorClientConfigDialog: React.FC<WSEditorClientConfigDialogProps> = ({
   const [invalidText, setInvalidText] = useState<string | undefined>(undefined);
   const [isAdd, setIsAdd] = useState(true);
 
-  const modulesLoader = useAsyncOperation(specsApi.getModulesForPlane);
+  const resourcesLoader = useAsyncOperation(specsApi.getResourcesForWorkspace);
 
   const [endpointType, setEndpointType] = useState<"template" | "http-operation">("template");
 
@@ -129,7 +129,7 @@ const WSEditorClientConfigDialog: React.FC<WSEditorClientConfigDialogProps> = ({
         await onModuleSelectionUpdate(null);
       } else {
         try {
-          const options = await modulesLoader.execute(plane!.name);
+          const options = await resourcesLoader.execute(plane!.name);
           setModuleOptions(options || []);
           setModuleOptionsCommonPrefix(`/Swagger/Specs/${plane!.name}/`);
           await onModuleSelectionUpdate(null);
@@ -729,7 +729,7 @@ const WSEditorClientConfigDialog: React.FC<WSEditorClientConfigDialogProps> = ({
                 pb: 2,
               }}
             >
-              <AsyncOperationBanner operation={modulesLoader} />
+              <AsyncOperationBanner operation={resourcesLoader} />
               <SwaggerItemSelector
                 name="Module"
                 commonPrefix={moduleOptionsCommonPrefix}
diff --git a/src/web/src/views/workspace/components/WSEditorSwaggerPicker/WSEditorSwaggerPicker.tsx b/src/web/src/views/workspace/components/WSEditorSwaggerPicker/WSEditorSwaggerPicker.tsx
index 5e51f345..da905bd2 100644
--- a/src/web/src/views/workspace/components/WSEditorSwaggerPicker/WSEditorSwaggerPicker.tsx
+++ b/src/web/src/views/workspace/components/WSEditorSwaggerPicker/WSEditorSwaggerPicker.tsx
@@ -89,7 +89,7 @@ const UpdateOptions = ["Default", "Generic(Get&Put) First", "Patch First", "No u
 const WSEditorSwaggerPicker = ({ workspaceName, plane, onClose }: WSEditorSwaggerPickerProps) => {
   const { filterText, updateFilter, filterResources } = useResourceFilter();
 
-  const modulesLoader = useAsyncOperation(specsApi.getModulesForPlane);
+  const resourcesLoader = useAsyncOperation(specsApi.getResourcesForWorkspace);
 
   const [loading, setLoading] = useState(false);
   const [invalidText, setInvalidText] = useState<string | undefined>(undefined);
@@ -120,7 +120,7 @@ const WSEditorSwaggerPicker = ({ workspaceName, plane, onClose }: WSEditorSwagge
       await loadWorkspaceResources();
 
       try {
-        const allModules = await modulesLoader.execute(plane);
+        const allModules = await resourcesLoader.execute(plane);
         setModuleOptions(allModules || []);
         setModuleOptionsCommonPrefix(`/Swagger/Specs/${plane}/`);
 
@@ -611,7 +611,7 @@ const WSEditorSwaggerPicker = ({ workspaceName, plane, onClose }: WSEditorSwagge
         >
           <ListSubheader> Swagger Filters</ListSubheader>
           <MiddlePadding />
-          <AsyncOperationBanner operation={modulesLoader} />
+          <AsyncOperationBanner operation={resourcesLoader} />
           <SwaggerItemSelector
             name="Swagger Module"
             commonPrefix={moduleOptionsCommonPrefix}
diff --git a/src/web/src/views/workspace/components/WorkspaceInstruction/WorkspaceCreateDialog.tsx b/src/web/src/views/workspace/components/WorkspaceInstruction/WorkspaceCreateDialog.tsx
index 9703e537..69ba8685 100644
--- a/src/web/src/views/workspace/components/WorkspaceInstruction/WorkspaceCreateDialog.tsx
+++ b/src/web/src/views/workspace/components/WorkspaceInstruction/WorkspaceCreateDialog.tsx
@@ -28,7 +28,7 @@ const WorkspaceCreateDialog: React.FC<WorkspaceCreateDialogProps> = ({ openDialo
   const [invalidText, setInvalidText] = useState<string | undefined>(undefined);
   const [workspaceName, setWorkspaceName] = useState<string>(name);
 
-  const modulesLoader = useAsyncOperation(specsApi.getModulesForPlane);
+  const resourcesLoader = useAsyncOperation(specsApi.getResourcesForWorkspace);
 
   const [planes, setPlanes] = useState<Plane[]>([]);
   const [planeOptions, setPlaneOptions] = useState<string[]>([]);
@@ -107,7 +107,7 @@ const WorkspaceCreateDialog: React.FC<WorkspaceCreateDialogProps> = ({ openDialo
         await onModuleSelectionUpdate(null);
       } else {
         try {
-          const options = await modulesLoader.execute(plane.name);
+          const options = await resourcesLoader.execute(plane.name);
           setPlanes((prevPlanes) => {
             const updatedPlanes = [...prevPlanes];
             const index = updatedPlanes.findIndex((v: Plane) => v.name === plane.name);
@@ -257,7 +257,7 @@ const WorkspaceCreateDialog: React.FC<WorkspaceCreateDialogProps> = ({ openDialo
             {invalidText}{" "}
           </Alert>
         )}
-        <AsyncOperationBanner operation={modulesLoader} />
+        <AsyncOperationBanner operation={resourcesLoader} />
         <InputLabel shrink> API Specs</InputLabel>
         <Box
           sx={{
@@ -314,7 +314,7 @@ const WorkspaceCreateDialog: React.FC<WorkspaceCreateDialogProps> = ({ openDialo
           <Button
             disabled={
               loading ||
-              modulesLoader.loading ||
+              resourcesLoader.loading ||
               !selectedPlane ||
               !selectedModule ||
               !selectedResourceProvider ||

From f53ca936e02c35e332dbd20ef849eabf72be8cf9 Mon Sep 17 00:00:00 2001
From: Daniel Languiller <dlanguiller@microsoft.com>
Date: Mon, 3 Nov 2025 18:32:57 +1100
Subject: [PATCH 24/31] refactor: change AddSubcommandDialog to use new loading
 pattern

---
 src/web/src/services/commandApi.ts            | 21 +++++++------
 .../AddSubcommandDialog.tsx                   | 31 +++++--------------
 2 files changed, 20 insertions(+), 32 deletions(-)

diff --git a/src/web/src/services/commandApi.ts b/src/web/src/services/commandApi.ts
index 2d80694a..140ef63c 100644
--- a/src/web/src/services/commandApi.ts
+++ b/src/web/src/services/commandApi.ts
@@ -126,15 +126,18 @@ export const commandApi = {
     },
   },
 
-  createSubresource: async (
-    subresourceUrl: string,
-    data: {
-      commandGroupName: string;
-      refArgsOptions: { [argVar: string]: string[] };
-      arg: string;
+  createSubresource: {
+    loadingMessage: "Creating subcommands...",
+    fn: async (
+      subresourceUrl: string,
+      data: {
+        commandGroupName: string;
+        refArgsOptions: { [argVar: string]: string[] };
+        arg: string;
+      },
+    ): Promise<any> => {
+      const response = await axios.post(subresourceUrl, data);
+      return response.data;
     },
-  ): Promise<any> => {
-    const response = await axios.post(subresourceUrl, data);
-    return response.data;
   },
 } as const;
diff --git a/src/web/src/views/workspace/components/WSEditorCommandContent/AddSubcommandDialog.tsx b/src/web/src/views/workspace/components/WSEditorCommandContent/AddSubcommandDialog.tsx
index fb05d1ab..565ef547 100644
--- a/src/web/src/views/workspace/components/WSEditorCommandContent/AddSubcommandDialog.tsx
+++ b/src/web/src/views/workspace/components/WSEditorCommandContent/AddSubcommandDialog.tsx
@@ -1,17 +1,8 @@
-import {
-  Alert,
-  Box,
-  Button,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogTitle,
-  FormLabel,
-  LinearProgress,
-  TextField,
-} from "@mui/material";
+import { Alert, Button, Dialog, DialogActions, DialogContent, DialogTitle, FormLabel, TextField } from "@mui/material";
 import React, { useState, useEffect } from "react";
 import { commandApi, errorHandlerApi } from "../../../../services";
+import { useAsyncOperation } from "../../../../services/hooks";
+import { AsyncOperationBanner } from "../../../../components";
 import type { Command } from "../../interfaces";
 
 export interface AddSubcommandDialogProps {
@@ -33,11 +24,12 @@ const AddSubcommandDialog: React.FC<AddSubcommandDialogProps> = ({
   open,
   onClose,
 }) => {
-  const [updating, setUpdating] = useState<boolean>(false);
   const [invalidText, setInvalidText] = useState<string | undefined>(undefined);
   const [commandGroupName, setCommandGroupName] = useState<string>("");
   const [refArgsOptions, setRefArgsOptions] = useState<{ var: string; options: string }[]>([]);
 
+  const createSubresourceOperation = useAsyncOperation(commandApi.createSubresource);
+
   useEffect(() => {
     setCommandGroupName(defaultGroupNames.join(" "));
     setRefArgsOptions(subArgOptions);
@@ -103,10 +95,8 @@ const AddSubcommandDialog: React.FC<AddSubcommandDialogProps> = ({
       return;
     }
 
-    setUpdating(true);
-
     try {
-      await commandApi.createSubresource(urls[0], {
+      await createSubresourceOperation.execute(urls[0], {
         ...data,
         arg: argVar,
       });
@@ -115,7 +105,6 @@ const AddSubcommandDialog: React.FC<AddSubcommandDialogProps> = ({
       console.error(err);
       const message = errorHandlerApi.getErrorMessage(err);
       setInvalidText(`ResponseError: ${message}`);
-      setUpdating(false);
     }
   };
 
@@ -180,14 +169,10 @@ const AddSubcommandDialog: React.FC<AddSubcommandDialogProps> = ({
             {refArgsOptions.map(buildRefArgText)}
           </>
         )}
+        <AsyncOperationBanner operation={createSubresourceOperation} />
       </DialogContent>
       <DialogActions>
-        {updating && (
-          <Box sx={{ width: "100%" }}>
-            <LinearProgress color="secondary" />
-          </Box>
-        )}
-        {!updating && (
+        {!createSubresourceOperation.loading && (
           <>
             <Button onClick={handleClose}>Cancel</Button>
             <Button onClick={handleAddSubresource}>Add Subcommands</Button>

From 54563ffc0fdb3d115f3bc02eb5836133a9611e2e Mon Sep 17 00:00:00 2001
From: Daniel Languiller <dlanguiller@microsoft.com>
Date: Mon, 3 Nov 2025 18:55:49 +1100
Subject: [PATCH 25/31] refactor: COmmandGroupDialog to new loading pattenr

---
 .../WSEditorCommandGroupContent.test.tsx      | 34 ++++++++++++----
 src/web/src/services/commandApi.ts            | 21 +++++-----
 .../CommandGroupDialog.tsx                    | 39 ++++++++++---------
 3 files changed, 60 insertions(+), 34 deletions(-)

diff --git a/src/web/src/__tests__/components/WSEditorCommandGroupContent.test.tsx b/src/web/src/__tests__/components/WSEditorCommandGroupContent.test.tsx
index 931830a2..3ffb1113 100644
--- a/src/web/src/__tests__/components/WSEditorCommandGroupContent.test.tsx
+++ b/src/web/src/__tests__/components/WSEditorCommandGroupContent.test.tsx
@@ -21,8 +21,14 @@ vi.mock("../../services", () => ({
       loadingMessage: "Deleting command group...",
       fn: vi.fn(),
     },
-    updateCommandGroup: vi.fn(),
-    renameCommandGroup: vi.fn(),
+    updateCommandGroup: {
+      loadingMessage: "Updating command group...",
+      fn: vi.fn(),
+    },
+    renameCommandGroup: {
+      loadingMessage: "Renaming command group...",
+      fn: vi.fn(),
+    },
   },
   errorHandlerApi: {
     getErrorMessage: vi.fn(),
@@ -50,6 +56,20 @@ describe("WSEditorCommandGroupContent", () => {
   beforeEach(() => {
     vi.clearAllMocks();
     mockCommandApi.deleteCommandGroup.fn.mockResolvedValue(undefined);
+    mockCommandApi.updateCommandGroup.fn.mockResolvedValue({
+      id: "updated-group-id",
+      names: ["updated-group"],
+      stage: "Stable",
+      help: { short: "Updated help text" },
+      canDelete: true,
+    });
+    mockCommandApi.renameCommandGroup.fn.mockResolvedValue({
+      id: "renamed-group-id",
+      names: ["renamed-group"],
+      stage: "Stable",
+      help: { short: "Test help" },
+      canDelete: true,
+    });
   });
 
   describe("Core Rendering", () => {
@@ -173,7 +193,7 @@ describe("WSEditorCommandGroupContent", () => {
       });
     });
 
-    it.skip("saves changes and updates command group", async () => {
+    it("saves changes and updates command group", async () => {
       // @NOTE: will change approach once mocking setup changes
       const user = userEvent.setup();
 
@@ -196,7 +216,7 @@ describe("WSEditorCommandGroupContent", () => {
       await user.click(saveButton);
 
       await waitFor(() =>
-        expect(mockCommandApi.updateCommandGroup).toHaveBeenCalledWith(
+        expect(mockCommandApi.updateCommandGroup.fn).toHaveBeenCalledWith(
           expect.stringContaining(mockWorkspaceUrl),
           expect.objectContaining({
             help: expect.objectContaining({ short: "Updated help text" }),
@@ -295,7 +315,7 @@ describe("WSEditorCommandGroupContent", () => {
       const user = userEvent.setup();
       const mockError = new Error("Update failed");
 
-      mockCommandApi.updateCommandGroup.mockRejectedValue(mockError);
+      mockCommandApi.updateCommandGroup.fn.mockRejectedValue(mockError);
 
       render(
         <WSEditorCommandGroupContent
@@ -310,14 +330,14 @@ describe("WSEditorCommandGroupContent", () => {
       await user.click(editButton);
 
       await waitFor(() => {
-        expect(screen.getByText("Edit Command Group")).toBeInTheDocument();
+        expect(screen.getByText("Command Group")).toBeInTheDocument();
       });
 
       const saveButton = screen.getByRole("button", { name: /save/i });
       await user.click(saveButton);
 
       await waitFor(() => {
-        expect(mockCommandApi.updateCommandGroup).toHaveBeenCalled();
+        expect(mockCommandApi.updateCommandGroup.fn).toHaveBeenCalled();
       });
     });
 
diff --git a/src/web/src/services/commandApi.ts b/src/web/src/services/commandApi.ts
index 140ef63c..466dddef 100644
--- a/src/web/src/services/commandApi.ts
+++ b/src/web/src/services/commandApi.ts
@@ -98,17 +98,20 @@ export const commandApi = {
     },
   },
 
-  updateCommandGroup: async (
-    nodeUrl: string,
-    data: { help: { short: string; lines: string[] }; stage: string },
-  ): Promise<any> => {
-    const res = await axios.patch(nodeUrl, data);
-    return res.data;
+  updateCommandGroup: {
+    loadingMessage: "Updating command group...",
+    fn: async (nodeUrl: string, data: { help: { short: string; lines: string[] }; stage: string }): Promise<any> => {
+      const res = await axios.patch(nodeUrl, data);
+      return res.data;
+    },
   },
 
-  renameCommandGroup: async (nodeUrl: string, name: string): Promise<any> => {
-    const res = await axios.post(`${nodeUrl}/Rename`, { name });
-    return res.data;
+  renameCommandGroup: {
+    loadingMessage: "Renaming command group...",
+    fn: async (nodeUrl: string, name: string): Promise<any> => {
+      const res = await axios.post(`${nodeUrl}/Rename`, { name });
+      return res.data;
+    },
   },
 
   findSimilarArguments: async (commandUrl: string, argVar: string): Promise<any> => {
diff --git a/src/web/src/views/workspace/components/WSEditorCommandGroupContent/CommandGroupDialog.tsx b/src/web/src/views/workspace/components/WSEditorCommandGroupContent/CommandGroupDialog.tsx
index 1021c14d..986a7816 100644
--- a/src/web/src/views/workspace/components/WSEditorCommandGroupContent/CommandGroupDialog.tsx
+++ b/src/web/src/views/workspace/components/WSEditorCommandGroupContent/CommandGroupDialog.tsx
@@ -1,6 +1,5 @@
 import {
   Alert,
-  Box,
   Button,
   Dialog,
   DialogActions,
@@ -8,12 +7,13 @@ import {
   DialogTitle,
   FormControlLabel,
   InputLabel,
-  LinearProgress,
   Radio,
   RadioGroup,
   TextField,
 } from "@mui/material";
 import { commandApi, errorHandlerApi } from "../../../../services";
+import { useAsyncOperation } from "../../../../services/hooks";
+import { AsyncOperationBanner } from "../../../../components";
 import * as React from "react";
 import { DecodeResponseCommandGroup } from "./WSEditorCommandGroupContent";
 import type { CommandGroup } from "../../interfaces";
@@ -31,7 +31,9 @@ const CommandGroupDialog: React.FC<CommandGroupDialogProps> = ({ workspaceUrl, o
   const [shortHelp, setShortHelp] = React.useState<string>(commandGroup.help?.short ?? "");
   const [longHelp, setLongHelp] = React.useState<string>(commandGroup.help?.lines?.join("\n") ?? "");
   const [invalidText, setInvalidText] = React.useState<string | undefined>(undefined);
-  const [updating, setUpdating] = React.useState<boolean>(false);
+
+  const updateCommandGroupOperation = useAsyncOperation(commandApi.updateCommandGroup);
+  const renameCommandGroupOperation = useAsyncOperation(commandApi.renameCommandGroup);
 
   React.useEffect(() => {
     setName(commandGroup.names.join(" "));
@@ -39,7 +41,6 @@ const CommandGroupDialog: React.FC<CommandGroupDialogProps> = ({ workspaceUrl, o
     setShortHelp(commandGroup.help?.short ?? "");
     setLongHelp(commandGroup.help?.lines?.join("\n") ?? "");
     setInvalidText(undefined);
-    setUpdating(false);
   }, [commandGroup]);
 
   const handleModify = React.useCallback(async () => {
@@ -74,12 +75,10 @@ const CommandGroupDialog: React.FC<CommandGroupDialogProps> = ({ workspaceUrl, o
       lines = trimmedLongHelp.split("\n").filter((l: string) => l.length > 0);
     }
 
-    setUpdating(true);
-
     const nodeUrl = `${workspaceUrl}/CommandTree/Nodes/aaz/${commandGroup.names.join("/")}`;
 
     try {
-      const res = await commandApi.updateCommandGroup(nodeUrl, {
+      const res = await updateCommandGroupOperation.execute(nodeUrl, {
         help: {
           short: trimmedShortHelp,
           lines: lines,
@@ -90,20 +89,27 @@ const CommandGroupDialog: React.FC<CommandGroupDialogProps> = ({ workspaceUrl, o
       const finalName = names.join(" ");
       if (finalName === commandGroup.names.join(" ")) {
         const cmdGroup = DecodeResponseCommandGroup(res);
-        setUpdating(false);
         onClose(cmdGroup);
       } else {
-        const renameRes = await commandApi.renameCommandGroup(nodeUrl, finalName);
+        const renameRes = await renameCommandGroupOperation.execute(nodeUrl, finalName);
         const cmdGroup = DecodeResponseCommandGroup(renameRes);
-        setUpdating(false);
         onClose(cmdGroup);
       }
     } catch (err: any) {
       console.error(err);
-      setUpdating(false);
       setInvalidText(errorHandlerApi.getErrorMessage(err));
     }
-  }, [name, shortHelp, longHelp, stage, workspaceUrl, commandGroup.names, onClose]);
+  }, [
+    name,
+    shortHelp,
+    longHelp,
+    stage,
+    workspaceUrl,
+    commandGroup.names,
+    onClose,
+    updateCommandGroupOperation,
+    renameCommandGroupOperation,
+  ]);
 
   const handleClose = React.useCallback(() => {
     setInvalidText(undefined);
@@ -178,14 +184,11 @@ const CommandGroupDialog: React.FC<CommandGroupDialogProps> = ({ workspaceUrl, o
           }}
           margin="normal"
         />
+        {<AsyncOperationBanner operation={updateCommandGroupOperation} />}
+        {<AsyncOperationBanner operation={renameCommandGroupOperation} />}
       </DialogContent>
       <DialogActions>
-        {updating && (
-          <Box sx={{ width: "100%" }}>
-            <LinearProgress color="secondary" />
-          </Box>
-        )}
-        {!updating && (
+        {!updateCommandGroupOperation.loading && !renameCommandGroupOperation.loading && (
           <React.Fragment>
             <Button onClick={handleClose}>Cancel</Button>
             <Button onClick={handleModify}>Save</Button>

From c29bdbc2fe7d1505e47b25aeec004b248bfa337b Mon Sep 17 00:00:00 2001
From: Daniel Languiller <dlanguiller@microsoft.com>
Date: Wed, 5 Nov 2025 10:26:57 +1100
Subject: [PATCH 26/31] refactor: create uniform loading banner visual
 component

---
 .../src/components/AsyncOperationBanner.tsx   | 60 ++++++++++++++++---
 src/web/src/components/index.ts               |  2 +-
 .../WSEditor/WSEditorClientConfig.tsx         |  1 +
 .../WSEditor/WSEditorExportDialog.tsx         |  1 +
 .../WSEditor/WSEditorSwaggerReloadDialog.tsx  |  1 +
 .../FlattenDialog.tsx                         |  1 +
 .../UnwrapClsDialog.tsx                       |  1 +
 .../WSEditorCommandContent.tsx                |  1 +
 8 files changed, 58 insertions(+), 10 deletions(-)

diff --git a/src/web/src/components/AsyncOperationBanner.tsx b/src/web/src/components/AsyncOperationBanner.tsx
index 9df1e6cb..781dfae9 100644
--- a/src/web/src/components/AsyncOperationBanner.tsx
+++ b/src/web/src/components/AsyncOperationBanner.tsx
@@ -3,6 +3,14 @@ import { Box, LinearProgress, Typography } from "@mui/material";
 import { styled } from "@mui/material/styles";
 import type { UseAsyncOperationResult } from "../services/hooks";
 
+interface LoadingBannerProps {
+  loading: boolean;
+  message?: string;
+  backgroundColor?: string;
+  textColor?: string;
+  spinnerColor?: "primary" | "secondary" | "error" | "info" | "success" | "warning" | "inherit";
+}
+
 interface AsyncOperationBannerProps {
   operation: UseAsyncOperationResult<any>;
   backgroundColor?: string;
@@ -11,7 +19,7 @@ interface AsyncOperationBannerProps {
   spinnerSize?: number;
 }
 
-const LoadingBanner = styled(Box)<{ backgroundColor?: string; textColor?: string }>(
+const StyledLoadingBanner = styled(Box)<{ backgroundColor?: string; textColor?: string }>(
   ({ theme, backgroundColor, textColor }) => ({
     padding: theme.spacing(1.5),
     marginBottom: theme.spacing(2),
@@ -24,6 +32,40 @@ const LoadingBanner = styled(Box)<{ backgroundColor?: string; textColor?: string
   }),
 );
 
+/**
+ * A generic loading banner component that displays a loading state with message and progress bar.
+ * Can be used anywhere you need to show a loading state, not just with async operations.
+ *
+ * Returns null if !loading
+ *
+ * @example
+ * ```tsx
+ * const [loading, setLoading] = useState(false);
+ *
+ * return (
+ *   <LoadingBanner loading={loading} message="Loading data..." />
+ * );
+ * ```
+ */
+export const LoadingBanner: React.FC<LoadingBannerProps> = ({
+  loading,
+  message,
+  backgroundColor = "white",
+  textColor,
+  spinnerColor = "secondary",
+}) => {
+  if (!loading) {
+    return null;
+  }
+
+  return (
+    <StyledLoadingBanner backgroundColor={backgroundColor} textColor={textColor}>
+      {message && <Typography variant="body1">{message}</Typography>}
+      <LinearProgress color={spinnerColor} />
+    </StyledLoadingBanner>
+  );
+};
+
 /**
  * A reusable banner component that displays loading state for async operations.
  * Designed to be used with the UseAsyncOperationResult interface.
@@ -43,16 +85,16 @@ export const AsyncOperationBanner: React.FC<AsyncOperationBannerProps> = ({
   operation,
   backgroundColor = "white",
   textColor,
+  spinnerColor = "secondary",
 }) => {
-  if (!operation.loading) {
-    return null;
-  }
-
   return (
-    <LoadingBanner backgroundColor={backgroundColor} textColor={textColor}>
-      <Typography variant="body1">{operation.loadingMessage}</Typography>
-      <LinearProgress color="secondary" />
-    </LoadingBanner>
+    <LoadingBanner
+      loading={operation.loading}
+      message={operation.loading ? operation.loadingMessage : undefined}
+      backgroundColor={backgroundColor}
+      textColor={textColor}
+      spinnerColor={spinnerColor}
+    />
   );
 };
 
diff --git a/src/web/src/components/index.ts b/src/web/src/components/index.ts
index 566e20ef..2195e76a 100644
--- a/src/web/src/components/index.ts
+++ b/src/web/src/components/index.ts
@@ -1,4 +1,4 @@
 export { AppNavBar } from "./AppNavBar";
-export { default as AsyncOperationBanner } from "./AsyncOperationBanner";
+export { default as AsyncOperationBanner, LoadingBanner } from "./AsyncOperationBanner";
 export { default as EditorPageLayout } from "./EditorPageLayout";
 export { default as PageLayout } from "./PageLayout";
diff --git a/src/web/src/views/workspace/components/WSEditor/WSEditorClientConfig.tsx b/src/web/src/views/workspace/components/WSEditor/WSEditorClientConfig.tsx
index 615d08de..caaac0a1 100644
--- a/src/web/src/views/workspace/components/WSEditor/WSEditorClientConfig.tsx
+++ b/src/web/src/views/workspace/components/WSEditor/WSEditorClientConfig.tsx
@@ -805,6 +805,7 @@ const WSEditorClientConfigDialog: React.FC<WSEditorClientConfigDialogProps> = ({
         </Box>
       </DialogContent>
       <DialogActions>
+        {/* @TODO: update usage: */}
         {updating && (
           <Box sx={{ width: "100%" }}>
             <LinearProgress color="secondary" />
diff --git a/src/web/src/views/workspace/components/WSEditor/WSEditorExportDialog.tsx b/src/web/src/views/workspace/components/WSEditor/WSEditorExportDialog.tsx
index 3b0942e1..ea289c2c 100644
--- a/src/web/src/views/workspace/components/WSEditor/WSEditorExportDialog.tsx
+++ b/src/web/src/views/workspace/components/WSEditor/WSEditorExportDialog.tsx
@@ -90,6 +90,7 @@ const WSEditorExportDialog: React.FC<WSEditorExportDialogProps> = ({
         )}
       </DialogContent>
       <DialogActions>
+        {/* @TODO: update usage: */}
         {updating && (
           <Box sx={{ width: "100%" }}>
             <LinearProgress color="secondary" />
diff --git a/src/web/src/views/workspace/components/WSEditor/WSEditorSwaggerReloadDialog.tsx b/src/web/src/views/workspace/components/WSEditor/WSEditorSwaggerReloadDialog.tsx
index fab095eb..e0cb7fd6 100644
--- a/src/web/src/views/workspace/components/WSEditor/WSEditorSwaggerReloadDialog.tsx
+++ b/src/web/src/views/workspace/components/WSEditor/WSEditorSwaggerReloadDialog.tsx
@@ -249,6 +249,7 @@ const WSEditorSwaggerReloadDialog: React.FC<WSEditorSwaggerReloadDialogProps> =
         </List>
       </DialogContent>
       <DialogActions>
+        {/* @TODO: update usage: */}
         {updating && (
           <Box sx={{ width: "100%" }}>
             <LinearProgress color="secondary" />
diff --git a/src/web/src/views/workspace/components/WSEditorCommandArgumentsContent/FlattenDialog.tsx b/src/web/src/views/workspace/components/WSEditorCommandArgumentsContent/FlattenDialog.tsx
index f2dca82c..5e22bcbe 100644
--- a/src/web/src/views/workspace/components/WSEditorCommandArgumentsContent/FlattenDialog.tsx
+++ b/src/web/src/views/workspace/components/WSEditorCommandArgumentsContent/FlattenDialog.tsx
@@ -301,6 +301,7 @@ const FlattenDialog: React.FC<FlattenDialogProps> = (props) => {
         </>
       )}
       <DialogActions>
+        {/* @TODO: update usage: */}
         {updating && (
           <Box sx={{ width: "100%" }}>
             <LinearProgress color="secondary" />
diff --git a/src/web/src/views/workspace/components/WSEditorCommandArgumentsContent/UnwrapClsDialog.tsx b/src/web/src/views/workspace/components/WSEditorCommandArgumentsContent/UnwrapClsDialog.tsx
index 3b6fea94..145c0a7d 100644
--- a/src/web/src/views/workspace/components/WSEditorCommandArgumentsContent/UnwrapClsDialog.tsx
+++ b/src/web/src/views/workspace/components/WSEditorCommandArgumentsContent/UnwrapClsDialog.tsx
@@ -99,6 +99,7 @@ const UnwrapClsDialog: React.FC<UnwrapClsDialogProps> = (props) => {
         <ArgTypeTypography>{props.arg.type}</ArgTypeTypography>
       </DialogContent>
       <DialogActions>
+        {/* @TODO: update usage: */}
         {updating && (
           <Box sx={{ width: "100%" }}>
             <LinearProgress color="secondary" />
diff --git a/src/web/src/views/workspace/components/WSEditorCommandContent/WSEditorCommandContent.tsx b/src/web/src/views/workspace/components/WSEditorCommandContent/WSEditorCommandContent.tsx
index 69168afb..e16486be 100644
--- a/src/web/src/views/workspace/components/WSEditorCommandContent/WSEditorCommandContent.tsx
+++ b/src/web/src/views/workspace/components/WSEditorCommandContent/WSEditorCommandContent.tsx
@@ -399,6 +399,7 @@ const WSEditorCommandContent: React.FC<WSEditorCommandContentProps> = ({
             justifyContent: "flex-start",
           }}
         >
+          {/* @TODO: update usage: */}
           {loading && (
             <Box sx={{ width: "100%" }}>
               <LinearProgress color="secondary" />

From d9a3b2e19fb100174a808ba7e0ef9116c6e05892 Mon Sep 17 00:00:00 2001
From: Daniel Languiller <dlanguiller@microsoft.com>
Date: Wed, 5 Nov 2025 12:32:40 +1100
Subject: [PATCH 27/31] refactor: update remaining elements to use uniform
 version of LoadingBar

---
 .../WSEditor/WSEditorClientConfig.tsx         | 10 ++--------
 .../WSEditor/WSEditorExportDialog.tsx         | 10 +++-------
 .../WSEditor/WSEditorSwaggerReloadDialog.tsx  |  9 ++-------
 .../FlattenDialog.tsx                         | 20 +++----------------
 .../UnwrapClsDialog.tsx                       | 10 ++--------
 .../WSEditorCommandContent.tsx                |  9 ++-------
 6 files changed, 14 insertions(+), 54 deletions(-)

diff --git a/src/web/src/views/workspace/components/WSEditor/WSEditorClientConfig.tsx b/src/web/src/views/workspace/components/WSEditor/WSEditorClientConfig.tsx
index caaac0a1..d5d20d4b 100644
--- a/src/web/src/views/workspace/components/WSEditor/WSEditorClientConfig.tsx
+++ b/src/web/src/views/workspace/components/WSEditor/WSEditorClientConfig.tsx
@@ -7,7 +7,6 @@ import {
   DialogTitle,
   DialogContent,
   DialogActions,
-  LinearProgress,
   Button,
   Paper,
   TextField,
@@ -22,7 +21,7 @@ import {
 } from "@mui/material";
 import { workspaceApi, specsApi, errorHandlerApi } from "../../../../services";
 import { useAsyncOperation } from "../../../../services/hooks";
-import AsyncOperationBanner from "../../../../components/AsyncOperationBanner";
+import AsyncOperationBanner, { LoadingBanner } from "../../../../components/AsyncOperationBanner";
 import DoDisturbOnRoundedIcon from "@mui/icons-material/DoDisturbOnRounded";
 import AddCircleRoundedIcon from "@mui/icons-material/AddCircleRounded";
 import SwaggerItemSelector from "../../common/SwaggerItemSelector";
@@ -803,14 +802,9 @@ const WSEditorClientConfigDialog: React.FC<WSEditorClientConfigDialogProps> = ({
           </IconButton>
           <AuthTypography sx={{ flexShrink: 0 }}> One more scope </AuthTypography>
         </Box>
+        <LoadingBanner loading={updating} />
       </DialogContent>
       <DialogActions>
-        {/* @TODO: update usage: */}
-        {updating && (
-          <Box sx={{ width: "100%" }}>
-            <LinearProgress color="secondary" />
-          </Box>
-        )}
         {!updating && (
           <React.Fragment>
             {!isAdd && <Button onClick={handleClose}>Cancel</Button>}
diff --git a/src/web/src/views/workspace/components/WSEditor/WSEditorExportDialog.tsx b/src/web/src/views/workspace/components/WSEditor/WSEditorExportDialog.tsx
index ea289c2c..557e7d6d 100644
--- a/src/web/src/views/workspace/components/WSEditor/WSEditorExportDialog.tsx
+++ b/src/web/src/views/workspace/components/WSEditor/WSEditorExportDialog.tsx
@@ -1,6 +1,7 @@
 import React, { useState, useEffect, Fragment } from "react";
-import { Box, Dialog, DialogTitle, DialogContent, DialogActions, LinearProgress, Button, Alert } from "@mui/material";
+import { Dialog, DialogTitle, DialogContent, DialogActions, Button, Alert } from "@mui/material";
 import { workspaceApi, errorHandlerApi } from "../../../../services";
+import { LoadingBanner } from "../../../../components";
 
 interface WSEditorExportDialogProps {
   workspaceUrl: string;
@@ -89,13 +90,8 @@ const WSEditorExportDialog: React.FC<WSEditorExportDialogProps> = ({
           </Alert>
         )}
       </DialogContent>
+      <LoadingBanner loading={updating} />
       <DialogActions>
-        {/* @TODO: update usage: */}
-        {updating && (
-          <Box sx={{ width: "100%" }}>
-            <LinearProgress color="secondary" />
-          </Box>
-        )}
         {!updating && (
           <Fragment>
             {clientConfigOOD && <Button onClick={inheritClientConfig}>Refresh Client Config</Button>}
diff --git a/src/web/src/views/workspace/components/WSEditor/WSEditorSwaggerReloadDialog.tsx b/src/web/src/views/workspace/components/WSEditor/WSEditorSwaggerReloadDialog.tsx
index e0cb7fd6..f7e90ed4 100644
--- a/src/web/src/views/workspace/components/WSEditor/WSEditorSwaggerReloadDialog.tsx
+++ b/src/web/src/views/workspace/components/WSEditor/WSEditorSwaggerReloadDialog.tsx
@@ -5,7 +5,6 @@ import {
   DialogTitle,
   DialogContent,
   DialogActions,
-  LinearProgress,
   Button,
   List,
   ListSubheader,
@@ -20,6 +19,7 @@ import {
 import type { Resource } from "../../interfaces";
 import { getTypespecRPResourcesOperations } from "../../../../typespec";
 import { workspaceApi, errorHandlerApi } from "../../../../services";
+import { LoadingBanner } from "../../../../components";
 
 interface WSEditorSwaggerReloadDialogProps {
   workspaceName: string;
@@ -247,14 +247,9 @@ const WSEditorSwaggerReloadDialog: React.FC<WSEditorSwaggerReloadDialogProps> =
             </Paper>
           )}
         </List>
+        <LoadingBanner loading={updating} />
       </DialogContent>
       <DialogActions>
-        {/* @TODO: update usage: */}
-        {updating && (
-          <Box sx={{ width: "100%" }}>
-            <LinearProgress color="secondary" />
-          </Box>
-        )}
         {!updating && (
           <Fragment>
             <Button onClick={handleClose}>Cancel</Button>
diff --git a/src/web/src/views/workspace/components/WSEditorCommandArgumentsContent/FlattenDialog.tsx b/src/web/src/views/workspace/components/WSEditorCommandArgumentsContent/FlattenDialog.tsx
index 5e22bcbe..b699ae0a 100644
--- a/src/web/src/views/workspace/components/WSEditorCommandArgumentsContent/FlattenDialog.tsx
+++ b/src/web/src/views/workspace/components/WSEditorCommandArgumentsContent/FlattenDialog.tsx
@@ -1,17 +1,8 @@
-import {
-  Alert,
-  Box,
-  Button,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogTitle,
-  LinearProgress,
-  TextField,
-} from "@mui/material";
+import { Alert, Button, Dialog, DialogActions, DialogContent, DialogTitle, TextField } from "@mui/material";
 import React, { useEffect, useState } from "react";
 import { commandApi, errorHandlerApi } from "../../../../services";
 import WSECArgumentSimilarPicker, { ArgSimilarTree, BuildArgSimilarTree } from "./WSECArgumentSimilarPicker";
+import { LoadingBanner } from "../../../../components";
 
 interface FlattenDialogProps {
   commandUrl: string;
@@ -300,13 +291,8 @@ const FlattenDialog: React.FC<FlattenDialogProps> = (props) => {
           </DialogContent>
         </>
       )}
+      <LoadingBanner loading={updating} />
       <DialogActions>
-        {/* @TODO: update usage: */}
-        {updating && (
-          <Box sx={{ width: "100%" }}>
-            <LinearProgress color="secondary" />
-          </Box>
-        )}
         {!updating && !argSimilarTree && (
           <>
             <Button onClick={handleClose}>Cancel</Button>
diff --git a/src/web/src/views/workspace/components/WSEditorCommandArgumentsContent/UnwrapClsDialog.tsx b/src/web/src/views/workspace/components/WSEditorCommandArgumentsContent/UnwrapClsDialog.tsx
index 145c0a7d..1e7bf4ca 100644
--- a/src/web/src/views/workspace/components/WSEditorCommandArgumentsContent/UnwrapClsDialog.tsx
+++ b/src/web/src/views/workspace/components/WSEditorCommandArgumentsContent/UnwrapClsDialog.tsx
@@ -1,12 +1,10 @@
 import {
   Alert,
-  Box,
   Button,
   Dialog,
   DialogActions,
   DialogContent,
   DialogTitle,
-  LinearProgress,
   styled,
   Typography,
   TypographyProps,
@@ -14,6 +12,7 @@ import {
 
 import { commandApi, errorHandlerApi } from "../../../../services";
 import React, { useState } from "react";
+import { LoadingBanner } from "../../../../components";
 
 const ArgTypeTypography = styled(Typography)<TypographyProps>(({ theme }) => ({
   color: theme.palette.primary.main,
@@ -98,13 +97,8 @@ const UnwrapClsDialog: React.FC<UnwrapClsDialogProps> = (props) => {
         )}
         <ArgTypeTypography>{props.arg.type}</ArgTypeTypography>
       </DialogContent>
+      <LoadingBanner loading={updating} />
       <DialogActions>
-        {/* @TODO: update usage: */}
-        {updating && (
-          <Box sx={{ width: "100%" }}>
-            <LinearProgress color="secondary" />
-          </Box>
-        )}
         {!updating && (
           <>
             <Button onClick={handleClose}>Cancel</Button>
diff --git a/src/web/src/views/workspace/components/WSEditorCommandContent/WSEditorCommandContent.tsx b/src/web/src/views/workspace/components/WSEditorCommandContent/WSEditorCommandContent.tsx
index e16486be..aa78be74 100644
--- a/src/web/src/views/workspace/components/WSEditorCommandContent/WSEditorCommandContent.tsx
+++ b/src/web/src/views/workspace/components/WSEditorCommandContent/WSEditorCommandContent.tsx
@@ -6,7 +6,6 @@ import {
   CardActions,
   CardContent,
   Accordion,
-  LinearProgress,
   Typography,
   TypographyProps,
   AccordionDetails,
@@ -39,6 +38,7 @@ import CommandDialog from "./CommandDialog";
 import OutputCard from "./OutputCard";
 import OutputDialog from "./OutputDialog";
 import type { Command, Example } from "../../interfaces";
+import { LoadingBanner } from "../../../../components";
 
 interface WSEditorCommandContentProps {
   workspaceUrl: string;
@@ -391,6 +391,7 @@ const WSEditorCommandContent: React.FC<WSEditorCommandContentProps> = ({
             </Box>
           )}
         </CardContent>
+        <LoadingBanner loading={loading} />
         <CardActions
           sx={{
             display: "flex",
@@ -399,12 +400,6 @@ const WSEditorCommandContent: React.FC<WSEditorCommandContentProps> = ({
             justifyContent: "flex-start",
           }}
         >
-          {/* @TODO: update usage: */}
-          {loading && (
-            <Box sx={{ width: "100%" }}>
-              <LinearProgress color="secondary" />
-            </Box>
-          )}
           {!loading && (
             <Box
               sx={{

From ac1c330d7b0d4a13142a40b825ba8952b4735fb4 Mon Sep 17 00:00:00 2001
From: Daniel Languiller <dlanguiller@microsoft.com>
Date: Wed, 5 Nov 2025 12:33:59 +1100
Subject: [PATCH 28/31] refactor: remove comment

---
 .../__tests__/components/WSEditorCommandGroupContent.test.tsx    | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/web/src/__tests__/components/WSEditorCommandGroupContent.test.tsx b/src/web/src/__tests__/components/WSEditorCommandGroupContent.test.tsx
index 3ffb1113..80355ef7 100644
--- a/src/web/src/__tests__/components/WSEditorCommandGroupContent.test.tsx
+++ b/src/web/src/__tests__/components/WSEditorCommandGroupContent.test.tsx
@@ -194,7 +194,6 @@ describe("WSEditorCommandGroupContent", () => {
     });
 
     it("saves changes and updates command group", async () => {
-      // @NOTE: will change approach once mocking setup changes
       const user = userEvent.setup();
 
       render(

From 257a2d5f94e805ad94f6fb748ee7baa2ced58b0c Mon Sep 17 00:00:00 2001
From: Daniel Languiller <dlanguiller@microsoft.com>
Date: Wed, 5 Nov 2025 12:39:54 +1100
Subject: [PATCH 29/31] refactor: remove jsx example in useAsyncOperation

---
 src/web/src/services/hooks/useAsyncOperation.ts | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/src/web/src/services/hooks/useAsyncOperation.ts b/src/web/src/services/hooks/useAsyncOperation.ts
index 9cfcf410..a572f650 100644
--- a/src/web/src/services/hooks/useAsyncOperation.ts
+++ b/src/web/src/services/hooks/useAsyncOperation.ts
@@ -34,14 +34,6 @@ export interface UseAsyncOperationResult<T> extends AsyncOperationState<T>, Asyn
  *
  * // Usage
  * await resourceProviders.execute(moduleUrl);
- *
- * // In JSX
- * {resourceProviders.loading && (
- *   <Box>
- *     <CircularProgress />
- *     <Typography>{resourceProviders.loadingMessage}</Typography>
- *   </Box>
- * )}
  * ```
  */
 export const useAsyncOperation = <T>(serviceMethod?: AsyncServiceMethod<T>): UseAsyncOperationResult<T> => {

From 93d6005815fe305f8d6640c8bc6f6ee5f89b2bdd Mon Sep 17 00:00:00 2001
From: Daniel Languiller <dlanguiller@microsoft.com>
Date: Wed, 5 Nov 2025 12:57:59 +1100
Subject: [PATCH 30/31] Refactor: remove unnecc {}

---
 .../WSEditorCommandGroupContent/CommandGroupDialog.tsx        | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/web/src/views/workspace/components/WSEditorCommandGroupContent/CommandGroupDialog.tsx b/src/web/src/views/workspace/components/WSEditorCommandGroupContent/CommandGroupDialog.tsx
index 986a7816..12fdd1fa 100644
--- a/src/web/src/views/workspace/components/WSEditorCommandGroupContent/CommandGroupDialog.tsx
+++ b/src/web/src/views/workspace/components/WSEditorCommandGroupContent/CommandGroupDialog.tsx
@@ -184,8 +184,8 @@ const CommandGroupDialog: React.FC<CommandGroupDialogProps> = ({ workspaceUrl, o
           }}
           margin="normal"
         />
-        {<AsyncOperationBanner operation={updateCommandGroupOperation} />}
-        {<AsyncOperationBanner operation={renameCommandGroupOperation} />}
+        <AsyncOperationBanner operation={updateCommandGroupOperation} />
+        <AsyncOperationBanner operation={renameCommandGroupOperation} />
       </DialogContent>
       <DialogActions>
         {!updateCommandGroupOperation.loading && !renameCommandGroupOperation.loading && (

From 02a1c3bac5ed31593353b47659f5bba5fc756c26 Mon Sep 17 00:00:00 2001
From: Daniel Languiller <dlanguiller@microsoft.com>
Date: Wed, 5 Nov 2025 13:06:08 +1100
Subject: [PATCH 31/31] feature: remove lose of workspace creation on click
 outside

---
 .../components/WorkspaceInstruction/WorkspaceCreateDialog.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/web/src/views/workspace/components/WorkspaceInstruction/WorkspaceCreateDialog.tsx b/src/web/src/views/workspace/components/WorkspaceInstruction/WorkspaceCreateDialog.tsx
index 69ba8685..556eead7 100644
--- a/src/web/src/views/workspace/components/WorkspaceInstruction/WorkspaceCreateDialog.tsx
+++ b/src/web/src/views/workspace/components/WorkspaceInstruction/WorkspaceCreateDialog.tsx
@@ -248,7 +248,7 @@ const WorkspaceCreateDialog: React.FC<WorkspaceCreateDialogProps> = ({ openDialo
   }, [onClose]);
 
   return (
-    <Dialog open={openDialog} fullWidth={true} onClose={handleClose}>
+    <Dialog open={openDialog} fullWidth={true} disableEscapeKeyDown>
       <DialogTitle>Create a new workspace</DialogTitle>
       <DialogContent>
         {invalidText && (