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;