diff --git a/src/components/ui/Skeleton.tsx b/src/components/ui/Skeleton.tsx new file mode 100644 index 0000000..0968d73 --- /dev/null +++ b/src/components/ui/Skeleton.tsx @@ -0,0 +1,15 @@ +import { cn } from "@/utility/utils" + +function Skeleton({ + className, + ...props +}: React.HTMLAttributes<HTMLDivElement>) { + return ( + <div + className={cn("animate-pulse rounded-md bg-slate-100 dark:bg-slate-800", className)} + {...props} + /> + ) +} + +export { Skeleton } diff --git a/src/pages/artworks/page.tsx b/src/pages/artworks/page.tsx index 7a08c0f..e3e4137 100644 --- a/src/pages/artworks/page.tsx +++ b/src/pages/artworks/page.tsx @@ -12,6 +12,7 @@ import { useMemo } from "react"; import Button from "@/components/ui/Button"; import { useBottomScrollListener } from "react-bottom-scroll-listener"; import loadingIllust from "@/assets/images/l9fsdoa2j7vb1.gif"; +import { Skeleton } from "@/components/ui/Skeleton"; const openingChestSfx = new Howl({ src: openingSfx, @@ -19,7 +20,7 @@ const openingChestSfx = new Howl({ }); const ArtworksPage = () => { - const { data, isFetchingNextPage, hasNextPage, fetchNextPage } = + const { data, isLoading, isFetchingNextPage, hasNextPage, fetchNextPage } = useInfiniteQuery({ queryKey: ["artworks"], queryFn: ({ pageParam = 1 }) => { @@ -87,6 +88,12 @@ const ArtworksPage = () => { </div> </Link> ))} + + {isLoading || isFetchingNextPage + ? [...Array(12)].map((_, idx) => ( + <Skeleton key={idx} className="aspect-[0.8]" /> + )) + : null} </div> {hasNextPage && !isFetchingNextPage ? ( @@ -105,13 +112,6 @@ const ArtworksPage = () => { </div> ) : null} - {isFetchingNextPage ? ( - <div className="flex flex-col justify-center items-center text-center mt-12 py-8"> - <img src={loadingIllust} className="h-32 animate-bounce" /> - <p className="mt-2">Loading next items..</p> - </div> - ) : null} - <ViewSheet modal={viewItemModal} /> </div> );