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

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

virtweb_frontend/src/routes/VMRoute.tsx

@@ -1,12 +1,9 @@
-import { mdiXml } from "@mdi/js";
+import { Button } from "@mui/material";
-import Icon from "@mdi/react";
-import { Button, IconButton, Tooltip } from "@mui/material";
 import React from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import { VMApi, VMInfo, VMState } from "../api/VMApi";
 import { AsyncWidget } from "../widgets/AsyncWidget";
 import { ConfigImportExportButtons } from "../widgets/ConfigImportExportButtons";
-import { RouterLink } from "../widgets/RouterLink";
 import { VirtWebRouteContainer } from "../widgets/VirtWebRouteContainer";
 import { VMDetails } from "../widgets/vms/VMDetails";
 import { VMStatusWidget } from "../widgets/vms/VMStatusWidget";

virtweb_frontend/src/routes/ViewNetworkRoute.tsx

@@ -1,6 +1,4 @@
-import { mdiXml } from "@mdi/js";
+import { Button } from "@mui/material";
-import Icon from "@mdi/react";
-import { Button, IconButton, Tooltip } from "@mui/material";
 import React from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import {
@@ -8,14 +6,12 @@ import {
   NetworkInfo,
   NetworkStatus,
   NetworkURL,
-  NetworkXMLURL,
 } from "../api/NetworksApi";
 import { AsyncWidget } from "../widgets/AsyncWidget";
-import { RouterLink } from "../widgets/RouterLink";
+import { ConfigImportExportButtons } from "../widgets/ConfigImportExportButtons";
 import { VirtWebRouteContainer } from "../widgets/VirtWebRouteContainer";
 import { NetworkDetails } from "../widgets/net/NetworkDetails";
 import { NetworkStatusWidget } from "../widgets/net/NetworkStatusWidget";
-import { ConfigImportExportButtons } from "../widgets/ConfigImportExportButtons";
 
 export function ViewNetworkRoute() {
   const { uuid } = useParams();