flxn-app/src/app/routes/_authed/admin/tournaments/$id/enrollment.tsx

import { createFileRoute, redirect } from "@tanstack/react-router";
import { tournamentQueries } from "@/features/tournaments/queries";
import Enrollment from "@/features/tournaments/components/enrollment";
import { ensureServerQueryData } from "@/lib/tanstack-query/utils/ensure";
import { ListSkeleton, StatTileSkeleton } from "@/components/skeletons";
import { Skeleton, Stack } from "@mantine/core";
import { msg } from "@lingui/core/macro";

export const Route = createFileRoute("/_authed/admin/tournaments/$id/enrollment")({
  beforeLoad: async ({ context, params }) => {
    const { queryClient } = context;
    const tournament = await ensureServerQueryData(
      queryClient,
      tournamentQueries.details(params.id)
    );
    if (!tournament) throw redirect({ to: "/admin/tournaments" });
    if (tournament.regional) {
      await ensureServerQueryData(
        queryClient,
        tournamentQueries.free_agents(params.id)
      );
    } else {
      await ensureServerQueryData(
        queryClient,
        tournamentQueries.unenrolled(params.id)
      );
    }
    return { tournament };
  },
  loader: () => ({
    header: {
      withBackButton: true,
      title: msg`Enrollment`,
    },
  }),
  component: RouteComponent,
  pendingComponent: EnrollmentPending,
});

function EnrollmentPending() {
  return (
    <Stack gap="lg">
      <StatTileSkeleton align="row" />
      <Stack gap="xs">
        <Skeleton height={14} width={80} radius="sm" />
        <Skeleton height={42} radius="sm" />
      </Stack>
      <ListSkeleton rows={6} withAvatar avatarSize={32} withTrailing padding="xs" />
    </Stack>
  );
}

function RouteComponent() {
  const { tournament } = Route.useRouteContext();
  return <Enrollment tournament={tournament} />;
}