Show loading message when saving network / vm configuration

virtweb_frontend/src/routes/EditNetworkRoute.tsx

@@ -1,13 +1,14 @@
+import { Button } from "@mui/material";
+import React from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import { NetworkApi, NetworkInfo, NetworkURL } from "../api/NetworksApi";
 import { useAlert } from "../hooks/providers/AlertDialogProvider";
+import { useLoadingMessage } from "../hooks/providers/LoadingMessageProvider";
 import { useSnackbar } from "../hooks/providers/SnackbarProvider";
-import React from "react";
 import { AsyncWidget } from "../widgets/AsyncWidget";
-import { NetworkDetails } from "../widgets/net/NetworkDetails";
-import { VirtWebRouteContainer } from "../widgets/VirtWebRouteContainer";
-import { Button } from "@mui/material";
 import { ConfigImportExportButtons } from "../widgets/ConfigImportExportButtons";
+import { VirtWebRouteContainer } from "../widgets/VirtWebRouteContainer";
+import { NetworkDetails } from "../widgets/net/NetworkDetails";
 
 export function CreateNetworkRoute(): React.ReactElement {
   const alert = useAlert();
@@ -91,6 +92,8 @@ function EditNetworkRouteInner(p: {
   onSave: (vm: NetworkInfo) => Promise<void>;
   onReplace: (vm: NetworkInfo) => void;
 }): React.ReactElement {
+  const loadingMessage = useLoadingMessage();
+
   const [changed, setChanged] = React.useState(false);
 
   const [, updateState] = React.useState<any>();
@@ -100,6 +103,13 @@ function EditNetworkRouteInner(p: {
     setChanged(true);
     forceUpdate();
   };
+
+  const save = async () => {
+    loadingMessage.show("Saving network configuration...");
+    await p.onSave(p.network);
+    loadingMessage.hide();
+  };
+
   return (
     <VirtWebRouteContainer
       label={p.creating ? "Create a Network" : "Edit Network"}
@@ -117,7 +127,7 @@ function EditNetworkRouteInner(p: {
           {changed && (
             <Button
               variant="contained"
-              onClick={() => p.onSave(p.network)}
+              onClick={save}
               style={{ marginRight: "10px" }}
             >
               {p.creating ? "Create" : "Save"}