feature: (WIP) loading states for planes

Author: DanielMicrosoft

src/web/src/services/hooks/index.ts

@@ -0,0 +1,7 @@
+export { useAsyncOperation } from "./useAsyncOperation";
+export type {
+  AsyncOperationState,
+  AsyncOperationActions,
+  AsyncServiceMethod,
+  UseAsyncOperationResult,
+} from "./useAsyncOperation";

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,
+  };
+};

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[]> => {

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"
           >