helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-11-14 17:36:12 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(web): skeleton on asset loading (#3867)

Browse source 
* feat(web): skeletron on asset loading

* feat: add skeleton to all asset grid views

---------

Co-authored-by: Jason Rasmussen <jrasm91@gmail.com>
This commit is contained in:
JasBogans 2023-09-01 19:12:09 +02:00 • committed by GitHub
parent 9539a361e4
commit 46c716d450
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 49 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

16
web/src/lib/components/photos-page/asset-grid.svelte
View file

@ -324,6 +324,22 @@
>
{#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" />
{/if}
<section id="virtual-timeline" style:height={$assetStore.timelineHeight + 'px'}>
{#each $assetStore.buckets as bucket, bucketIndex (bucketIndex)}
<IntersectionObserver

4
web/src/lib/stores/assets.store.ts
View file

@ -40,6 +40,7 @@ export class AssetStore {
private store$ = writable(this);
private assetToBucket: Record<string, AssetLookup> = {};
initialized = false;
timelineHeight = 0;
buckets: AssetBucket[] = [];
assets: AssetResponseDto[] = [];
@ -52,6 +53,7 @@ export class AssetStore {
subscribe = this.store$.subscribe;
async init(viewport: Viewport) {
this.initialized = false;
this.timelineHeight = 0;
this.buckets = [];
this.assets = [];
@ -63,6 +65,8 @@ export class AssetStore {
key: api.getKey(),
});
this.initialized = true;
this.buckets = buckets.map((bucket) => {
const unwrappedWidth = (3 / 2) * bucket.count * THUMBNAIL_HEIGHT * (7 / 10);
const rows = Math.ceil(unwrappedWidth / viewport.width);