32 lines
985 B
TypeScript
32 lines
985 B
TypeScript
import { createFileRoute } from '@tanstack/react-router'
|
|
import { tournamentQueries } from '@/features/tournaments/queries'
|
|
import { prefetchServerQuery } from '@/lib/tanstack-query/utils/prefetch'
|
|
import { Suspense } from 'react'
|
|
import TournamentCardList from '@/features/tournaments/components/tournament-card-list'
|
|
import { Skeleton, Stack } from '@mantine/core'
|
|
|
|
export const Route = createFileRoute('/_authed/tournaments/')({
|
|
beforeLoad: async ({ context }) => {
|
|
const { queryClient } = context;
|
|
prefetchServerQuery(queryClient, tournamentQueries.list())
|
|
},
|
|
loader: () => ({
|
|
header: {
|
|
withBackButton: true,
|
|
title: 'Tournaments',
|
|
},
|
|
refresh: tournamentQueries.list().queryKey
|
|
}),
|
|
component: RouteComponent,
|
|
})
|
|
|
|
function RouteComponent() {
|
|
return <Suspense fallback={<Stack gap="md">
|
|
{Array(10).fill(null).map((_, index) => (
|
|
<Skeleton height="120px" w="100%" />
|
|
))}
|
|
</Stack>}>
|
|
<TournamentCardList />
|
|
</Suspense>
|
|
}
|