azpsen/tailfin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve loading displays

Browse Source
This commit is contained in:
april 2024-01-03 17:03:42 -06:00
parent c857a18619
commit 2dd6edd156
2 changed files with 45 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
web/app/routes/logbook.flights.$id/route.tsx
View File

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

21
web/app/routes/logbook.flights/flights-list.tsx
View File

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