style upgrades

src/features/teams/components/team-profile/index.tsx

@@ -2,10 +2,11 @@ import { Box, Divider, Text, Stack } from "@mantine/core";
 import Header from "./header";
 import SwipeableTabs from "@/components/swipeable-tabs";
 import TournamentList from "@/features/tournaments/components/tournament-list";
-import StatsOverview from "@/components/stats-overview";
+import StatsOverview, { StatsSkeleton } from "@/components/stats-overview";
 import { useTeam, useTeamMatches, useTeamStats } from "../../queries";
 import MatchList from "@/features/matches/components/match-list";
 import PlayerList from "@/features/players/components/player-list";
+import { MatchListSkeleton } from "./skeleton";
 
 interface ProfileProps {
   id: string;
@@ -13,7 +14,7 @@ interface ProfileProps {
 
 const TeamProfile = ({ id }: ProfileProps) => {
   const { data: team } = useTeam(id);
-  const { data: matches } = useTeamMatches(id);
+  const { data: matches, isLoading: matchesLoading } = useTeamMatches(id);
   const { data: stats, isLoading: statsLoading, error: statsError } = useTeamStats(id);
   if (!team) return <Text p="md">Team not found</Text>;
 
@@ -28,13 +29,21 @@ const TeamProfile = ({ id }: ProfileProps) => {
         <Divider my="md" />
         <Stack>
           <Text px="md" size="md" fw={700}>Statistics</Text>
-          <StatsOverview statsData={statsError ? null : stats || null} isLoading={statsLoading} />
+          {statsLoading ? (
+            <StatsSkeleton />
+          ) : (
+            <StatsOverview statsData={statsError ? null : stats || null} />
+          )}
         </Stack>
       </>,
     },
     {
       label: "Matches",
-      content: <MatchList matches={matches || []} />,
+      content: matchesLoading ? (
+        <MatchListSkeleton />
+      ) : (
+        <MatchList matches={matches || []} />
+      ),
     },
     {
       label: "Tournaments",

src/features/teams/components/team-profile/skeleton.tsx

@@ -1,26 +1,80 @@
-import { Box, Flex, Loader } from "@mantine/core";
+import { Box, Divider, Group, List, ListItem, Paper, Skeleton, Stack } from "@mantine/core";
 import SwipeableTabs from "@/components/swipeable-tabs";
+import TournamentList from "@/features/tournaments/components/tournament-list";
+import { StatsSkeleton } from "@/components/stats-overview";
 import HeaderSkeleton from "./header-skeleton";
 
-const SkeletonLoader = () => (
-    <Flex h="30vh" w="100%" align="center" justify="center">
-        <Loader />
-    </Flex>
-)
+const MatchCardSkeleton = ({ opacity = 1 }: { opacity?: number }) => (
+  <Paper px="md" py="md" withBorder radius="md" style={{ opacity }}>
+    <Stack gap="sm">
+      <Skeleton height={12} width="55%" radius="sm" />
+      {[0, 1].map((row) => (
+        <Group key={row} justify="space-between" align="center" wrap="nowrap">
+          <Group gap="sm" wrap="nowrap" style={{ flex: 1 }}>
+            <Skeleton height={40} width={40} radius="sm" />
+            <Skeleton height={14} width="40%" radius="sm" />
+          </Group>
+          <Skeleton height={12} width={64} radius="sm" />
+        </Group>
+      ))}
+    </Stack>
+  </Paper>
+);
+
+export const MatchListSkeleton = ({ count = 4 }: { count?: number }) => (
+  <Stack p="md" gap="sm">
+    {Array.from({ length: count }).map((_, index) => (
+      <MatchCardSkeleton
+        key={`match-skeleton-${index}`}
+        opacity={Math.max(1 - index * 0.15, 0.4)}
+      />
+    ))}
+  </Stack>
+);
+
+const PlayerListSkeleton = ({ count = 2 }: { count?: number }) => (
+  <List>
+    {Array.from({ length: count }).map((_, index) => (
+      <ListItem
+        py="xs"
+        key={`player-skeleton-${index}`}
+        icon={<Skeleton circle height={40} width={40} />}
+      >
+        <Skeleton height={16} width={180} radius="sm" />
+      </ListItem>
+    ))}
+  </List>
+);
+
+export const OverviewSkeleton = () => (
+  <>
+    <Stack px="md">
+      <Skeleton height={16} width={70} radius="sm" />
+      <PlayerListSkeleton />
+    </Stack>
+    <Divider my="md" />
+    <Stack>
+      <Box px="md">
+        <Skeleton height={16} width={80} radius="sm" />
+      </Box>
+      <StatsSkeleton />
+    </Stack>
+  </>
+);
 
 const ProfileSkeleton = () => {
   const tabs = [
     {
       label: "Overview",
-      content: <SkeletonLoader />,
+      content: <OverviewSkeleton />,
     },
     {
       label: "Matches",
-      content: <SkeletonLoader />,
+      content: <MatchListSkeleton />,
     },
     {
       label: "Tournaments",
-      content: <SkeletonLoader />,
+      content: <TournamentList tournaments={[]} loading />,
     },
   ];