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 (
+ <>
+
+
+
+ )
+ })}
+
+
+
+
+
+ )
+ })}