41 lines
1.3 KiB
Svelte
41 lines
1.3 KiB
Svelte
<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>
|