app/src/components/flights/Flights.tsx

@@ -1,12 +1,12 @@
-import { Box, Container } from "@noahspan/noahspan-components";
+import { Box, Container, Grid, Spinner } from "@noahspan/noahspan-components";
 import LogbookCard from "../logbookCard/LogbookCard";
 import { useEffect, useState } from "react";
 import { useLogs } from "../../hooks/logs/UseLogs";
 import { ILogbookEntry } from "../logbook/ILogbookEntry";
 
 const Flights = () => {
-  const [flights, setFlights] = useState<ILogbookEntry[]>([])
+  const [flights, setFlights] = useState<ILogbookEntry[]>([]);
-  const { logs } = useLogs();
+  const { logs, isLoading } = useLogs();
 
   useEffect(() => {
     const flights: ILogbookEntry[] | undefined = logs?.filter((log: ILogbookEntry) => {
@@ -23,7 +23,23 @@ const Flights = () => {
   return (
     <Container>
       <Box sx={{ margin: '20px' }}>
-        <LogbookCard logs={flights} mode='flights' />
+        <Grid container spacing={2}>
+          {isLoading &&
+            <>
+              <Grid display="flex" justifyContent="center" size={12}>
+                <Spinner />
+              </Grid>
+              <Grid display="flex" justifyContent="center" size={12}>
+                Loading...
+              </Grid>
+            </>
+          }
+          {!isLoading &&
+            <Grid size={12}>
+              <LogbookCard logs={flights} mode='flights' />
+            </Grid>
+          }
+        </Grid>
       </Box>
     </Container>
   )

app/src/hooks/logs/UseLogs.tsx

@@ -7,6 +7,7 @@ import { ILogbookEntry } from "../../components/logbook/ILogbookEntry";
 
 export const useLogs = () => {
   const [logs, setLogs] = useState<ILogbookEntry[]>();
+  const [isLoading, setIsLoading] = useState<boolean>(false);
   const httpClient: AxiosInstance = useHttpClient();
   const { getAccessToken } = useAccessToken();
   const isAuthenticated = useIsAuthenticated();
@@ -14,6 +15,8 @@ export const useLogs = () => {
   useEffect(() => {
     const getLogs = async () => {
       try {
+        setIsLoading(true);
+
         const config = isAuthenticated
           ? { headers: { Authorization: await getAccessToken() } }
           : {};
@@ -28,6 +31,8 @@ export const useLogs = () => {
         setLogs(logs)
       } catch (error) {
         return error;
+      } finally {
+        setIsLoading(false);
       }
     }
 
@@ -35,6 +40,7 @@ export const useLogs = () => {
   }, [])
 
   return {
-    logs
+    logs,
+    isLoading
   }
 }