cosmik.network
A social knowledge tool for researchers built on ATProto
feat: semble header skeleton
+49
-1
+39
-1
src/webapp/features/semble/components/SembleHeader/Skeleton.SembleHeader.tsx
+39
-1
src/webapp/features/semble/components/SembleHeader/Skeleton.SembleHeader.tsx
···
1
+
import { metadata } from '@/app/layout';
2
+
import { Stack, Grid, GridCol, Spoiler, Text, Skeleton } from '@mantine/core';
3
+
import UrlAddedBySummarySkeleton from '../urlAddedBySummary/Skeleton.UrlAddedBySummary';
4
+
5
export default function SembleHeaderSkeleton() {
6
+
return (
7
+
<Stack gap={'xl'}>
8
+
<Grid gutter={'lg'} justify="space-between">
9
+
<GridCol span={{ base: 'auto' }}>
10
+
<Stack>
11
+
<Stack gap={0}>
12
+
<Text fw={700} c="tangerine" span>
13
+
Semble
14
+
</Text>
15
+
16
+
{/* Title */}
17
+
<Skeleton w={'100%'} h={27} />
18
+
</Stack>
19
+
20
+
{/* Description */}
21
+
<Stack gap={5}>
22
+
<Skeleton w={'80%'} h={22} />
23
+
<Skeleton w={'80%'} h={22} />
24
+
<Skeleton w={'80%'} h={22} />
25
+
</Stack>
26
+
</Stack>
27
+
</GridCol>
28
+
<GridCol span={{ base: 12, sm: 'content' }}>
29
+
<Stack gap={'sm'} align="start" flex={1}>
30
+
<Skeleton radius={'md'} h={150} w={300} maw={'100%'} />
31
+
32
+
{/*<SembleActions />*/}
33
+
</Stack>
34
+
</GridCol>
35
+
</Grid>
36
+
37
+
{/* URL added by summay */}
38
+
<UrlAddedBySummarySkeleton />
39
+
</Stack>
40
+
);
41
}
+10
src/webapp/features/semble/components/urlAddedBySummary/Skeleton.UrlAddedBySummary.tsx
+10
src/webapp/features/semble/components/urlAddedBySummary/Skeleton.UrlAddedBySummary.tsx