Show loading message when saving network / vm configuration

virtweb_frontend/src/routes/EditVMRoute.tsx

@@ -8,6 +8,7 @@ import { AsyncWidget } from "../widgets/AsyncWidget";
 import { ConfigImportExportButtons } from "../widgets/ConfigImportExportButtons";
 import { VirtWebRouteContainer } from "../widgets/VirtWebRouteContainer";
 import { VMDetails } from "../widgets/vms/VMDetails";
+import { useLoadingMessage } from "../hooks/providers/LoadingMessageProvider";
 
 export function CreateVMRoute(): React.ReactElement {
   const snackbar = useSnackbar();
@@ -97,6 +98,8 @@ function EditVMInner(p: {
   onSave: (vm: VMInfo) => Promise<void>;
   onReplace: (vm: VMInfo) => void;
 }): React.ReactElement {
+  const loadingMessage = useLoadingMessage();
+
   const [changed, setChanged] = React.useState(false);
 
   const [, updateState] = React.useState<any>();
@@ -106,6 +109,13 @@ function EditVMInner(p: {
     setChanged(true);
     forceUpdate();
   };
+
+  const save = async () => {
+    loadingMessage.show("Saving VM configuration...");
+    await p.onSave(p.vm);
+    loadingMessage.hide();
+  };
+
   return (
     <VirtWebRouteContainer
       label={p.isCreating ? "Create a Virtual Machine" : "Edit Virtual Machine"}
@@ -122,7 +132,7 @@ function EditVMInner(p: {
           {changed && (
             <Button
               variant="contained"
-              onClick={() => p.onSave(p.vm)}
+              onClick={save}
               style={{ marginRight: "10px" }}
             >
               {p.isCreating ? "Create" : "Save"}