factory reset show system monitor

interface/src/app/settings/Settings.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 
 import AccessTimeIcon from '@mui/icons-material/AccessTime';
 import CancelIcon from '@mui/icons-material/Cancel';
@@ -30,11 +30,14 @@ import { SectionContent, useLayoutTitle } from 'components';
 import ListMenuItem from 'components/layout/ListMenuItem';
 import { useI18nContext } from 'i18n/i18n-react';
 
+import SystemMonitor from '../status/SystemMonitor';
+
 const Settings = () => {
   const { LL } = useI18nContext();
   useLayoutTitle(LL.SETTINGS(0));
 
   const [confirmFactoryReset, setConfirmFactoryReset] = useState(false);
+  const [restarting, setRestarting] = useState<boolean>();
 
   const { send: sendAPI } = useRequest((data: APIcall) => API(data), {
     immediate: false
@@ -42,6 +45,7 @@ const Settings = () => {
 
   const doFormat = useCallback(async () => {
     await sendAPI({ device: 'system', cmd: 'format', id: 0 }).then(() => {
+      setRestarting(true);
       setConfirmFactoryReset(false);
     });
   }, [sendAPI]);
@@ -54,8 +58,9 @@ const Settings = () => {
     setConfirmFactoryReset(true);
   }, []);
 
+  const content = useMemo(() => {
     return (
-    <SectionContent>
+      <>
         <List>
           <ListMenuItem
             icon={TuneIcon}
@@ -166,8 +171,18 @@ const Settings = () => {
             {LL.FACTORY_RESET()}
           </Button>
         </Box>
-    </SectionContent>
+      </>
     );
+  }, [
+    LL,
+    handleFactoryResetClick,
+    handleFactoryResetClose,
+    doFormat,
+    confirmFactoryReset,
+    restarting
+  ]);
+
+  return <SectionContent>{restarting ? <SystemMonitor /> : content}</SectionContent>;
 };
 
 export default Settings;