feat(web): add SearchSkeleton placeholder for the search page

2026-04-25 16:12:19 -04:00
parent 251d165e0b
commit 3be0dc241c
1 changed files with 40 additions and 0 deletions
@@ -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>