rules, bracket page

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

@@ -0,0 +1,14 @@
+import { Flex, Skeleton } from "@mantine/core";
+
+const HeaderSkeleton = () => {
+  return (
+    <Flex h="10vh" px='xl' w='100%' align='self-end' gap='md'>
+      <Skeleton opacity={0} height={100} width={100} radius="50%" />
+      <Flex align='center' justify='center' gap={4} pb={20} w='100%'>
+        <Skeleton height={24} width={200} />
+      </Flex>
+    </Flex>
+  );
+};
+
+export default HeaderSkeleton;

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

@@ -33,7 +33,7 @@ const Header = ({ player }: HeaderProps) => {
 
   return (
     <>
-      <Flex px='xl' w='100%' align='self-end' gap='md'>
+      <Flex h="10vh" px='xl' w='100%' align='self-end' gap='md'>
         <Avatar name={name} size={100} />
         <Flex align='center' justify='center' gap={4} pb={20} w='100%'>
           <Title ta='center' style={{ fontSize, lineHeight: 1.2 }}>{name}</Title>

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

@@ -0,0 +1,42 @@
+import { Box, Flex, Loader } from "@mantine/core";
+import Header from "./header";
+import SwipeableTabs from "@/components/swipeable-tabs";
+import { usePlayer, usePlayerMatches, usePlayerStats } from "../../queries";
+import TeamList from "@/features/teams/components/team-list";
+import StatsOverview from "@/shared/components/stats-overview";
+import MatchList from "@/features/matches/components/match-list";
+import HeaderSkeleton from "./header-skeleton";
+
+const SkeletonLoader = () => (
+    <Flex h="30vh" w="100%" align="center" justify="center">
+        <Loader />
+    </Flex>
+)
+
+const ProfileSkeleton = () => {
+  const tabs = [
+    {
+      label: "Overview",
+      content: <SkeletonLoader />,
+    },
+    {
+      label: "Matches",
+      content: <SkeletonLoader />,
+    },
+    {
+      label: "Teams",
+      content: <SkeletonLoader />,
+    },
+  ];
+
+  return (
+    <>
+      <HeaderSkeleton />
+      <Box mt="lg">
+        <SwipeableTabs tabs={tabs} />
+      </Box>
+    </>
+  );
+};
+
+export default ProfileSkeleton;