Improve loading displays

web/app/routes/logbook.flights.$id/route.tsx

@@ -1,5 +1,5 @@
 import { client } from "@/util/api";
-import { List, Stack, Text } from "@mantine/core";
+import { Center, Container, List, Loader, Stack, Text } from "@mantine/core";
 import { useParams } from "@remix-run/react";
 import { useQuery } from "@tanstack/react-query";
 
@@ -13,11 +13,14 @@ export default function Flight() {
   });
 
   return (
+    <Container py="xl">
       <Stack h="calc(100vh - 95px)" m="0" p="0">
         {flight.isError ? (
           <Text c="red">Error fetching flight</Text>
         ) : flight.isPending ? (
-        <Text>Loading...</Text>
+          <Center h="100%">
+            <Loader />
+          </Center>
         ) : (
           <List>
             {Object.entries(flight.data).map(([key, value]) =>
@@ -35,5 +38,6 @@ export default function Flight() {
           </List>
         )}
       </Stack>
+    </Container>
   );
 }

web/app/routes/logbook.flights/flights-list.tsx

@@ -1,6 +1,15 @@
 import { client } from "@/util/api";
 import { FlightConciseSchema } from "@/util/types";
-import { NavLink, Text, Button, ScrollArea, Stack } from "@mantine/core";
+import {
+  NavLink,
+  Text,
+  Button,
+  ScrollArea,
+  Stack,
+  Loader,
+  Center,
+  Container,
+} from "@mantine/core";
 import { Link, useLocation, useNavigate } from "@remix-run/react";
 import { IconPlus } from "@tabler/icons-react";
 import { useQuery } from "@tanstack/react-query";
@@ -26,7 +35,7 @@ export function FlightsList() {
       >
         Add
       </Button>
-      <ScrollArea>
+      <ScrollArea h="calc(100vh - 95px - 50px)">
         {flights.data ? (
           flights.data.map((flight: FlightConciseSchema, index: number) => (
             <NavLink
@@ -37,6 +46,10 @@ export function FlightsList() {
               active={page === flight.id}
             />
           ))
+        ) : flights.isLoading ? (
+          <Center h="calc(100vh - 95px - 50px)">
+            <Loader />
+          </Center>
         ) : (
           <Text p="sm">No Flights</Text>
         )}
@@ -69,6 +82,10 @@ export function MobileFlightsList() {
               active={page === flight.id}
             />
           ))
+        ) : flights.isLoading ? (
+          <Center h="calc(100vh - 95px - 70px)">
+            <Loader />
+          </Center>
         ) : (
           <Text p="sm">No Flights</Text>
         )}