From 48b001377a5c0becb9d257ba3628e29717e86c0e Mon Sep 17 00:00:00 2001
From: trafficlunar <hello@trafficlunar.net>
Date: Sun, 13 Apr 2025 23:31:06 +0100
Subject: [PATCH] feat: skeleton loader

---
 src/app/components/mii-list/index.tsx    | 14 +++++++++---
 src/app/components/mii-list/skeleton.tsx | 28 ++++++++++++++++++++++++
 2 files changed, 39 insertions(+), 3 deletions(-)
 create mode 100644 src/app/components/mii-list/skeleton.tsx

diff --git a/src/app/components/mii-list/index.tsx b/src/app/components/mii-list/index.tsx
index d132cc7..a9ca06f 100644
--- a/src/app/components/mii-list/index.tsx
+++ b/src/app/components/mii-list/index.tsx
@@ -9,6 +9,7 @@ import Carousel from "../carousel";
 import LikeButton from "../like-button";
 import FilterSelect from "./filter-select";
 import Pagination from "./pagination";
+import Skeleton from "./skeleton";
 
 interface Props {
 	isLoggedIn: boolean;
@@ -106,9 +107,9 @@ export default function MiiList({ isLoggedIn, userId }: Props) {
 									<Link href={`/mii/${mii.id}`} className="font-bold text-2xl overflow-hidden text-ellipsis text-nowrap" title={mii.name}>
 										{mii.name}
 									</Link>
-									<div id="tags" className="flex flex-wrap gap-1 *:px-2 *:py-1 *:bg-orange-300 *:rounded-full *:text-xs">
+									<div id="tags" className="flex flex-wrap gap-1">
 										{mii.tags.map((tag) => (
-											<Link href={{ query: { tags: tag } }} key={tag}>
+											<Link href={{ query: { tags: tag } }} key={tag} className="px-2 py-1 bg-orange-300 rounded-full text-xs">
 												{tag}
 											</Link>
 										))}
@@ -130,8 +131,15 @@ export default function MiiList({ isLoggedIn, userId }: Props) {
 				) : (
 					<p className="text-xl font-semibold text-center mt-10">No results found.</p>
 				)
+			) : error ? (
+				<p className="text-xl text-red-400 font-semibold text-center mt-10">Error: {error}</p>
 			) : (
-				<>{error && <p className="text-xl text-red-400 font-semibold text-center mt-10">Error: {error}</p>}</>
+				// Show skeleton when data is loading
+				<div className="grid grid-cols-4 gap-4 max-lg:grid-cols-3 max-sm:grid-cols-2 max-[25rem]:grid-cols-1">
+					{Array.from({ length: 24 }).map((_, i) => (
+						<Skeleton key={i} />
+					))}
+				</div>
 			)}
 
 			{data && <Pagination lastPage={data.lastPage} />}
diff --git a/src/app/components/mii-list/skeleton.tsx b/src/app/components/mii-list/skeleton.tsx
new file mode 100644
index 0000000..1af63ae
--- /dev/null
+++ b/src/app/components/mii-list/skeleton.tsx
@@ -0,0 +1,28 @@
+export default function Skeleton() {
+	return (
+		<div className="flex flex-col bg-zinc-50 rounded-3xl border-2 border-zinc-300 shadow-lg p-3 animate-pulse">
+			{/* Carousel Skeleton */}
+			<div className="relative rounded-xl bg-zinc-300 border-2 border-zinc-300 mb-1">
+				<div className="aspect-[3/2]"></div>
+			</div>
+
+			{/* Content */}
+			<div className="p-4 flex flex-col gap-1 h-full">
+				{/* Name */}
+				<div className="h-7 bg-zinc-300 rounded w-2/3 mb-0.5" />
+
+				{/* Tags */}
+				<div className="flex flex-wrap gap-1">
+					<div className="px-4 py-2 bg-orange-200 rounded-full w-14 h-6" />
+					<div className="px-4 py-2 bg-orange-200 rounded-full w-10 h-6" />
+				</div>
+
+				{/* Bottom row */}
+				<div className="mt-0.5 grid grid-cols-2 items-center">
+					<div className="h-6 w-12 bg-red-200 rounded" />
+					<div className="h-4 w-24 bg-zinc-200 rounded justify-self-end" />
+				</div>
+			</div>
+		</div>
+	);
+}