92 lines
2.6 KiB
TypeScript
92 lines
2.6 KiB
TypeScript
import { Box, Divider, Group, Paper, Skeleton, Stack } from "@mantine/core";
|
|
import SwipeableTabs from "@/components/swipeable-tabs";
|
|
import TeamList from "@/features/teams/components/team-list";
|
|
import { StatsSkeleton } from "@/components/stats-overview";
|
|
import BadgeShowcaseSkeleton from "@/features/badges/components/badge-showcase-skeleton";
|
|
import HeaderSkeleton from "./header-skeleton";
|
|
import { useLingui } from "@lingui/react/macro";
|
|
|
|
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 { t } = useLingui();
|
|
const tabs = [
|
|
{
|
|
label: t`Overview`,
|
|
value: "overview",
|
|
content: <OverviewSkeleton />,
|
|
},
|
|
{
|
|
label: t`Matches`,
|
|
value: "matches",
|
|
content: <MatchListSkeleton />,
|
|
},
|
|
{
|
|
label: t`Teams`,
|
|
value: "teams",
|
|
content: <TeamList teams={[]} loading />,
|
|
},
|
|
];
|
|
|
|
return (
|
|
<>
|
|
<HeaderSkeleton />
|
|
<Box mt="lg">
|
|
<SwipeableTabs tabs={tabs} />
|
|
</Box>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default ProfileSkeleton;
|