tbelway/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-11-04 03:39:37 -05:00
Code Issues Packages Projects Releases Wiki 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 isSharingView = false;
export let showItemCount = true; export let showItemCount = true;
export let showContextMenu = true; export let showContextMenu = true;
export let preload = false;
let showVerticalDots = false; let showVerticalDots = false;
$: imageData = album.albumThumbnailAssetId $: imageData = album.albumThumbnailAssetId
@ -83,6 +84,7 @@
<div class={`relative aspect-square`}> <div class={`relative aspect-square`}>
<img <img
loading={preload ? 'eager' : 'lazy'}
src={imageData} src={imageData}
alt={album.id} alt={album.id}
class={`z-0 h-full w-full rounded-3xl object-cover transition-all duration-300 hover:shadow-lg`} 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 --> <!-- Album Card -->
{#if $albumViewSettings.view === AlbumViewMode.Cover} {#if $albumViewSettings.view === AlbumViewMode.Cover}
<div class="grid grid-cols-[repeat(auto-fill,minmax(14rem,1fr))]"> <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 }}> <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> </a>
{/each} {/each}
</div> </div>

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

@ -144,9 +144,15 @@
<section> <section>
<div class="ml-6 text-4xl font-medium text-black/70 dark:text-white/80">ALBUMS</div> <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))]"> <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 }}> <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> </a>
{/each} {/each}
</div> </div>

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

@ -94,9 +94,9 @@
<div> <div>
<!-- Share Album List --> <!-- Share Album List -->
<div class="grid grid-cols-[repeat(auto-fill,minmax(14rem,1fr))]"> <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 }}> <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> </a>
{/each} {/each}
</div> </div>