From d84014e15a94fcf93eecea70690e28e3c3387c9a Mon Sep 17 00:00:00 2001
From: Eva Decker <itsevadecker@gmail.com>
Date: Mon, 20 Nov 2023 02:47:12 -0500
Subject: [PATCH] feat: Lazyload images below the fold (#123)

---
 src/lib/components/CoverCard.svelte | 13 +++++++++++--
 src/routes/+page.svelte             |  9 +++++++--
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/CoverCard.svelte b/src/lib/components/CoverCard.svelte
index a8a994c..5b96d3d 100644
--- a/src/lib/components/CoverCard.svelte
+++ b/src/lib/components/CoverCard.svelte
@@ -10,6 +10,7 @@
   export let original: Album | null = null;
   export let cover: Album | null = null;
   export let slug: string | null = null;
+  export let lazy: boolean = false;
 
   let isSkeleton = false;
   if (!original && !cover && !slug) isSkeleton = true;
@@ -19,12 +20,20 @@
   <div class="albums">
     <div class="album">
       {#if original?.album_img}
-        <img src={original.album_img[1]} alt={`${original.name} album art`} />
+        <img
+          src={original.album_img[1]}
+          alt={`${original.name} album art`}
+          loading={lazy ? 'lazy' : 'eager'}
+        />
       {/if}
     </div>
     <div class="album">
       {#if cover?.album_img}
-        <img src={cover.album_img[1]} alt={`${cover.name} album art`} />
+        <img
+          src={cover.album_img[1]}
+          alt={`${cover.name} album art`}
+          loading={lazy ? 'lazy' : 'eager'}
+        />
       {/if}
     </div>
   </div>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 117ea80..0071355 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -101,8 +101,13 @@
     </div>
   {:else}
     <div class="coversGrid">
-      {#each value.covers as cover}
-        <CoverCard original={cover.original} cover={cover.cover} slug={cover.slug} />
+      {#each value.covers as cover, index}
+        <CoverCard
+          original={cover.original}
+          cover={cover.cover}
+          slug={cover.slug}
+          lazy={index > 5}
+        />
       {/each}
     </div>
     <div class="pagination">