self-hosted/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2024-11-28 09:33:27 +02:00
Code Issues Releases Activity

fix(web): skeleton loading (#3972)

Browse Source
This commit is contained in:
Jason Rasmussen 2023-09-04 19:33:57 -04:00 committed by GitHub
parent 04d4a30471
commit 9217fb4094
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 14 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
web/src/lib/components/photos-page/asset-grid.svelte
View File

@ -30,6 +30,7 @@
let { isViewing: showAssetViewer, asset: viewingAsset } = assetViewingStore;
let element: HTMLElement;
let showShortcuts = false;
let showSkeleton = true;
$: timelineY = element?.scrollTop || 0;
@ -37,6 +38,7 @@
const dispatch = createEventDispatcher<{ select: AssetResponseDto }>();
onMount(async () => {
showSkeleton = false;
document.addEventListener('keydown', onKeyboardPress);
await assetStore.init(viewport);
});
@ -322,20 +324,21 @@
bind:this={element}
on:scroll={handleTimelineScroll}
>
<!-- skeleton -->
{#if showSkeleton}
<div class="mt-8 animate-pulse">
<div class="mb-2 h-4 w-24 rounded-full bg-immich-primary/20 dark:bg-immich-dark-primary/20" />
<div class="flex w-[120%] flex-wrap">
{#each Array(100) as _}
<div class="m-[1px] h-[10em] w-[16em] bg-immich-primary/20 dark:bg-immich-dark-primary/20" />
{/each}
</div>
</div>
{/if}
{#if element}
<slot />
<!-- skeleton -->
{#if !$assetStore.initialized}
<div class="ml-[14px] mt-5">
<div class="flex w-[120%] flex-wrap">
{#each Array(100) as _}
<div class="m-[1px] h-[10em] w-[16em] animate-pulse bg-immich-primary/20 dark:bg-immich-dark-primary/20" />
{/each}
</div>
</div>
{/if}
<!-- (optional) empty placeholder -->
{#if $assetStore.initialized && $assetStore.buckets.length === 0}
<slot name="empty" />