Creepso/miru
1
0
Fork 0
mirror of https://github.com/ThaUnknown/miru.git synced 2026-03-11 22:15:35 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: proper skeleton loaders for episode cards

Browse source
This commit is contained in:
ThaUnknown 2025-06-07 00:21:34 +02:00
parent 8d500252c6
commit d06c20ae52
No known key found for this signature in database
4 changed files with 23 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -1,6 +1,6 @@
{
"name": "ui",
"version": "6.3.48",
"version": "6.3.49",
"license": "BUSL-1.1",
"private": true,
"packageManager": "pnpm@9.14.4",

1
src/lib/components/ui/cards/index.ts
View file

@ -1,5 +1,6 @@
export { default as SmallCard } from './small.svelte'
export { default as SkeletonCard } from './skeleton.svelte'
export { default as SkeletonTraceCard } from './skeletontrace.svelte'
export { default as QueryCard } from './query.svelte'
export { default as EpisodeCard } from './episode.svelte'
export { default as TraceCards } from './trace.svelte'

17
src/lib/components/ui/cards/skeletontrace.svelte Normal file
View file

@ -0,0 +1,17 @@
<script lang='ts'>
export let animate = true
</script>
<div class='p-4 shrink-0'>
<div class='item w-[16rem] flex flex-col'>
<div class='h-[9rem] w-full bg-primary/5 rounded' class:animate-pulse={animate} />
<div class='mt-4 bg-primary/5 rounded h-2 w-28' class:animate-pulse={animate} />
<div class='mt-2 bg-primary/5 rounded h-2 w-20' class:animate-pulse={animate} />
</div>
</div>
<style>
.item {
animation: 0.3s ease 0s 1 load-in;
}
</style>

8
src/lib/components/ui/cards/trace.svelte
View file

@ -2,7 +2,7 @@
import type { client } from '$lib/modules/anilist'
import type { TraceAnime } from '$lib/utils'
import { EpisodeCard, SkeletonCard } from '$lib/components/ui/cards'
import { EpisodeCard, SkeletonTraceCard } from '$lib/components/ui/cards'
export let query: ReturnType<typeof client.search>
@ -13,7 +13,7 @@
{#if $query.fetching}
{#each Array.from({ length: 50 }) as _, i (i)}
<SkeletonCard />
<SkeletonTraceCard />
{/each}
{:else if $query.error}
<div class='p-5 flex items-center justify-center w-full h-80'>
@ -50,11 +50,11 @@
{/each}
{:else}
{#each Array.from({ length: 50 }) as _, i (i)}
<SkeletonCard />
<SkeletonTraceCard />
{/each}
{/if}
{:else}
{#each Array.from({ length: 50 }) as _, i (i)}
<SkeletonCard animate={false} />
<SkeletonTraceCard animate={false} />
{/each}
{/if}