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 size={isMedium ? 11 : 6}>
-            <>
+            <Typography variant="h4">Flights</Typography>
-              <Grid display="flex" justifyContent="center" size={12}>
+          </Grid>
                <Spinner />
              </Grid>
              <Grid display="flex" justifyContent="center" size={12}>
                Loading...
              </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>