adding skeleton loader to flights page

2025-05-16 11:14:21 -05:00
2 changed files with 41 additions and 13 deletions
--- a/app/index.html
+++ b/app/index.html
@@ -2,9 +2,9 @@
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/png" href="/noahspan-logo.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>Flying</title>
  </head>
  <body>
    <div id="root"></div>
--- a/app/src/components/flights/Flights.tsx
+++ b/app/src/components/flights/Flights.tsx
@@ -1,4 +1,4 @@
-import { Box, Container, Grid, Spinner } from "@noahspan/noahspan-components";
+import { Box, Card, CardContent, Container, Grid, Skeleton, Spinner, Stack, theme, Typography, useMediaQuery } from "@noahspan/noahspan-components";
 import LogbookCard from "../logbookCard/LogbookCard";
 import { useEffect, useState } from "react";
 import { useLogs } from "../../hooks/logs/UseLogs";
@@ -7,6 +7,7 @@ import { ILogbookEntry } from "../logbook/ILogbookEntry";
 const Flights = () => {
  const [flights, setFlights] = useState<ILogbookEntry[]>([]);
  const { logs, isLoading } = useLogs();
+  const isMedium = useMediaQuery(theme.breakpoints.up('md'));

  useEffect(() => {
    const flights: ILogbookEntry[] | undefined = logs?.filter((log: ILogbookEntry) => {
@@ -24,21 +25,48 @@ const Flights = () => {
    <Container>
      <Box sx={{ margin: '20px' }}>
        <Grid container spacing={2}>
-          {isLoading &&
-            <>
-              <Grid display="flex" justifyContent="center" size={12}>
-                <Spinner />
-              </Grid>
-              <Grid display="flex" justifyContent="center" size={12}>
-                Loading...
-              </Grid>
-            </>
-          }
+          <Grid size={isMedium ? 11 : 6}>
+            <Typography variant="h4">Flights</Typography>
+          </Grid>
          {!isLoading &&
            <Grid size={12}>
              <LogbookCard logs={flights} mode='flights' />
            </Grid>
          }
+          {isLoading && [...Array(6)].map((_element, index) => {
+            return (
+              <Grid display='flex' justifyContent='center' size={12}>
+                <Card
+                  key={index}
+                  sx={{
+                    width: '100%'
+                  }}
+                >
+                  <CardContent>
+                    <Grid container>
+                      <Grid size={12}>
+                        <Skeleton height={60} width={200} />
+                        <Skeleton height={30} width={200} />
+                      </Grid>
+                      <Grid size={12}>
+                        <Skeleton height={300} />
+                      </Grid>
+                      <Grid size={12}>
+                        {[...Array(6)].map((_element, index) => {
+                          return (
+                            <>
+                              <Skeleton height={20} width={300} />
+                              <Skeleton height={40} width={300} />
+                            </>
+                          )
+                        })}
+                      </Grid>
+                    </Grid>
+                  </CardContent>
+                </Card>
+              </Grid>
+            )
+          })}
        </Grid>
      </Box>
    </Container>