nandi.uk
This repository has no description
1import { Stack, Skeleton, Group, Box } from '@mantine/core';
2import UrlAddedBySummarySkeleton from '@/features/semble/components/urlAddedBySummary/Skeleton.UrlAddedBySummary';
3
4export default function BlueskySembleHeaderSkeleton() {
5 return (
6 <Stack gap="md" mx="auto" w={'100%'}>
7 {/* "Semble" */}
8 <Skeleton w={120} h={16} />
9
10 {/* Post */}
11 <Stack gap="xs" w={'100%'}>
12 {/* Author row */}
13 <Group gap="xs" justify="space-between" wrap="nowrap">
14 <Group gap="xs" wrap="nowrap">
15 <Skeleton circle h={40} w={40} />
16
17 <Stack gap={6} flex={1}>
18 <Skeleton w={130} h={16} />
19 <Skeleton w={90} h={14} />
20 </Stack>
21 </Group>
22
23 {/* Bluesky icon placeholder */}
24 <Skeleton h={18} w={18} radius="xl" />
25 </Group>
26
27 {/* Post text + embed */}
28 <Stack gap="xs" w="100%">
29 <Box>
30 <Stack gap={6}>
31 <Skeleton w="90%" h={14} />
32 <Skeleton w="85%" h={14} />
33 <Skeleton w="95%" h={14} />
34 </Stack>
35 </Box>
36
37 {/* Embed placeholder */}
38 <Skeleton w="100%" h={180} radius="md" />
39 </Stack>
40 </Stack>
41
42 {/* Actions */}
43 <Stack gap="sm" align="center">
44 <Group gap="xs">
45 <Skeleton w={44} h={44} circle />
46 <Skeleton w={131} h={44} radius="xl" />
47 </Group>
48 </Stack>
49
50 {/* URL added by summary */}
51 <UrlAddedBySummarySkeleton />
52 </Stack>
53 );
54}