style upgrades

src/app/routes/_authed/admin/tournaments/$id/assign-partners.tsx

@@ -1,7 +1,7 @@
 import { createFileRoute, redirect, useNavigate } from "@tanstack/react-router";
 import { tournamentQueries, useFreeAgents, useTournament } from "@/features/tournaments/queries";
 import { ensureServerQueryData } from "@/lib/tanstack-query/utils/ensure";
-import { Stack, Text, Button, Alert, LoadingOverlay, Group } from "@mantine/core";
+import { Stack, Text, Button, Alert, LoadingOverlay, Group, Skeleton } from "@mantine/core";
 import { useState } from "react";
 import useGenerateRandomTeams from "@/features/tournaments/hooks/use-generate-random-teams";
 import useConfirmTeamAssignments from "@/features/tournaments/hooks/use-confirm-team-assignments";
@@ -27,8 +27,23 @@ export const Route = createFileRoute("/_authed/admin/tournaments/$id/assign-part
     },
   }),
   component: RouteComponent,
+  pendingComponent: AssignPartnersPending,
 });
 
+function AssignPartnersPending() {
+  return (
+    <Stack gap="lg">
+      <Stack gap="xs">
+        <Group gap="xs" align="baseline">
+          <Skeleton height={28} width={36} radius="sm" />
+          <Skeleton height={14} width={110} radius="sm" />
+        </Group>
+        <Skeleton height={36} w="100%" radius="sm" style={{ opacity: 0.7 }} />
+      </Stack>
+    </Stack>
+  );
+}
+
 interface TeamAssignment {
   player1: PlayerInfo;
   player2: PlayerInfo;

src/app/routes/_authed/admin/tournaments/$id/index.tsx

@@ -2,6 +2,7 @@ import { createFileRoute, redirect } from "@tanstack/react-router";
 import { tournamentQueries } from "@/features/tournaments/queries";
 import ManageTournament from "@/features/tournaments/components/manage-tournament";
 import { ensureServerQueryData } from "@/lib/tanstack-query/utils/ensure";
+import { Divider, Group, Skeleton, Stack } from "@mantine/core";
 
 export const Route = createFileRoute("/_authed/admin/tournaments/$id/")({
   beforeLoad: async ({ context, params }) => {
@@ -23,8 +24,26 @@ export const Route = createFileRoute("/_authed/admin/tournaments/$id/")({
     withPadding: false,
   }),
   component: RouteComponent,
+  pendingComponent: ManageTournamentPending,
 });
 
+function ManageTournamentPending() {
+  return (
+    <Stack gap={0}>
+      {Array.from({ length: 5 }).map((_, index) => (
+        <div key={`manage-tournament-skeleton-${index}`} style={{ opacity: Math.max(1 - index * 0.14, 0.4) }}>
+          <Group p="md" wrap="nowrap" w="100%">
+            <Skeleton height={20} width={20} radius="sm" />
+            <Skeleton height={16} width="45%" radius="sm" />
+            <Skeleton ml="auto" height={20} width={20} radius="sm" />
+          </Group>
+          <Divider />
+        </div>
+      ))}
+    </Stack>
+  );
+}
+
 function RouteComponent() {
   const { id } = Route.useParams();
   return <ManageTournament tournamentId={id} />;

src/app/routes/_authed/admin/tournaments/$id/teams.tsx

@@ -2,6 +2,7 @@ import { createFileRoute, redirect } from "@tanstack/react-router";
 import { tournamentQueries } from "@/features/tournaments/queries";
 import ManageTeams from "@/features/teams/components/manage-teams";
 import { ensureServerQueryData } from "@/lib/tanstack-query/utils/ensure";
+import { Box, Divider, Group, Skeleton, Stack } from "@mantine/core";
 
 export const Route = createFileRoute("/_authed/admin/tournaments/$id/teams")({
   beforeLoad: async ({ context, params }) => {
@@ -23,8 +24,37 @@ export const Route = createFileRoute("/_authed/admin/tournaments/$id/teams")({
     withPadding: false,
   }),
   component: RouteComponent,
+  pendingComponent: ManageTeamsPending,
 });
 
+function ManageTeamsPending() {
+  return (
+    <Stack gap="xs">
+      <Box px="md">
+        <Skeleton height={42} radius="sm" />
+      </Box>
+      <Box px="md">
+        <Skeleton height={12} width={90} radius="sm" />
+      </Box>
+      <Stack gap={0}>
+        {Array.from({ length: 8 }).map((_, index) => (
+          <div key={`manage-teams-skeleton-${index}`} style={{ opacity: Math.max(1 - index * 0.1, 0.35) }}>
+            <Group p="xs" wrap="nowrap" w="100%">
+              <Skeleton height={40} width={40} radius="sm" />
+              <Skeleton height={16} width="45%" radius="sm" />
+              <Stack ml="auto" gap={6} align="flex-end">
+                <Skeleton height={10} width={90} radius="sm" />
+                <Skeleton height={10} width={70} radius="sm" />
+              </Stack>
+            </Group>
+            <Divider />
+          </div>
+        ))}
+      </Stack>
+    </Stack>
+  );
+}
+
 function RouteComponent() {
   const { id } = Route.useParams();
   const { tournament } = Route.useRouteContext();