From 3be0dc241cfbc7eb909787cb6fb4df006adf3181 Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Sat, 25 Apr 2026 16:12:19 -0400
Subject: [PATCH] feat(web): add SearchSkeleton placeholder for the search page

---
 web/src/lib/components/SearchSkeleton.svelte | 40 ++++++++++++++++++++
 1 file changed, 40 insertions(+)
 create mode 100644 web/src/lib/components/SearchSkeleton.svelte

diff --git a/web/src/lib/components/SearchSkeleton.svelte b/web/src/lib/components/SearchSkeleton.svelte
new file mode 100644
index 00000000..dba9e2ef
--- /dev/null
+++ b/web/src/lib/components/SearchSkeleton.svelte
@@ -0,0 +1,40 @@
+<script lang="ts">
+  const shimmer = 'animate-pulse bg-surface';
+</script>
+
+<div data-testid="search-skeleton" class="space-y-6">
+  <section>
+    <div class="mb-2 h-5 w-24 rounded {shimmer}"></div>
+    <div class="divide-y divide-border">
+      {#each Array.from({ length: 4 }) as _, i (i)}
+        <div class="flex items-center gap-3 px-3 py-3">
+          <span class="h-10 w-10 rounded-full {shimmer}"></span>
+          <span class="h-4 flex-1 rounded {shimmer}"></span>
+          <span class="h-3 w-20 rounded {shimmer}"></span>
+        </div>
+      {/each}
+    </div>
+  </section>
+
+  <section>
+    <div class="mb-2 h-5 w-24 rounded {shimmer}"></div>
+    <div class="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
+      {#each Array.from({ length: 5 }) as _, i (i)}
+        <div>
+          <div class="aspect-square w-full rounded {shimmer}"></div>
+          <div class="mt-2 h-4 w-3/4 rounded {shimmer}"></div>
+          <div class="mt-1 h-3 w-1/3 rounded {shimmer}"></div>
+        </div>
+      {/each}
+    </div>
+  </section>
+
+  <section>
+    <div class="mb-2 h-5 w-24 rounded {shimmer}"></div>
+    <div class="space-y-2">
+      {#each Array.from({ length: 6 }) as _, i (i)}
+        <div class="h-6 w-full rounded {shimmer}"></div>
+      {/each}
+    </div>
+  </section>
+</div>