Improve error display

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

@@ -1,3 +1,4 @@
+import ErrorDisplay from "@/ui/error-display";
 import { client } from "@/util/api";
 import { Center, Container, List, Loader, Stack, Text } from "@mantine/core";
 import { useParams } from "@remix-run/react";
@@ -17,12 +18,7 @@ export default function Flight() {
     <Container>
       <Stack h="calc(100vh - 95px)">
         {flight.isError ? (
-          <Stack align="center" justify="center" h="100%" m="0" p="0">
-            <Text c="red">
-              <IconAlertTriangle size="3rem" />
-            </Text>
-            <Text c="red">Error fetching flight</Text>
-          </Stack>
+          <ErrorDisplay error="Error Fetching Flight" />
         ) : flight.isPending ? (
           <Center h="100%">
             <Loader />

web/app/routes/logbook.me/route.tsx

@@ -1,5 +1,6 @@
+import ErrorDisplay from "@/ui/error-display";
 import { client } from "@/util/api";
-import { Container, Text, Title } from "@mantine/core";
+import { Center, Container, Loader, Text, Title } from "@mantine/core";
 import { useQuery } from "@tanstack/react-query";
 
 export default function Me() {
@@ -10,8 +11,22 @@ export default function Me() {
 
   return (
     <Container>
+      {user.isLoading ? (
+        <Center h="calc(100vh - 95px)">
+          <Loader />
+        </Center>
+      ) : user.isError ? (
+        <Center h="calc(100vh - 95px)">
+          <ErrorDisplay error="Error Loading User" />
+        </Center>
+      ) : user.data ? (
+        <>
           <Title order={2}>{user.data.username}</Title>
-      <Text>Level {user.data.level}</Text>
+          <Text>Level {user.data.level}</Text>{" "}
+        </>
+      ) : (
+        <Text c="red">Unknown Error</Text>
+      )}
     </Container>
   );
 }

web/app/ui/error-display.tsx

@@ -0,0 +1,13 @@
+import { Stack, Text } from "@mantine/core";
+import { IconAlertTriangle } from "@tabler/icons-react";
+
+export default function ErrorDisplay({ error }: { error: string }) {
+  return (
+    <Stack align="center" justify="center" h="100%" m="0" p="0">
+      <Text c="red">
+        <IconAlertTriangle size="3rem" />
+      </Text>
+      <Text c="red">{error}</Text>
+    </Stack>
+  );
+}