From 8e39d389b5a1270b0b5fed19e24630c74ec6e2f9 Mon Sep 17 00:00:00 2001
From: "Po-Ru, Lin" <54995766+flyotlin@users.noreply.github.com>
Date: Fri, 15 Dec 2023 00:48:29 +0800
Subject: [PATCH] feat: lazy loading on album/sharing/search (#5696)

* feat(frontend): Lazy loading on album

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

Issue #5418
---
 web/src/lib/components/album-page/album-card.svelte |  2 ++
 web/src/routes/(user)/albums/+page.svelte           |  8 ++++++--
 web/src/routes/(user)/search/+page.svelte           | 10 ++++++++--
 web/src/routes/(user)/sharing/+page.svelte          |  4 ++--
 4 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/web/src/lib/components/album-page/album-card.svelte b/web/src/lib/components/album-page/album-card.svelte
index 0055264d79..c73c4174d6 100644
--- a/web/src/lib/components/album-page/album-card.svelte
+++ b/web/src/lib/components/album-page/album-card.svelte
@@ -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`}
diff --git a/web/src/routes/(user)/albums/+page.svelte b/web/src/routes/(user)/albums/+page.svelte
index 2979b7a6fb..9a4424e796 100644
--- a/web/src/routes/(user)/albums/+page.svelte
+++ b/web/src/routes/(user)/albums/+page.svelte
@@ -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>
diff --git a/web/src/routes/(user)/search/+page.svelte b/web/src/routes/(user)/search/+page.svelte
index 1c8a895183..fca06961d0 100644
--- a/web/src/routes/(user)/search/+page.svelte
+++ b/web/src/routes/(user)/search/+page.svelte
@@ -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>
diff --git a/web/src/routes/(user)/sharing/+page.svelte b/web/src/routes/(user)/sharing/+page.svelte
index ef9b754107..3471fadca9 100644
--- a/web/src/routes/(user)/sharing/+page.svelte
+++ b/web/src/routes/(user)/sharing/+page.svelte
@@ -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>