From d0f15ee1607174988162408b63865bc41951cd16 Mon Sep 17 00:00:00 2001 From: Noah Spannbauer Date: Fri, 16 May 2025 11:14:21 -0500 Subject: [PATCH] adding skeleton loader to flights page --- app/index.html | 4 +-- app/src/components/flights/Flights.tsx | 50 ++++++++++++++++++++------ 2 files changed, 41 insertions(+), 13 deletions(-) diff --git a/app/index.html b/app/index.html index e4b78ea..a59d68c 100644 --- a/app/index.html +++ b/app/index.html @@ -2,9 +2,9 @@ - + - Vite + React + TS + Flying
diff --git a/app/src/components/flights/Flights.tsx b/app/src/components/flights/Flights.tsx index b4561b2..90bfd3c 100644 --- 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([]); 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 = () => { - {isLoading && - <> - - - - - Loading... - - - } + + Flights + {!isLoading && } + {isLoading && [...Array(6)].map((_element, index) => { + return ( + + + + + + + + + + + + + {[...Array(6)].map((_element, index) => { + return ( + <> + + + + ) + })} + + + + + + ) + })}