u

src/App.jsx

@@ -1,4 +1,5 @@
 import { PureComponent, lazy, Suspense } from 'react';
+import Alert from '@mui/material/Alert';
 import Box from '@mui/material/Box';
 import CircularProgress from '@mui/material/CircularProgress';
 import authAutomat from './automats/authAutomat';
@@ -34,7 +35,13 @@ class App extends PureComponent {
   }
 
   componentDidMount() {
-    this.unsubscribe = authAutomat.subscribe(this, ['status', 'user', 'hasAuth', 'hasCompany']);
+    this.unsubscribe = authAutomat.subscribe(this, [
+      'status',
+      'user',
+      'hasAuth',
+      'hasCompany',
+      'retryNotification',
+    ]);
   }
 
   componentWillUnmount() {
@@ -42,7 +49,7 @@ class App extends PureComponent {
   }
 
   render() {
-    const { status, user, hasAuth, hasCompany } = this.state;
+    const { status, user, hasAuth, hasCompany, retryNotification } = this.state;
     const isAuthed = Boolean(hasAuth ?? (status === 'authed' && user));
     const isCompanySelected = Boolean(hasCompany ?? (isAuthed && user?.selectedCompanyId != null));
 
@@ -51,12 +58,29 @@ class App extends PureComponent {
         <Box
           sx={{
             display: 'flex',
+            flexDirection: 'column',
             alignItems: 'center',
             justifyContent: 'center',
             minHeight: 'var(--df-vh, 100vh)',
             bgcolor: 'background.default',
+            gap: 2.5,
+            p: 2,
           }}
         >
+          {retryNotification ? (
+            <Alert
+              severity="warning"
+              variant="outlined"
+              sx={{
+                maxWidth: 480,
+                alignItems: 'center',
+                bgcolor: 'background.paper',
+                boxShadow: 1,
+              }}
+            >
+              {retryNotification}
+            </Alert>
+          ) : null}
           <CircularProgress />
         </Box>
       );