39 lines
1.2 KiB
TypeScript
39 lines
1.2 KiB
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'
|
|
import { msg } from '@lingui/core/macro'
|
|
|
|
export const Route = createFileRoute('/_authed/tournaments/')({
|
|
beforeLoad: async ({ context }) => {
|
|
const { queryClient } = context;
|
|
prefetchServerQuery(queryClient, tournamentQueries.list())
|
|
},
|
|
loader: () => ({
|
|
header: {
|
|
withBackButton: true,
|
|
title: msg`Tournaments`,
|
|
},
|
|
refresh: tournamentQueries.list().queryKey
|
|
}),
|
|
component: RouteComponent,
|
|
})
|
|
|
|
function RouteComponent() {
|
|
return <Suspense fallback={<Stack gap="md">
|
|
{Array(10).fill(null).map((_, index) => (
|
|
<Skeleton
|
|
key={`tournament-card-skeleton-${index}`}
|
|
height="120px"
|
|
w="100%"
|
|
radius="md"
|
|
style={{ opacity: Math.max(1 - index * 0.08, 0.35) }}
|
|
/>
|
|
))}
|
|
</Stack>}>
|
|
<TournamentCardList />
|
|
</Suspense>
|
|
}
|