From 66e763eb1cf803bef4d88bd37715229fda3aadd6 Mon Sep 17 00:00:00 2001
From: Khairul Hidayat <khai@rul.sh>
Date: Thu, 11 Jan 2024 03:46:26 +0000
Subject: [PATCH] feat: add skeleton loader

---
 src/components/ui/Skeleton.tsx | 15 +++++++++++++++
 src/pages/artworks/page.tsx    | 16 ++++++++--------
 2 files changed, 23 insertions(+), 8 deletions(-)
 create mode 100644 src/components/ui/Skeleton.tsx

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>
   );