style upgrades

src/features/players/components/profile/skeleton.tsx

@@ -1,31 +1,75 @@
-import { Box, Flex, Loader } from "@mantine/core";
-import Header from "./header";
+import { Box, Divider, Group, Paper, Skeleton, Stack } from "@mantine/core";
 import SwipeableTabs from "@/components/swipeable-tabs";
-import { usePlayer, usePlayerMatches, usePlayerStats } from "../../queries";
 import TeamList from "@/features/teams/components/team-list";
-import StatsOverview, { StatsSkeleton } from "@/components/stats-overview";
-import MatchList from "@/features/matches/components/match-list";
+import { StatsSkeleton } from "@/components/stats-overview";
+import BadgeShowcaseSkeleton from "@/features/badges/components/badge-showcase-skeleton";
 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>
+);
+
+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 OverviewSkeleton = () => (
+  <>
+    <Stack px="md">
+      <Group justify="space-between" align="center">
+        <Skeleton height={16} width={70} radius="sm" />
+        <Skeleton height={14} width={100} radius="sm" />
+      </Group>
+      <BadgeShowcaseSkeleton />
+    </Stack>
+    <Divider my="md" />
+    <Stack>
+      <Group gap="xs" px="md" justify="space-between" align="center">
+        <Skeleton height={16} width={80} radius="sm" />
+        <Group gap="xs">
+          <Skeleton height={22} width={40} radius="xl" />
+          <Skeleton height={22} width={64} radius="xl" />
+          <Skeleton height={22} width={62} radius="xl" />
+        </Group>
+      </Group>
+      <StatsSkeleton />
+    </Stack>
+  </>
+);
 
 const ProfileSkeleton = () => {
   const tabs = [
     {
       label: "Overview",
-      content: <StatsSkeleton />,
+      content: <OverviewSkeleton />,
     },
     {
       label: "Matches",
-      content: <SkeletonLoader />,
+      content: <MatchListSkeleton />,
     },
     {
       label: "Teams",
-      content: <SkeletonLoader />,
+      content: <TeamList teams={[]} loading />,
     },
   ];