20 lines
No EOL
782 B
Svelte
20 lines
No EOL
782 B
Svelte
<svelte:options runes={true} />
|
|
|
|
<script>
|
|
import ViewCard from "$lib/components/custom/Views/ViewCard.svelte";
|
|
import {Skeleton} from "$lib/components/ui/skeleton";
|
|
let {albums, updateScroll, selectAlbum} = $props();
|
|
let self = $state();
|
|
</script>
|
|
|
|
<div class="border border-2 flex flex-row flex-wrap gap-2 p-2 h-fit max-h-full items-start justify-start overflow-y-auto" bind:this={self} onscroll={() => updateScroll(self)}>
|
|
{#if albums.loading}
|
|
{#each [...Array(20).keys()] as i}
|
|
<Skeleton id={"album-skeleton-" + i} class="rounded-md w-56 h-72 border border-2 bg-background" />
|
|
{/each}
|
|
{:else}
|
|
{#each albums.list as album}
|
|
<ViewCard data={album} onselectalbum={selectAlbum}/>
|
|
{/each}
|
|
{/if}
|
|
</div> |