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

feat: lazy loading on album/sharing/search (#5696)

Browse Source 
* feat(frontend): Lazy loading on album

* feat(frontend): Lazy loading on search & sharing

Issue #5418
This commit is contained in:
Po-Ru, Lin 2023-12-15 00:48:29 +08:00 committed by GitHub
parent 9bb6befc92
commit 8e39d389b5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 18 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/lib/components/album-page/album-card.svelte
View File

@ -14,6 +14,7 @@
export let isSharingView = false;
export let showItemCount = true;
export let showContextMenu = true;
export let preload = false;
let showVerticalDots = false;
$: imageData = album.albumThumbnailAssetId
@ -83,6 +84,7 @@
<div class={`relative aspect-square`}>
<img
loading={preload ? 'eager' : 'lazy'}
src={imageData}
alt={album.id}
class={`z-0 h-full w-full rounded-3xl object-cover transition-all duration-300 hover:shadow-lg`}

8
web/src/routes/(user)/albums/+page.svelte
View File

@ -289,9 +289,13 @@
<!-- Album Card -->
{#if $albumViewSettings.view === AlbumViewMode.Cover}
<div class="grid grid-cols-[repeat(auto-fill,minmax(14rem,1fr))]">
{#each $albums as album (album.id)}
{#each $albums as album, idx (album.id)}
<a data-sveltekit-preload-data="hover" href="{AppRoute.ALBUMS}/{album.id}" animate:flip={{ duration: 200 }}>
<AlbumCard {album} on:showalbumcontextmenu={(e) => showAlbumContextMenu(e.detail, album)} />
<AlbumCard
preload={idx < 20}
{album}
on:showalbumcontextmenu={(e) => showAlbumContextMenu(e.detail, album)}
/>
</a>
{/each}
</div>

10
web/src/routes/(user)/search/+page.svelte
View File

@ -144,9 +144,15 @@
<section>
<div class="ml-6 text-4xl font-medium text-black/70 dark:text-white/80">ALBUMS</div>
<div class="grid grid-cols-[repeat(auto-fill,minmax(14rem,1fr))]">
{#each albums as album (album.id)}
{#each albums as album, idx (album.id)}
<a data-sveltekit-preload-data="hover" href={`albums/${album.id}`} animate:flip={{ duration: 200 }}>
<AlbumCard {album} isSharingView={false} showItemCount={false} showContextMenu={false} />
<AlbumCard
preload={idx < 20}
{album}
isSharingView={false}
showItemCount={false}
showContextMenu={false}
/>
</a>
{/each}
</div>

4
web/src/routes/(user)/sharing/+page.svelte
View File

@ -94,9 +94,9 @@
<div>
<!-- Share Album List -->
<div class="grid grid-cols-[repeat(auto-fill,minmax(14rem,1fr))]">
{#each data.sharedAlbums as album (album.id)}
{#each data.sharedAlbums as album, idx (album.id)}
<a data-sveltekit-preload-data="hover" href={`albums/${album.id}`} animate:flip={{ duration: 200 }}>
<AlbumCard {album} isSharingView showContextMenu={false} />
<AlbumCard preload={idx < 20} {album} isSharingView showContextMenu={false} />
</a>
{/each}
</div>