Hey is a decentralized and permissionless social media app built with Lens Protocol 🌿
Refactor skeleton loader (#5793)
authored by
GitHub
b85ed84c
9bc82b9e
+89
-63
+9
-8
apps/web/src/components/Account/Shimmer.tsx
+9
-8
apps/web/src/components/Account/Shimmer.tsx
···
1
1
import { PageLayout } from "@/components/Shared/PageLayout";
2
2
import GraphStatsShimmer from "@/components/Shared/Shimmer/GraphStatsShimmer";
3
3
import PostsShimmer from "@/components/Shared/Shimmer/PostsShimmer";
4
+
import Skeleton from "@/components/Shared/Skeleton";
4
5
import FollowersYouKnowShimmer from "../Shared/Shimmer/FollowersYouKnowShimmer";
5
6
6
7
const AccountPageShimmer = () => {
7
8
return (
8
9
<PageLayout zeroTopMargin>
9
10
<div className="mx-auto">
10
-
<div className="shimmer h-52 sm:h-64 md:rounded-xl" />
11
+
<Skeleton className="h-52 sm:h-64 md:rounded-xl" />
11
12
</div>
12
13
<div className="mb-4 space-y-8 px-5 md:px-0">
13
14
<div className="flex items-start justify-between">
14
15
<div className="-mt-14 sm:-mt-24 relative ml-5 size-32 rounded-full bg-gray-100 sm:size-36">
15
-
<div className="shimmer size-32 rounded-full ring-3 ring-gray-50 sm:size-36 dark:bg-gray-700 dark:ring-black" />
16
+
<Skeleton className="size-32 rounded-full ring-3 ring-gray-50 sm:size-36 dark:bg-gray-700 dark:ring-black" />
16
17
</div>
17
18
<div className="flex gap-2">
18
-
<div className="shimmer h-[34px] w-20 rounded-full" />
19
-
<div className="shimmer size-[34px] rounded-full" />
19
+
<Skeleton className="h-[34px] w-20 rounded-full" />
20
+
<Skeleton className="size-[34px] rounded-full" />
20
21
</div>
21
22
</div>
22
23
<div className="space-y-3">
23
-
<div className="shimmer h-5 w-1/3 rounded-lg" />
24
-
<div className="shimmer h-3 w-1/4 rounded-lg" />
24
+
<Skeleton className="h-5 w-1/3 rounded-lg" />
25
+
<Skeleton className="h-3 w-1/4 rounded-lg" />
25
26
</div>
26
27
<div className="space-y-5">
27
-
<div className="shimmer h-3 w-7/12 rounded-lg" />
28
+
<Skeleton className="h-3 w-7/12 rounded-lg" />
28
29
<GraphStatsShimmer count={2} />
29
30
<FollowersYouKnowShimmer />
30
31
<GraphStatsShimmer count={2} />
···
32
33
</div>
33
34
<div className="mt-3 mb-5 flex gap-3 px-5 sm:mt-0 sm:px-0">
34
35
{Array.from({ length: 4 }).map((_, index) => (
35
-
<div className="shimmer h-8 w-14 rounded-lg sm:w-18" key={index} />
36
+
<Skeleton className="h-8 w-14 rounded-lg sm:w-18" key={index} />
36
37
))}
37
38
</div>
38
39
<PostsShimmer />
+3
-2
apps/web/src/components/Composer/Actions/Gif/Gifs.tsx
+3
-2
apps/web/src/components/Composer/Actions/Gif/Gifs.tsx
···
1
+
import Skeleton from "@/components/Shared/Skeleton";
1
2
import { GIPHY_KEY } from "@hey/data/constants";
2
3
import type { IGif } from "@hey/types/giphy";
3
4
import { useQuery } from "@tanstack/react-query";
···
51
52
return (
52
53
<div className="grid w-full grid-cols-3 gap-1 overflow-y-auto">
53
54
{Array.from(Array(12).keys()).map((key) => (
54
-
<div
55
-
className="shimmer h-32 w-full cursor-pointer object-cover"
55
+
<Skeleton
56
+
className="h-32 w-full cursor-pointer object-cover"
56
57
key={key}
57
58
/>
58
59
))}
+7
-6
apps/web/src/components/Group/Shimmer.tsx
+7
-6
apps/web/src/components/Group/Shimmer.tsx
···
1
1
import { PageLayout } from "@/components/Shared/PageLayout";
2
2
import GraphStatsShimmer from "@/components/Shared/Shimmer/GraphStatsShimmer";
3
3
import PostsShimmer from "@/components/Shared/Shimmer/PostsShimmer";
4
+
import Skeleton from "@/components/Shared/Skeleton";
4
5
5
6
const GroupPageShimmer = () => {
6
7
return (
7
8
<PageLayout zeroTopMargin>
8
9
<div className="mx-auto">
9
-
<div className="shimmer h-52 sm:h-64 md:rounded-xl" />
10
+
<Skeleton className="h-52 sm:h-64 md:rounded-xl" />
10
11
</div>
11
12
<div className="mb-4 space-y-8 px-5 md:px-0">
12
13
<div className="flex items-start justify-between">
13
14
<div className="-mt-24 sm:-mt-24 relative ml-5 size-32 bg-gray-100 sm:size-36">
14
-
<div className="shimmer size-32 rounded-xl ring-3 ring-gray-50 sm:size-36 dark:bg-gray-700 dark:ring-black" />
15
+
<Skeleton className="size-32 rounded-xl ring-3 ring-gray-50 sm:size-36 dark:bg-gray-700 dark:ring-black" />
15
16
</div>
16
-
<div className="shimmer h-[34px] w-20 rounded-full" />
17
+
<Skeleton className="h-[34px] w-20 rounded-full" />
17
18
</div>
18
19
<div className="space-y-3">
19
-
<div className="shimmer h-5 w-1/3 rounded-lg" />
20
+
<Skeleton className="h-5 w-1/3 rounded-lg" />
20
21
</div>
21
22
<div className="space-y-5">
22
23
<div className="space-y-2">
23
-
<div className="shimmer h-3 w-7/12 rounded-lg" />
24
-
<div className="shimmer h-3 w-1/3 rounded-lg" />
24
+
<Skeleton className="h-3 w-7/12 rounded-lg" />
25
+
<Skeleton className="h-3 w-1/3 rounded-lg" />
25
26
</div>
26
27
<GraphStatsShimmer count={1} />
27
28
</div>
+7
-5
apps/web/src/components/Notification/Shimmer.tsx
+7
-5
apps/web/src/components/Notification/Shimmer.tsx
···
1
+
import Skeleton from "../Shared/Skeleton";
2
+
1
3
const NotificationShimmer = () => {
2
4
return (
3
5
<div className="flex items-start justify-between p-5">
4
6
<div className="w-4/5 space-y-4">
5
7
<div className="flex items-center space-x-3">
6
-
<div className="shimmer size-6 rounded-lg" />
7
-
<div className="shimmer size-8 rounded-full" />
8
+
<Skeleton className="size-6 rounded-lg" />
9
+
<Skeleton className="size-8 rounded-full" />
8
10
</div>
9
11
<div className="ml-9 space-y-2.5">
10
-
<div className="shimmer h-3 w-4/5 rounded-lg" />
11
-
<div className="shimmer h-3 w-3/5 rounded-lg" />
12
+
<Skeleton className="h-3 w-4/5 rounded-lg" />
13
+
<Skeleton className="h-3 w-3/5 rounded-lg" />
12
14
</div>
13
15
</div>
14
16
<div className="text-[12px] text-gray-400">
15
-
<div className="shimmer h-3 w-16 rounded-lg" />
17
+
<Skeleton className="h-3 w-16 rounded-lg" />
16
18
</div>
17
19
</div>
18
20
);
+3
-2
apps/web/src/components/Post/OpenAction/CollectAction/Splits.tsx
+3
-2
apps/web/src/components/Post/OpenAction/CollectAction/Splits.tsx
···
1
1
import AccountLink from "@/components/Shared/Account/AccountLink";
2
+
import Skeleton from "@/components/Shared/Skeleton";
2
3
import Slug from "@/components/Shared/Slug";
3
4
import { Image } from "@/components/Shared/UI";
4
5
import { BLOCK_EXPLORER_URL, TRANSFORMS } from "@hey/data/constants";
···
46
47
<div className="flex w-full items-center space-x-2">
47
48
{loading ? (
48
49
<>
49
-
<div className="shimmer size-5 rounded-full" />
50
-
<div className="shimmer h-3 w-1/4 rounded-full" />
50
+
<Skeleton className="size-5 rounded-full" />
51
+
<Skeleton className="h-3 w-1/4 rounded-full" />
51
52
</>
52
53
) : (
53
54
<>
+2
-1
apps/web/src/components/Post/RelevantPeople.tsx
+2
-1
apps/web/src/components/Post/RelevantPeople.tsx
···
1
1
import SingleAccount from "@/components/Shared/Account/SingleAccount";
2
2
import SingleAccountShimmer from "@/components/Shared/Shimmer/SingleAccountShimmer";
3
+
import Skeleton from "@/components/Shared/Skeleton";
3
4
import { Card, ErrorMessage, Modal } from "@/components/Shared/UI";
4
5
import { useAccountStore } from "@/store/persisted/useAccountStore";
5
6
import {
···
42
43
<SingleAccountShimmer showFollowUnfollowButton />
43
44
<SingleAccountShimmer showFollowUnfollowButton />
44
45
<div className="pt-2 pb-1">
45
-
<div className="shimmer h-3 w-5/12 rounded-full" />
46
+
<Skeleton className="h-3 w-5/12 rounded-full" />
46
47
</div>
47
48
</Card>
48
49
);