Cutlery/immich
1
0
Fork 1
mirror of https://github.com/immich-app/immich.git synced 2025-06-20 22:11:01 -04:00
Code Issues Packages Projects Releases Wiki 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

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

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