Hey is a decentralized and permissionless social media app built with Lens Protocol 🌿

Refactor skeleton loader (#5793)

authored by yoginth.com and committed by

GitHub b85ed84c 9bc82b9e

+89 -63
+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
··· 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
··· 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
··· 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
··· 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
··· 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 );
+2 -1
apps/web/src/components/Shared/Account/TopUp/Transfer.tsx
··· 1 + import Skeleton from "@/components/Shared/Skeleton"; 1 2 import { Button, Card, Input, Spinner } from "@/components/Shared/UI"; 2 3 import errorToast from "@/helpers/errorToast"; 3 4 import usePreventScrollOnNumberInput from "@/hooks/usePreventScrollOnNumberInput"; ··· 133 134 <div className="mx-5 my-3 flex items-center justify-between"> 134 135 <b>Purchase</b> 135 136 {balanceLoading ? ( 136 - <span className="shimmer h-2.5 w-20 rounded-full" /> 137 + <Skeleton className="h-2.5 w-20 rounded-full" /> 137 138 ) : ( 138 139 <span className="text-gray-500 text-sm dark:text-gray-200"> 139 140 Balance: {tokenBalance} {symbol}
+4 -2
apps/web/src/components/Shared/Shimmer/FollowersYouKnowShimmer.tsx
··· 1 + import Skeleton from "../Skeleton"; 2 + 1 3 const FollowersYouKnowShimmer = () => { 2 4 return ( 3 5 <div className="flex items-center gap-x-2"> 4 6 <div className="-space-x-2 flex"> 5 7 {Array.from({ length: 3 }).map((_, index) => ( 6 - <div key={index} className="shimmer size-5 rounded-full" /> 8 + <Skeleton key={index} className="size-5 rounded-full" /> 7 9 ))} 8 10 </div> 9 - <div className="shimmer h-3 w-1/5 rounded-lg" /> 11 + <Skeleton className="h-3 w-1/5 rounded-lg" /> 10 12 </div> 11 13 ); 12 14 };
+4 -2
apps/web/src/components/Shared/Shimmer/GraphStatsShimmer.tsx
··· 1 + import Skeleton from "../Skeleton"; 2 + 1 3 interface GraphStatsShimmerProps { 2 4 count: number; 3 5 } ··· 7 9 <div className="flex gap-5 pb-1"> 8 10 {Array.from({ length: count }).map((_, index) => ( 9 11 <div className="flex items-center gap-x-2" key={index}> 10 - <div className="shimmer size-4 rounded-lg" /> 11 - <div className="shimmer h-3 w-20 rounded-lg" /> 12 + <Skeleton className="size-4 rounded-lg" /> 13 + <Skeleton className="h-3 w-20 rounded-lg" /> 12 14 </div> 13 15 ))} 14 16 </div>
+13 -11
apps/web/src/components/Shared/Shimmer/PostShimmer.tsx
··· 1 + import Skeleton from "../Skeleton"; 2 + 1 3 const PostShimmer = () => { 2 4 return ( 3 5 <div className="flex items-start space-x-3 px-5 py-4"> 4 6 <div> 5 - <div className="shimmer size-11 rounded-full" /> 7 + <Skeleton className="size-11 rounded-full" /> 6 8 </div> 7 9 <div className="w-full space-y-4"> 8 10 <div className="item flex justify-between"> 9 11 <div className="item flex space-x-3 pt-1"> 10 - <div className="shimmer h-3 w-28 rounded-lg" /> 11 - <div className="shimmer h-3 w-20 rounded-lg" /> 12 + <Skeleton className="h-3 w-28 rounded-lg" /> 13 + <Skeleton className="h-3 w-20 rounded-lg" /> 12 14 </div> 13 - <div className="shimmer h-3 w-6 rounded-lg" /> 15 + <Skeleton className="h-3 w-6 rounded-lg" /> 14 16 </div> 15 17 <div className="space-y-2"> 16 - <div className="shimmer h-3 w-7/12 rounded-lg" /> 17 - <div className="shimmer h-3 w-1/3 rounded-lg" /> 18 + <Skeleton className="h-3 w-7/12 rounded-lg" /> 19 + <Skeleton className="h-3 w-1/3 rounded-lg" /> 18 20 </div> 19 21 <div className="flex items-center justify-between gap-3"> 20 22 <div className="flex gap-6 pt-1"> 21 - <div className="shimmer size-5 rounded-lg" /> 22 - <div className="shimmer size-5 rounded-lg" /> 23 - <div className="shimmer size-5 rounded-lg" /> 24 - <div className="shimmer size-5 rounded-lg" /> 23 + <Skeleton className="size-5 rounded-lg" /> 24 + <Skeleton className="size-5 rounded-lg" /> 25 + <Skeleton className="size-5 rounded-lg" /> 26 + <Skeleton className="size-5 rounded-lg" /> 25 27 </div> 26 - <div className="shimmer h-6 w-20 rounded-full" /> 28 + <Skeleton className="h-6 w-20 rounded-full" /> 27 29 </div> 28 30 </div> 29 31 </div>
+7 -6
apps/web/src/components/Shared/Shimmer/SingleAccountShimmer.tsx
··· 1 1 import cn from "@/helpers/cn"; 2 + import Skeleton from "../Skeleton"; 2 3 3 4 interface SingleAccountShimmerProps { 4 5 className?: string; ··· 14 15 return ( 15 16 <div className={cn("flex items-center justify-between", className)}> 16 17 <div className="flex items-center space-x-3"> 17 - <div 18 - className={cn(isBig ? "size-14" : "size-11", "shimmer rounded-full")} 18 + <Skeleton 19 + className={cn(isBig ? "size-14" : "size-11", "rounded-full")} 19 20 /> 20 21 <div className="space-y-4 py-1"> 21 - <div className="shimmer h-3 w-28 rounded-lg" /> 22 - <div className="shimmer h-3 w-20 rounded-lg" /> 23 - {isBig ? <div className="shimmer h-3 w-48 rounded-lg" /> : null} 22 + <Skeleton className="h-3 w-28 rounded-lg" /> 23 + <Skeleton className="h-3 w-20 rounded-lg" /> 24 + {isBig ? <Skeleton className="h-3 w-48 rounded-lg" /> : null} 24 25 </div> 25 26 </div> 26 27 {showFollowUnfollowButton ? ( 27 - <div className="shimmer h-[26px] w-[68px] rounded-full" /> 28 + <Skeleton className="h-[26px] w-[68px] rounded-full" /> 28 29 ) : null} 29 30 </div> 30 31 );
+6 -7
apps/web/src/components/Shared/Shimmer/SingleGroupShimmer.tsx
··· 1 1 import cn from "@/helpers/cn"; 2 + import Skeleton from "../Skeleton"; 2 3 3 4 interface SingleGroupShimmerProps { 4 5 className?: string; ··· 14 15 return ( 15 16 <div className={cn("flex items-center justify-between", className)}> 16 17 <div className="flex items-center space-x-3"> 17 - <div 18 - className={cn(isBig ? "size-14" : "size-11", "shimmer rounded-lg")} 19 - /> 18 + <Skeleton className={cn(isBig ? "size-14" : "size-11", "rounded-lg")} /> 20 19 <div className="space-y-4 py-1"> 21 - <div className="shimmer h-3 w-28 rounded-lg" /> 22 - <div className="shimmer h-3 w-20 rounded-lg" /> 23 - {isBig ? <div className="shimmer h-3 w-48 rounded-lg" /> : null} 20 + <Skeleton className="h-3 w-28 rounded-lg" /> 21 + <Skeleton className="h-3 w-20 rounded-lg" /> 22 + {isBig ? <Skeleton className="h-3 w-48 rounded-lg" /> : null} 24 23 </div> 25 24 </div> 26 25 {showJoinLeaveButton ? ( 27 - <div className="shimmer h-[26px] w-[68px] rounded-full" /> 26 + <Skeleton className="h-[26px] w-[68px] rounded-full" /> 28 27 ) : null} 29 28 </div> 30 29 );
+5 -7
apps/web/src/components/Shared/Shimmer/SmallSingleAccountShimmer.tsx
··· 1 1 import cn from "@/helpers/cn"; 2 + import Skeleton from "../Skeleton"; 2 3 3 4 interface SmallSingleAccountShimmerProps { 4 5 hideSlug?: boolean; ··· 11 12 }: SmallSingleAccountShimmerProps) => { 12 13 return ( 13 14 <div className="flex items-center space-x-3"> 14 - <div 15 - className={cn( 16 - smallAvatar ? "size-4" : "size-6", 17 - "shimmer rounded-full" 18 - )} 15 + <Skeleton 16 + className={cn(smallAvatar ? "size-4" : "size-6", "rounded-full")} 19 17 /> 20 - <div className="shimmer h-3 w-28 rounded-lg" /> 21 - {!hideSlug && <div className="shimmer h-3 w-20 rounded-lg" />} 18 + <Skeleton className="h-3 w-28 rounded-lg" /> 19 + {!hideSlug && <Skeleton className="h-3 w-20 rounded-lg" />} 22 20 </div> 23 21 ); 24 22 };
+2 -1
apps/web/src/components/Shared/Shimmer/ThumbnailsShimmer.tsx
··· 1 1 import { THUMBNAIL_GENERATE_COUNT } from "@/components/Composer/ChooseThumbnail"; 2 2 import { useMemo } from "react"; 3 + import Skeleton from "../Skeleton"; 3 4 4 5 const ThumbnailsShimmer = () => { 5 6 const thumbnails = useMemo(() => Array(THUMBNAIL_GENERATE_COUNT).fill(1), []); ··· 7 8 return ( 8 9 <> 9 10 {thumbnails.map((e, i) => ( 10 - <div className="shimmer rounded-lg" key={`${e}_${i}`} /> 11 + <Skeleton className="rounded-lg" key={`${e}_${i}`} /> 11 12 ))} 12 13 </> 13 14 );
+2 -1
apps/web/src/components/Shared/Sidebar/WhoToFollow.tsx
··· 2 2 import DismissRecommendedAccount from "@/components/Shared/Account/DismissRecommendedAccount"; 3 3 import SingleAccount from "@/components/Shared/Account/SingleAccount"; 4 4 import SingleAccountShimmer from "@/components/Shared/Shimmer/SingleAccountShimmer"; 5 + import Skeleton from "@/components/Shared/Skeleton"; 5 6 import { Card, ErrorMessage, H5, Modal } from "@/components/Shared/UI"; 6 7 import { useAccountStore } from "@/store/persisted/useAccountStore"; 7 8 import { XMarkIcon } from "@heroicons/react/24/outline"; ··· 41 42 </div> 42 43 ))} 43 44 <div className="pt-2 pb-1"> 44 - <div className="shimmer h-3 w-5/12 rounded-full" /> 45 + <Skeleton className="h-3 w-5/12 rounded-full" /> 45 46 </div> 46 47 </Card> 47 48 );
+11
apps/web/src/components/Shared/Skeleton.tsx
··· 1 + import cn from "@/helpers/cn"; 2 + 3 + interface SkeletonProps { 4 + className?: string; 5 + } 6 + 7 + const Skeleton = ({ className = "" }: SkeletonProps) => { 8 + return <div className={cn("shimmer", className)} />; 9 + }; 10 + 11 + export default Skeleton;
+2 -1
apps/web/src/components/Shared/TipMenu.tsx
··· 1 1 import LoginButton from "@/components/Shared/LoginButton"; 2 + import Skeleton from "@/components/Shared/Skeleton"; 2 3 import { Button, Input, Spinner } from "@/components/Shared/UI"; 3 4 import cn from "@/helpers/cn"; 4 5 import errorToast from "@/helpers/errorToast"; ··· 168 169 {nativeBalance ? ( 169 170 `${nativeBalance} ${NATIVE_TOKEN_SYMBOL}` 170 171 ) : ( 171 - <div className="shimmer h-2.5 w-14 rounded-full" /> 172 + <Skeleton className="h-2.5 w-14 rounded-full" /> 172 173 )} 173 174 </span> 174 175 </div>