nandi.uk
This repository has no description
feat: profile header skeleton
author
Pouria Delfanazari
date
(Sep 26, 2025, 3:48 PM -0700)
commit
7b72d2af
7b72d2af2ee159c9892193b9ca3de763d15ec15e
parent
320a0fe3
320a0fe3d82ea02a335756f8511de52d07049262
+48
-2
+5
-2
src/webapp/app/(authenticated)/profile/[handle]/(withHeader)/layout.tsx
+5
-2
src/webapp/app/(authenticated)/profile/[handle]/(withHeader)/layout.tsx
···
3
3
import ProfileHeader from '@/features/profile/components/profileHeader/ProfileHeader';
4
4
import ProfileTabs from '@/features/profile/components/profileTabs/ProfileTabs';
5
5
import { Box, Container } from '@mantine/core';
6
-
import { Fragment } from 'react';
6
+
import { Fragment, Suspense } from 'react';
7
7
import { ApiClient } from '@/api-client/ApiClient';
8
8
import { createClientTokenManager } from '@/services/auth';
9
+
import ProfileHeaderSkeleton from '@/features/profile/components/profileHeader/Skeleton.ProfileHeader';
9
10
10
11
interface Props {
11
12
params: Promise<{ handle: string }>;
···
37
38
return (
38
39
<Fragment>
39
40
<Header />
40
-
<ProfileHeader handle={handle} />
41
+
<Suspense fallback={<ProfileHeaderSkeleton />}>
42
+
<ProfileHeader handle={handle} />
43
+
</Suspense>
41
44
<Box
42
45
style={{
43
46
position: 'sticky',
+43
src/webapp/features/profile/components/profileHeader/Skeleton.ProfileHeader.tsx
+43
src/webapp/features/profile/components/profileHeader/Skeleton.ProfileHeader.tsx
···
1
+
import {
2
+
Container,
3
+
Stack,
4
+
Grid,
5
+
GridCol,
6
+
Avatar,
7
+
Group,
8
+
Skeleton,
9
+
} from '@mantine/core';
10
+
11
+
export default function ProfileHeaderSkeleton() {
12
+
return (
13
+
<Container bg={'white'} p={'xs'} size={'xl'}>
14
+
<Stack gap={'sm'}>
15
+
<Stack gap={'xl'}>
16
+
<Grid gutter={'md'} align={'center'} grow>
17
+
<GridCol span={'auto'}>
18
+
<Avatar size={'clamp(100px, 22vw, 180px)'} radius={'lg'} />
19
+
</GridCol>
20
+
21
+
<GridCol span={{ base: 12, xs: 9 }}>
22
+
<Stack gap={0}>
23
+
<Stack gap={0}>
24
+
{/* Name */}
25
+
<Skeleton w={'30%'} h={27} />
26
+
27
+
{/* Handle */}
28
+
<Skeleton w={'40%'} h={22} mt={'xs'} />
29
+
</Stack>
30
+
31
+
{/* Description */}
32
+
<Skeleton w={'80%'} h={22} mt={'md'} />
33
+
</Stack>
34
+
</GridCol>
35
+
</Grid>
36
+
</Stack>
37
+
<Group>
38
+
<Skeleton w={150} h={36} radius={'xl'} />
39
+
</Group>
40
+
</Stack>
41
+
</Container>
42
+
);
43
+
}