feat: toast.

movementlabsxyz · Feb 3, 2024 · b7eb0f9 · b7eb0f9
1 parent 0fc253c
commit b7eb0f9
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 4 deletions.
diff --git a/src/app/loading.tsx → src/app/loading.ignore.tsx b/src/app/loading.tsx → src/app/loading.ignore.tsx
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -4,7 +4,7 @@ import styles from './page.module.css';
 import { ApiHealthCheckAsyncOperations } from '@/data';
 import { components } from '@/presentation';
 import { useQuery, QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { Skeleton } from '@mui/material';
+import { Alert, Skeleton, Snackbar } from '@mui/material';
 import { HealthChecks, Region } from '@/util';
 import { useRouter, useSearchParams } from 'next/navigation';
 import GitHub from '@mui/icons-material/GitHub';
@@ -48,6 +48,8 @@ function Home() {
     router.push(`/?page=${newPage}`, undefined);
   };
 
+
+
   return (
     <div className={styles.container}>
       <components.HeaderStd
@@ -64,15 +66,15 @@ function Home() {
         }}
       />
       <main className={styles.main}>
-        {isLoading ? (
+        {isLoading||error ? (
           <>
             <Skeleton variant="rectangular" width="100%" height={118} />
             <Skeleton variant="text" />
             <Skeleton variant="text" />
             <Skeleton variant="text" />
           </>
         ) : error ? (
-          <span>Error: {error.message}</span>
+          <span>An Err</span>
         ) : (
           <section style={{
             display: 'flex',
@@ -100,7 +102,7 @@ function Home() {
           <components.PageSelector
             onPageChange={handlePageChange}
             totalPages={healthChecks?.totalPages || 0}
-            currentPage={page + 1}/>
+            currentPage={healthChecks?.totalPages ? page + 1 : 0}/>
         </Container>
       </main>
       <footer className={styles.footer}>
@@ -116,6 +118,12 @@ function Home() {
         </Box>
       </Container>
     </footer>
+    {error && <Snackbar
+        open={!!error}
+        autoHideDuration={6000}
+      >
+        <Alert severity="error">{error?.message}</Alert>
+      </Snackbar>}
     </div>
   );
 }