From 7b72d2af2ee159c9892193b9ca3de763d15ec15e Mon Sep 17 00:00:00 2001
From: Pouria Delfanazari <pdelfan@gmail.com>
Date: Fri, 26 Sep 2025 15:48:34 -0700
Subject: [PATCH] feat: profile header skeleton

---
 .../profile/[handle]/(withHeader)/layout.tsx  |  7 ++-
 .../profileHeader/Skeleton.ProfileHeader.tsx  | 43 +++++++++++++++++++
 2 files changed, 48 insertions(+), 2 deletions(-)
 create mode 100644 src/webapp/features/profile/components/profileHeader/Skeleton.ProfileHeader.tsx

diff --git a/src/webapp/app/(authenticated)/profile/[handle]/(withHeader)/layout.tsx b/src/webapp/app/(authenticated)/profile/[handle]/(withHeader)/layout.tsx
index 1df67354..1c49a9ec 100644
--- a/src/webapp/app/(authenticated)/profile/[handle]/(withHeader)/layout.tsx
+++ b/src/webapp/app/(authenticated)/profile/[handle]/(withHeader)/layout.tsx
@@ -3,9 +3,10 @@ import Header from '@/components/navigation/header/Header';
 import ProfileHeader from '@/features/profile/components/profileHeader/ProfileHeader';
 import ProfileTabs from '@/features/profile/components/profileTabs/ProfileTabs';
 import { Box, Container } from '@mantine/core';
-import { Fragment } from 'react';
+import { Fragment, Suspense } from 'react';
 import { ApiClient } from '@/api-client/ApiClient';
 import { createClientTokenManager } from '@/services/auth';
+import ProfileHeaderSkeleton from '@/features/profile/components/profileHeader/Skeleton.ProfileHeader';
 
 interface Props {
   params: Promise<{ handle: string }>;
@@ -37,7 +38,9 @@ export default async function Layout(props: Props) {
   return (
     <Fragment>
       <Header />
-      <ProfileHeader handle={handle} />
+      <Suspense fallback={<ProfileHeaderSkeleton />}>
+        <ProfileHeader handle={handle} />
+      </Suspense>
       <Box
         style={{
           position: 'sticky',
diff --git a/src/webapp/features/profile/components/profileHeader/Skeleton.ProfileHeader.tsx b/src/webapp/features/profile/components/profileHeader/Skeleton.ProfileHeader.tsx
new file mode 100644
index 00000000..f450ccc0
--- /dev/null
+++ b/src/webapp/features/profile/components/profileHeader/Skeleton.ProfileHeader.tsx
@@ -0,0 +1,43 @@
+import {
+  Container,
+  Stack,
+  Grid,
+  GridCol,
+  Avatar,
+  Group,
+  Skeleton,
+} from '@mantine/core';
+
+export default function ProfileHeaderSkeleton() {
+  return (
+    <Container bg={'white'} p={'xs'} size={'xl'}>
+      <Stack gap={'sm'}>
+        <Stack gap={'xl'}>
+          <Grid gutter={'md'} align={'center'} grow>
+            <GridCol span={'auto'}>
+              <Avatar size={'clamp(100px, 22vw, 180px)'} radius={'lg'} />
+            </GridCol>
+
+            <GridCol span={{ base: 12, xs: 9 }}>
+              <Stack gap={0}>
+                <Stack gap={0}>
+                  {/* Name */}
+                  <Skeleton w={'30%'} h={27} />
+
+                  {/* Handle */}
+                  <Skeleton w={'40%'} h={22} mt={'xs'} />
+                </Stack>
+
+                {/* Description */}
+                <Skeleton w={'80%'} h={22} mt={'md'} />
+              </Stack>
+            </GridCol>
+          </Grid>
+        </Stack>
+        <Group>
+          <Skeleton w={150} h={36} radius={'xl'} />
+        </Group>
+      </Stack>
+    </Container>
+  );
+}
-- 
2.51.2