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/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>

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>

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>