fix(ui): loading indicator for restart dialog (#1075)

Restart application takes 5+ secs because we have to kill all related processes. Without loading indicator it looked like restarting does not work at all. ![Screencast from 11-15-2024 05_15_43 PM](https://github.com/user-attachments/assets/666f8966-70a4-4b69-88a2-0ca6314874f0) Co-authored-by: Brian Pearce <[email protected]>
tari-project · Nov 18, 2024 · 459e2f5 · 459e2f5
1 parent b28607f
commit 459e2f5
Showing 1 changed file with 20 additions and 11 deletions.
diff --git a/src/components/dialogs/RestartDialog.tsx b/src/components/dialogs/RestartDialog.tsx
@@ -1,5 +1,5 @@
 import * as Sentry from '@sentry/react';
-import { useCallback } from 'react';
+import { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { invoke } from '@tauri-apps/api/tauri';
 import { Dialog, DialogContent } from '@app/components/elements/dialog/Dialog.tsx';
@@ -13,10 +13,12 @@ import { Divider } from '@app/components/elements/Divider.tsx';
 import { TextButton } from '@app/components/elements/buttons/TextButton.tsx';
 import { IconButton } from '@app/components/elements/buttons/IconButton.tsx';
 import { useTheme } from 'styled-components';
+import { CircularProgress } from '../elements/CircularProgress';
 
 export default function RestartDialog() {
     const dialogToShow = useUIStore((s) => s.dialogToShow);
     const setDialogToShow = useUIStore((s) => s.setDialogToShow);
+    const [isRestarting, setIsRestarting] = useState(false);
     const { t } = useTranslation('settings', { useSuspense: false });
 
     const showRestartModal = dialogToShow === 'restart';
@@ -28,6 +30,7 @@ export default function RestartDialog() {
 
     const handleRestart = useCallback(async () => {
         try {
+            setIsRestarting(true);
             console.info('Restarting application.');
             await invoke('restart_application', { shouldStopMiners: true });
         } catch (error) {
@@ -54,16 +57,22 @@ export default function RestartDialog() {
                         </Stack>
 
                         <Stack direction="row" alignItems="center" justifyContent="space-between" gap={8}>
-                            <TextButton
-                                color="grey"
-                                colorIntensity={theme.mode === 'light' ? 700 : 200}
-                                onClick={setShowRestartModal}
-                            >
-                                {t('restart-later')}
-                            </TextButton>
-                            <Button size="small" variant="gradient" onClick={handleRestart}>
-                                {t('restart-now')}
-                            </Button>
+                            {isRestarting ? (
+                                <CircularProgress />
+                            ) : (
+                                <>
+                                    <TextButton
+                                        color="grey"
+                                        colorIntensity={theme.mode === 'light' ? 700 : 200}
+                                        onClick={setShowRestartModal}
+                                    >
+                                        {t('restart-later')}
+                                    </TextButton>
+                                    <Button size="small" variant="gradient" onClick={handleRestart}>
+                                        {t('restart-now')}
+                                    </Button>
+                                </>
+                            )}
                         </Stack>
                     </Stack>
                 </Stack>