Добавил лоадер

Отрефаторил модальные окна

components/elements/processes/index.tsx

@@ -10,7 +10,7 @@ import ErrorOutline from "@mui/icons-material/ErrorOutline"
 import ReplayOutlined from "@mui/icons-material/ReplayOutlined"
 import RunCircleOutlined from "@mui/icons-material/RunCircleOutlined"
 import FactCheckOutlined from "@mui/icons-material/FactCheckOutlined"
-import {IconButton, LinearProgress, TableContainer, Table, TableBody, TableCell, TableHead, TableRow, TablePagination} from "@mui/material"
+import {Box, CircularProgress, IconButton, LinearProgress, TableContainer, Table, TableBody, TableCell, TableHead, TableRow, TablePagination} from "@mui/material"
 import ConfirmDialog from "../confirm-dialog";
 import smClient from "../../../api/sm/sm-client";
 import {ProcessesResponseInterface, Status} from "../../../api/sm/responses/processes";
@@ -29,8 +29,8 @@ export default function Processes() {
     const [processes, setProcesses] = useState<ProcessesResponseInterface[]>([]);
     const [page, setPage] = useState<number>(0);
     const [count, setCount] = useState<number>(0);
-    const [open, setOpen] = useState<boolean>(false);
+    const [loading, setLoading] = useState<boolean>(true);
-    const [modify, setModify] = useState<boolean>(false);
+    const [modalLoading, setModalLoading] = useState<boolean>(true);
     const [action, setAction] = useState<Action | null>(null);
     const [command, setCommand] = useState<CommandInterface | null>(null);
     const [selectedProcess, setSelectedProcess] = useState<ProcessesResponseInterface | null>(null);
@@ -49,6 +49,7 @@ export default function Processes() {
         })
         setProcesses(processes)
         setCount(Number(headers.get('X-Pagination-Count')))
+        setLoading(false)
         refreshLock = false
     }
     let output = async (process: ProcessesResponseInterface) => {
@@ -68,6 +69,13 @@ export default function Processes() {
         return () => clearInterval(timer);
     }, [page]);
 
+    useEffect(() => {
+        if (action === null) {
+            setSelectedProcess(null)
+            setCommand(null)
+        }
+    }, [action]);
+
     let isFinished = (process: ProcessesResponseInterface) => process.cancelledAt || process.completedAt
 
     const handleChangePage = (event: any, page: number) => {
@@ -76,7 +84,6 @@ export default function Processes() {
 
     const openDialog = (process: ProcessesResponseInterface, action: Action) => {
         setSelectedProcess(process)
-        setOpen(true)
         setAction(action)
     }
 
@@ -106,25 +113,7 @@ export default function Processes() {
             })
         }
 
-        if (action === Action.Stop) {
-            await smClient.stopProcess(selectedProcess.id)
-        }
-
-        if (action === Action.Kill) {
-            await smClient.killProcess(selectedProcess.id)
-        }
-
-        if (action === Action.Play) {
-            await smClient.playProcess(selectedProcess.id)
-        }
-
-        if (action === Action.Pause) {
-            await smClient.pauseProcess(selectedProcess.id)
-        }
-
         lock = false
-        setSelectedProcess(null)
-        setOpen(false)
         setAction(null)
     }
 
@@ -133,6 +122,14 @@ export default function Processes() {
         setArgumentList(argumentList)
     }
 
+    if (loading) {
+        return (
+            <Box sx={{ display: 'flex', marginTop: '200px' }}>
+                <CircularProgress />
+            </Box>
+        );
+    }
+
     return (
         <>
             <TableContainer>
@@ -212,26 +209,45 @@ export default function Processes() {
             />
             {selectedProcess && <ConfirmDialog
                 title={selectedProcess.name}
-                open={open}
+                open={Action.Repeat === action}
                 agreeCallback={agreeCallback}
                 modifyCallback={async () => {
+                    setAction(Action.Run)
+                    setModalLoading(true)
                     let {data: command} = await smClient.getCommand(selectedProcess.name)
                     setCommand(command)
-                    setModify(true)
+                    setModalLoading(false)
-                    openDialog(selectedProcess, Action.Run)
                 }}
-                closeCallback={() => {
+                closeCallback={() => {setAction(null)}}>
-                    setSelectedProcess(null)
+                Reply?
-                    setOpen(false)
+            </ConfirmDialog>}
-                    setCommand(null)
+            {selectedProcess && <ConfirmDialog
-                }}>
+                title={selectedProcess.name}
-                {!modify && `Reply?`}
+                open={Action.Run === action}
-                {command && <Command
+                agreeCallback={agreeCallback}
+                closeCallback={() => {setAction(null)}}>
+                {modalLoading && <Box sx={{ display: 'flex' }}>
+                    <CircularProgress />
+                </Box>}
+                {!modalLoading && !!command && (Action.Run === action) && <Command
                     command={command}
                     optionsParams={selectedProcess.options}
                     argumentsParams={selectedProcess.arguments}
                     callback={callback}/>}
             </ConfirmDialog>}
+            {selectedProcess && <ConfirmDialog
+                title={`Are you sure?`}
+                open={ !!action && ([Action.Play, Action.Pause, Action.Stop, Action.Kill].indexOf(action) > -1) }
+                agreeCallback={async () => {
+                    Action.Play === action && await smClient.playProcess(selectedProcess.id)
+                    Action.Pause === action && await smClient.pauseProcess(selectedProcess.id)
+                    Action.Stop === action && await smClient.stopProcess(selectedProcess.id)
+                    Action.Kill === action && await smClient.killProcess(selectedProcess.id)
+                    setAction(null)
+                }}
+                closeCallback={() => {setAction(null)}}>
+                {selectedProcess.name}
+            </ConfirmDialog>}
         </>
     )
 }