yoginth.com
Hey is a decentralized and permissionless social media app built with Lens Protocol 馃尶
1import PageLayout from "@/components/Shared/PageLayout";
2import FollowersYouKnowShimmer from "@/components/Shared/Shimmer/FollowersYouKnowShimmer";
3import GraphStatsShimmer from "@/components/Shared/Shimmer/GraphStatsShimmer";
4import PostsShimmer from "@/components/Shared/Shimmer/PostsShimmer";
5import Skeleton from "@/components/Shared/Skeleton";
6
7const AccountPageShimmer = () => {
8 return (
9 <PageLayout zeroTopMargin>
10 <div className="mx-auto">
11 <Skeleton className="h-52 sm:h-64 md:rounded-xl" />
12 </div>
13 <div className="mb-4 space-y-8 px-5 md:px-0">
14 <div className="flex items-start justify-between">
15 <div className="-mt-14 sm:-mt-24 relative ml-5 size-32 rounded-full bg-gray-100 sm:size-36">
16 <Skeleton className="size-32 rounded-full ring-3 ring-gray-50 sm:size-36 dark:bg-gray-700 dark:ring-black" />
17 </div>
18 <div className="flex gap-2">
19 <Skeleton className="h-[34px] w-20 rounded-full" />
20 <Skeleton className="size-[34px] rounded-full" />
21 </div>
22 </div>
23 <div className="space-y-3">
24 <Skeleton className="h-5 w-1/3 rounded-lg" />
25 <Skeleton className="h-3 w-1/4 rounded-lg" />
26 </div>
27 <div className="space-y-5">
28 <Skeleton className="h-3 w-7/12 rounded-lg" />
29 <GraphStatsShimmer count={2} />
30 <FollowersYouKnowShimmer />
31 <GraphStatsShimmer count={2} />
32 </div>
33 </div>
34 <div className="mt-3 mb-5 flex gap-3 px-5 sm:mt-0 sm:px-0">
35 {Array.from({ length: 4 }).map((_, index) => (
36 <Skeleton className="h-8 w-14 rounded-lg sm:w-18" key={index} />
37 ))}
38 </div>
39 <PostsShimmer />
40 </PageLayout>
41 );
42};
43
44export default AccountPageShimmer;