Combined util components and added no-connectivity page

src/admin/admin.jsx

@@ -2,7 +2,7 @@ import { Routes, Route, Navigate, Link, useLocation } from 'react-router-dom';
 import { useState } from 'react';
 import Tab from '@mui/material/Tab';
 import Tabs from '@mui/material/Tabs';
-import Title from '../core/title';
+import { Title } from '../core/utils';
 import styled from 'styled-components';
 import ManageIssuers from './manage-issuers';
 import ManageUsers from './manage-users';

src/admin/manage-issuers.jsx

@@ -71,7 +71,7 @@ const IssuersGrid = ({ issuers, setIssuers }) => {
         setShowConfirm(false);
     });
 
-    const IssuersDataGrid = () => issuers.length === 0 ?
+    const IssuersDataGrid = () => !issuers || issuers.length === 0 ?
         <Alert severity="info" variant="outlined">No issuers added yet</Alert> :
         (
             <>

src/core/api.jsx

@@ -41,9 +41,11 @@ const api = () => {
 
     const handleError = ({ message }) => {
         setLoading(false);
-        const msg = message.startsWith('NetworkError') || message.startsWith('Failed to fetch')
-            ? 'Unable to establish connectivity' : message;
-        showStatus('error', msg);
+        if (message.startsWith('NetworkError') || message.startsWith('Failed to fetch')) {
+            navigate('no-connectivity');
+        } else {
+            showStatus('error', message);
+        }
     };
 
     const apiCall = (method, uri, callback, body) => {

src/core/app.jsx

@@ -1,11 +1,11 @@
-import { useEffect } from 'react';
+import { NoConnectivity, NotFound } from './utils';
 import { Routes, Route, Navigate } from 'react-router-dom';
+import { useEffect } from 'react';
 import { useTheme } from '@mui/material/styles';
 import Admin from '../admin/admin';
 import api from './api';
 import Dashboard from '../dashboard/dashboard';
 import NavBar from '../nav-bar/main-menu';
-import NotFound from './not-found';
 import Profile from '../settings/profile';
 import Settings from '../settings/settings';
 import state from './state';
@@ -46,7 +46,7 @@ const App = () => {
         }
     }, []);
 
-    return issuers && accounts && (
+    return (
         <Root>
             <NavBar />
             <Content isMobile={isMobile}>
@@ -56,6 +56,7 @@ const App = () => {
                     <Route path="admin/*" element={<Admin /> } />
                     <Route path="settings/*" element={<Settings /> } />
                     <Route path="profile" element={<Profile /> } />
+                    <Route path="no-connectivity" element={<NoConnectivity />} />
                     <Route path="/" element={<Navigate to="/dash" />} />
                     <Route path="register" element={<Navigate to="/dash" /> } />
                     <Route path="login" element={<Navigate to="/dash" /> } />

src/core/utils.jsx

@@ -0,0 +1,73 @@
+import { Divider, Typography } from '@mui/material';
+import { grey } from '@mui/material/colors';
+import Box from '@mui/material/Box';
+import CircularProgress from '@mui/material/CircularProgress';
+import Skeleton from '@mui/material/Skeleton';
+import styled from 'styled-components';
+
+const Root = styled.div`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+const Card = styled.div`
+  background: ${grey[900]};
+  border-radius: .5rem;
+`;
+
+const CircularLoader = () => (
+  <Root>
+    <CircularProgress size="5rem" thickness={2} />
+  </Root>
+);
+
+const HorizontalLoader = () => (
+  <Box width="100%" height="100%">
+    <Skeleton animation="wave" />
+    <Skeleton animation="wave"  />
+    <Skeleton animation="wave" />
+    <Skeleton animation="wave" />
+  </Box>
+);
+
+const Title = ({ mb, children }) => (
+  <Typography variant="h5" m={0} mb={mb}>
+      {children}
+  </Typography>
+);
+
+const SubTitle = ({ children }) => (
+  <Typography variant="h6" mb={1}>
+      {children}
+  </Typography>
+);
+
+const Error = ({ title, message }) => (
+  <Root>
+    <Card>
+      <Typography m={3} variant="h4">
+        {title}
+      </Typography>
+      <Divider />
+      <Typography m={3}>
+        {message}
+      </Typography>
+    </Card>
+  </Root>
+);
+
+const NotFound = () => <Error title="Not Found" message="This page does not exist" />;
+
+const NoConnectivity = () => <Error title="No Connectivity" message="Sledger is unavailable at the moment" />;
+
+export {
+  CircularLoader,
+  HorizontalLoader,
+  Title,
+  SubTitle,
+  NotFound,
+  NoConnectivity,
+};

src/dashboard/balance-history.jsx

@@ -1,9 +1,9 @@
 import { BarChart } from '@mui/x-charts';
-import { HorizontalLoader } from '../core/loader';
+import { HorizontalLoader } from '../core/utils';
 import { useEffect, useState } from 'react';
 import api from '../core/api';
 import dayjs from 'dayjs';
-import Title from '../core/title';
+import { Title } from '../core/utils';
 
 const BalanceHistory = ({ setRoute }) => {
     const [ balanceHistory, setBalanceHistory ] = useState();

src/dashboard/credit-card-bills.jsx

@@ -1,6 +1,6 @@
 import { DataGrid } from '@mui/x-data-grid';
 import { formatDecimal, formatNumber, formatMonth } from '../util/formatters';
-import { HorizontalLoader } from '../core/loader';
+import { HorizontalLoader } from '../core/utils';
 import { useEffect, useState } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { useTheme } from '@mui/material/styles';
@@ -9,7 +9,7 @@ import api from '../core/api';
 import dayjs from 'dayjs';
 import state from '../core/state';
 import styled from 'styled-components';
-import Title from '../core/title';
+import { Title } from '../core/utils';
 import useMediaQuery from '@mui/material/useMediaQuery';
 
 const Root = styled.div`

src/dashboard/insights.jsx

@@ -1,7 +1,7 @@
 import { BarChart } from '@mui/x-charts';
 import { DataGrid } from '@mui/x-data-grid';
 import { formatDecimal, formatNumber } from '../util/formatters';
-import { HorizontalLoader } from '../core/loader';
+import { HorizontalLoader } from '../core/utils';
 import { pink, lightGreen } from '@mui/material/colors';
 import { Routes, Route, Navigate, Link, useLocation, useNavigate } from 'react-router-dom';
 import { useEffect, useState } from 'react';
@@ -17,7 +17,7 @@ import styled from 'styled-components';
 import Switch from '@mui/material/Switch';
 import Tab from '@mui/material/Tab';
 import Tabs from '@mui/material/Tabs';
-import Title from '../core/title';
+import { Title } from '../core/utils';
 import useMediaQuery from '@mui/material/useMediaQuery';
 
 const Root = styled.div`

src/dashboard/summary.jsx

@@ -1,14 +1,14 @@
 import { formatDecimal } from '../util/formatters';
-import { HorizontalLoader } from '../core/loader';
+import { HorizontalLoader } from '../core/utils';
 import { useEffect, useState, Fragment } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useTheme } from '@mui/material/styles';
 import Alert from '@mui/material/Alert';
 import Chip from '@mui/material/Chip';
 import state from '../core/state';
 import styled from 'styled-components';
-import SubTitle from '../core/sub-title';
-import Title from '../core/title';
+import { SubTitle } from '../core/utils';
+import { Title } from '../core/utils';
 
 const Wrapper = styled.div`
     display: flex;
@@ -247,6 +247,10 @@ const Summary = ({ setRoute }) => {
         </Alert>
     );
 
+    if (!accounts) {
+        return <HorizontalLoader />;
+    }
+
     return !accounts.find((a) => a.visible) ? <Empty /> : (
         <Root theme={theme}>
             <Title>Summary</Title>

src/index.jsx

@@ -1,6 +1,6 @@
 import CssBaseline from '@mui/material/CssBaseline';
 import { BrowserRouter } from 'react-router-dom';
-import { CircularLoader } from './core/loader';
+import { CircularLoader } from './core/utils';
 import { createRoot } from 'react-dom/client';
 import { RecoilRoot } from 'recoil';
 import { registerSW } from 'virtual:pwa-register';

src/nav-bar/main-menu.jsx

@@ -67,7 +67,7 @@ const NavBar = () => {
     ];
     const props = { pages, currentPath: location.pathname };
 
-    return (
+    return location.pathname !== '/no-connectivity' && (
         <AppBar theme={theme}>
             <Group>
                 <MobileMenu {...props} />

src/public/login.jsx

@@ -7,7 +7,7 @@ import LoginIcon from '@mui/icons-material/Login';
 import Stack from '@mui/material/Stack';
 import state from '../core/state';
 import TextField from '@mui/material/TextField';
-import Title from '../core/title';
+import { Title } from '../core/utils';
 
 const Login = () => {
     let navigate = useNavigate();

src/public/public.jsx

@@ -1,8 +1,8 @@
+import { NoConnectivity, NotFound } from '../core/utils';
 import { Routes, Route, Navigate } from 'react-router-dom';
 import Box from '@mui/material/Box';
 import Container from '@mui/material/Container';
 import Login from './login';
-import NotFound from '../core/not-found';
 import Register from './register';
 import styled from 'styled-components';
 
@@ -19,6 +19,7 @@ const Public = () => (
             <Routes>
                 <Route path="register" element={<Register /> } />
                 <Route path="login" element={<Login /> } />
+                <Route path="no-connectivity" element={<NoConnectivity />} />
                 <Route path="/" element={<Navigate to="/login" />} />
                 <Route path="*" element={<NotFound />} />
             </Routes>

src/public/register.jsx

@@ -5,7 +5,7 @@ import LoadingButton from '@mui/lab/LoadingButton';
 import Stack from '@mui/material/Stack';
 import state from '../core/state';
 import TextField from '@mui/material/TextField';
-import Title from '../core/title';
+import { Title } from '../core/utils';
 
 const Register = () => {
     let navigate = useNavigate();

src/settings/accounts-grid.jsx

@@ -6,6 +6,7 @@ import Chip from '@mui/material/Chip';
 import styled from 'styled-components';
 import Switch from '@mui/material/Switch';
 import VisibilityIcon from '@mui/icons-material/Visibility';
+import { HorizontalLoader } from '../core/utils';
 
 const GridBox = styled.div`
     display: flex;
@@ -161,6 +162,10 @@ const AccountsGrid = ({
         setSelectedAccount(selection);
     };
 
+    if (!accounts) {
+        return <HorizontalLoader />;
+    }
+
     return accounts.length === 0 ? <Empty /> : (
         <GridBox isMobile={isMobile}>
             { accounts.filter(a => a.visible).length === 0 && <NoVisible /> }

src/settings/accounts.jsx

@@ -2,7 +2,7 @@ import { useState, useEffect } from 'react';
 import AccountsGrid from './accounts-grid';
 import Stack from '@mui/material/Stack';
 import state from '../core/state';
-import Title from '../core/title';
+import { Title } from '../core/utils';
 import AccountsActionButtons from './accounts-action-buttons';
 
 const Accounts = ({ isMobile, setRoute }) => {

src/settings/profile.jsx

@@ -7,7 +7,7 @@ import LoadingButton from '@mui/lab/LoadingButton';
 import Stack from '@mui/material/Stack';
 import state from '../core/state';
 import TextField from '@mui/material/TextField';
-import Title from '../core/title';
+import { Title } from '../core/utils';
 import Tooltip from '@mui/material/Tooltip';
 
 const Profile = () => {

src/settings/templates.jsx

@@ -1,6 +1,6 @@
 import { createFilterOptions } from '@mui/material/Autocomplete';
 import { DataGrid, useGridApiRef, useGridApiContext, gridPageCountSelector } from '@mui/x-data-grid';
-import { HorizontalLoader } from '../core/loader';
+import { HorizontalLoader } from '../core/utils';
 import { useState, useEffect, useLayoutEffect, useRef } from 'react';
 import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline';
 import api from '../core/api';
@@ -13,7 +13,7 @@ import Stack from '@mui/material/Stack';
 import state from '../core/state';
 import styled from 'styled-components';
 import TextField from '@mui/material/TextField';
-import Title from '../core/title';
+import { Title } from '../core/utils';
 
 const GridBox = styled.div`
     flex: 1 1 1px;

src/transactions/transactions-grid.jsx

@@ -12,7 +12,7 @@ import {
 } from '../util/formatters';
 import { cpfCodes } from '../util/cpf-codes';
 import { GridPagination } from '@mui/x-data-grid';
-import { HorizontalLoader } from '../core/loader';
+import { HorizontalLoader } from '../core/utils';
 import { pink, lightGreen } from '@mui/material/colors';
 import { useEffect, useState } from 'react';
 import { useTheme } from '@mui/material/styles';

src/transactions/transactions-import.jsx

@@ -1,4 +1,4 @@
-import { CircularLoader } from '../core/loader';
+import { CircularLoader } from '../core/utils';
 import { useGridApiRef } from '@mui/x-data-grid';
 import { useState } from 'react';
 import api from '../core/api';