add loading state to dialog

client/src/components/inputs/Dialog.tsx

@@ -14,6 +14,7 @@ export const DialogInput = ({
   onCancel,
   confirmColor = "accent",
   cancelColor = "error",
+  loading = false,
 }: {
   open: boolean;
   title?: string;
@@ -22,6 +23,7 @@ export const DialogInput = ({
   onCancel?(item: any): any;
   confirmColor?: "error" | "accent";
   cancelColor?: "error" | "accent";
+  loading?: boolean;
 }) => {
   return (
     <Dialog open={open}>
@@ -30,10 +32,20 @@ export const DialogInput = ({
         <DialogContentText>{content}</DialogContentText>
       </DialogContent>
       <DialogActions>
-        <Button variant="contained" color={cancelColor} onClick={onCancel}>
+        <Button
+          loading={loading}
+          variant="contained"
+          color={cancelColor}
+          onClick={onCancel}
+        >
           Cancel
         </Button>
-        <Button variant="contained" color={confirmColor} onClick={onConfirm}>
+        <Button
+          loading={loading}
+          variant="contained"
+          color={confirmColor}
+          onClick={onConfirm}
+        >
           Confirm
         </Button>
       </DialogActions>

client/src/pages/infrastructure/InfraMonitors.tsx

@@ -31,7 +31,7 @@ const PageSpeedMonitorsPage = () => {
   const [sortOrder, setSortOrder] = useState<"asc" | "desc">("desc");
   const [page, setPage] = useState(0);
   const [rowsPerPage, setRowsPerPage] = useState(10);
-  const { deleteFn } = useDelete();
+  const { deleteFn, loading: isDeleting } = useDelete();
   const requestParams = [
     "embedChecks=true",
     "type=infrastructure",
@@ -111,6 +111,7 @@ const PageSpeedMonitorsPage = () => {
         content={t("deleteDialogDescription")}
         onConfirm={handleConfirm}
         onCancel={handleCancel}
+        loading={isDeleting}
       />
     </MonitorBasePageWithStates>
   );

client/src/pages/pagespeed/PageSpeedMonitors.tsx

@@ -31,7 +31,7 @@ const PageSpeedMonitorsPage = () => {
   const [sortOrder, setSortOrder] = useState<"asc" | "desc">("asc");
   const [page, setPage] = useState(0);
   const [rowsPerPage, setRowsPerPage] = useState(10);
-  const { deleteFn } = useDelete();
+  const { deleteFn, loading: isDeleting } = useDelete();
   const requestParams = [
     "embedChecks=true",
     "type=pagespeed",
@@ -111,6 +111,7 @@ const PageSpeedMonitorsPage = () => {
         content={t("deleteDialogDescription")}
         onConfirm={handleConfirm}
         onCancel={handleCancel}
+        loading={isDeleting}
       />
     </MonitorBasePageWithStates>
   );

client/src/pages/uptime/UptimeMonitors.tsx

@@ -38,19 +38,10 @@ const UptimeMonitors = () => {
   const [sortOrder, setSortOrder] = useState<"asc" | "desc">("asc");
   const [page, setPage] = useState(0);
   const [rowsPerPage, setRowsPerPage] = useState(10);
-  const [selectedTypes, setSelectedTypes] = useState<UptimeMonitorType[]>([
-    "http",
-    "https",
-    "ping",
-  ]);
-  const [selectedStatuses, setSelectedStatuses] = useState<MonitorStatus[]>([
-    "up",
-    "down",
-    "paused",
-    "initializing",
-  ]);
+  const [selectedTypes, setSelectedTypes] = useState<UptimeMonitorType[]>([]);
+  const [selectedStatuses, setSelectedStatuses] = useState<MonitorStatus[]>([]);
 
-  const { deleteFn } = useDelete();
+  const { deleteFn, loading: isDeleting } = useDelete();
 
   const typeFilter =
     selectedTypes.length > 0 ? selectedTypes : UptimeMonitorTypes;
@@ -160,6 +151,7 @@ const UptimeMonitors = () => {
         content={t("deleteDialogDescription")}
         onConfirm={handleConfirm}
         onCancel={handleCancel}
+        loading={isDeleting}
       />
     </MonitorBasePageWithStates>
   );