From 2dd6edd156906bfe457a79b65db1b68438380c51 Mon Sep 17 00:00:00 2001
From: april <aprl.petersen@gmail.com>
Date: Wed, 3 Jan 2024 17:03:42 -0600
Subject: [PATCH] Improve loading displays

---
 web/app/routes/logbook.flights.$id/route.tsx  | 48 ++++++++++---------
 .../routes/logbook.flights/flights-list.tsx   | 21 +++++++-
 2 files changed, 45 insertions(+), 24 deletions(-)

diff --git a/web/app/routes/logbook.flights.$id/route.tsx b/web/app/routes/logbook.flights.$id/route.tsx
index eef6ca6..1adfb7d 100644
--- a/web/app/routes/logbook.flights.$id/route.tsx
+++ b/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">
-      {flight.isError ? (
-        <Text c="red">Error fetching flight</Text>
-      ) : flight.isPending ? (
-        <Text>Loading...</Text>
-      ) : (
-        <List>
-          {Object.entries(flight.data).map(([key, value]) =>
-            value && value.length !== 0 ? (
-              <List.Item key={key}>
-                <Text span>
-                  <Text span fw={700}>
-                    {key}
+    <Container py="xl">
+      <Stack h="calc(100vh - 95px)" m="0" p="0">
+        {flight.isError ? (
+          <Text c="red">Error fetching flight</Text>
+        ) : flight.isPending ? (
+          <Center h="100%">
+            <Loader />
+          </Center>
+        ) : (
+          <List>
+            {Object.entries(flight.data).map(([key, value]) =>
+              value && value.length !== 0 ? (
+                <List.Item key={key}>
+                  <Text span>
+                    <Text span fw={700}>
+                      {key}
+                    </Text>
+                    : <Text span>{value}</Text>
                   </Text>
-                  : <Text span>{value}</Text>
-                </Text>
-              </List.Item>
-            ) : null
-          )}
-        </List>
-      )}
-    </Stack>
+                </List.Item>
+              ) : null
+            )}
+          </List>
+        )}
+      </Stack>
+    </Container>
   );
 }
diff --git a/web/app/routes/logbook.flights/flights-list.tsx b/web/app/routes/logbook.flights/flights-list.tsx
index 4c688b0..b1ace34 100644
--- a/web/app/routes/logbook.flights/flights-list.tsx
+++ b/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>
         )}