43 lines
1.0 KiB
TypeScript
43 lines
1.0 KiB
TypeScript
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, { StatsSkeleton } from "@/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: <StatsSkeleton />,
|
|
},
|
|
{
|
|
label: "Matches",
|
|
content: <SkeletonLoader />,
|
|
},
|
|
{
|
|
label: "Teams",
|
|
content: <SkeletonLoader />,
|
|
},
|
|
];
|
|
|
|
return (
|
|
<>
|
|
<HeaderSkeleton />
|
|
<Box mt="lg">
|
|
<SwipeableTabs tabs={tabs} />
|
|
</Box>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default ProfileSkeleton;
|