adjust network request waterfall to force authentication first, add fallback for no network (#1028)

2026-05-08 04:50:12 +02:00 · 2025-12-14 16:00:05 -08:00
parent 303eba87ca
commit 09dfc1ff1d
10 changed files with 336 additions and 129 deletions
@@ -0,0 +1,60 @@
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router';
+
+import { PageHeader } from '/@/renderer/components/page-header/page-header';
+import { AnimatedPage } from '/@/renderer/features/shared/components/animated-page';
+import { PageErrorBoundary } from '/@/renderer/features/shared/components/page-error-boundary';
+import { AppRoute } from '/@/renderer/router/routes';
+import { Button } from '/@/shared/components/button/button';
+import { Center } from '/@/shared/components/center/center';
+import { Icon } from '/@/shared/components/icon/icon';
+import { Stack } from '/@/shared/components/stack/stack';
+import { Text } from '/@/shared/components/text/text';
+
+const NoNetworkRoute = () => {
+    const { t } = useTranslation();
+    const navigate = useNavigate();
+
+    const handleRetry = () => {
+        // Navigate to home which will trigger authentication again
+        navigate(AppRoute.HOME);
+    };
+
+    return (
+        <AnimatedPage>
+            <PageHeader />
+            <Center style={{ height: '100%', width: '100vw' }}>
+                <Stack gap="xl" style={{ maxWidth: '50%', textAlign: 'center' }}>
+                    <Icon icon="wifiOff" size="4rem" />
+                    <Stack gap="md">
+                        <Text size="xl" weight={600}>
+                            {t('error.noNetwork', { postProcess: 'sentenceCase' })}
+                        </Text>
+                        <Text c="dimmed" size="sm">
+                            {t('error.noNetworkDescription', {
+                                postProcess: 'sentenceCase',
+                            })}
+                        </Text>
+                    </Stack>
+                    <Button
+                        leftSection={<Icon icon="refresh" />}
+                        onClick={handleRetry}
+                        variant="filled"
+                    >
+                        {t('common.retry', { postProcess: 'sentenceCase' })}
+                    </Button>
+                </Stack>
+            </Center>
+        </AnimatedPage>
+    );
+};
+
+const NoNetworkRouteWithBoundary = () => {
+    return (
+        <PageErrorBoundary>
+            <NoNetworkRoute />
+        </PageErrorBoundary>
+    );
+};
+
+export default NoNetworkRouteWithBoundary;