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,27 +13,31 @@ export default function Flight() {
   });
 
   return (
-    <Stack h="calc(100vh - 95px)" m="0" p="0">
+    <Container py="xl">
-      {flight.isError ? (
+      <Stack h="calc(100vh - 95px)" m="0" p="0">
-        <Text c="red">Error fetching flight</Text>
+        {flight.isError ? (
-      ) : flight.isPending ? (
+          <Text c="red">Error fetching flight</Text>
-        <Text>Loading...</Text>
+        ) : flight.isPending ? (
-      ) : (
+          <Center h="100%">
-        <List>
+            <Loader />
-          {Object.entries(flight.data).map(([key, value]) =>
+          </Center>
-            value && value.length !== 0 ? (
+        ) : (
-              <List.Item key={key}>
+          <List>
-                <Text span>
+            {Object.entries(flight.data).map(([key, value]) =>
-                  <Text span fw={700}>
+              value && value.length !== 0 ? (
-                    {key}
+                <List.Item key={key}>
+                  <Text span>
+                    <Text span fw={700}>
+                      {key}
+                    </Text>
+                    : <Text span>{value}</Text>
                   </Text>
-                  : <Text span>{value}</Text>
+                </List.Item>
-                </Text>
+              ) : null
-              </List.Item>
+            )}
-            ) : null
+          </List>
-          )}
+        )}
-        </List>
+      </Stack>
-      )}
+    </Container>
-    </Stack>
   );
 }

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