From f506a1141676775c7530f6f88bdae699cea90c34 Mon Sep 17 00:00:00 2001
From: Max Nuding <max.nuding@icloud.com>
Date: Sun, 20 Jul 2025 11:41:16 +0200
Subject: [PATCH] lazy load images only starting with the fifth post

---
 src/lib/components/AvatarComponent.svelte |  6 ++++--
 src/lib/components/PostComponent.svelte   | 25 +++++++++++++++++++----
 src/routes/+page.svelte                   |  4 ++--
 3 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/src/lib/components/AvatarComponent.svelte b/src/lib/components/AvatarComponent.svelte
index 980bc7b..04dd0b6 100644
--- a/src/lib/components/AvatarComponent.svelte
+++ b/src/lib/components/AvatarComponent.svelte
@@ -3,10 +3,12 @@
 
   interface Props {
     account: Account;
+    lazyLoadImages: Boolean;
   }
 
-  let { account }: Props = $props();
+  let { account, lazyLoadImages = true }: Props = $props();
   let avatarDescription: string = $derived(`Avatar for ${account.acct}`);
+  let loadingProp = $derived(lazyLoadImages ? 'lazy' : 'eager');
   let sourceSetHtml: string = $derived.by(() => {
     // Sort thumbnails by file type. This is important, because the order of the srcset entries matter.
     // We need the best format to be first
@@ -41,7 +43,7 @@
 
 <picture>
   {@html sourceSetHtml}
-  <img src={account.avatar} alt={avatarDescription} loading="lazy" width="50" height="50" />
+  <img src={account.avatar} alt={avatarDescription} loading={loadingProp} width="50" height="50" />
 </picture>
 
 <style>
diff --git a/src/lib/components/PostComponent.svelte b/src/lib/components/PostComponent.svelte
index 98d6fb7..412b05d 100644
--- a/src/lib/components/PostComponent.svelte
+++ b/src/lib/components/PostComponent.svelte
@@ -8,9 +8,10 @@
 
   interface Props {
     post: Post;
+    lazyLoadImages: Boolean;
   }
 
-  let { post }: Props = $props();
+  let { post, lazyLoadImages = true }: Props = $props();
   let displayRelativeTime = $state(false);
   const absoluteDate = new Date(post.created_at).toLocaleString();
   const timePassed = secondsSince(new Date(post.created_at));
@@ -20,6 +21,7 @@
     }
     return absoluteDate;
   });
+  let loadingProp = $derived(lazyLoadImages ? 'lazy' : 'eager');
 
   const songs = filterDuplicates(post.songs ?? []);
 
@@ -115,7 +117,7 @@
 </script>
 
 <div class="wrapper">
-  <div class="avatar"><AvatarComponent account={post.account} /></div>
+  <div class="avatar"><AvatarComponent account={post.account} {lazyLoadImages} /></div>
   <div class="account"><AccountComponent account={post.account} /></div>
   <div class="meta">
     <small><a href={post.url} target="_blank" title={absoluteDate}>{dateCreated}</a></small>
@@ -127,7 +129,12 @@
         <div class="info-wrapper">
           <picture>
             {@html getSourceSetHtml(song)}
-            <img class="bgimage" src={song.thumbnailUrl} loading="lazy" alt="Blurred cover" />
+            <img
+              class="bgimage"
+              src={song.thumbnailUrl}
+              loading={loadingProp}
+              alt="Blurred cover"
+            />
           </picture>
           <a href={song.pageUrl ?? song.postedUrl} target="_blank">
             <div class="info">
@@ -136,7 +143,7 @@
                 <img
                   src={song.thumbnailUrl}
                   alt="Cover for {song.artistName} - {song.title}"
-                  loading="lazy"
+                  loading={loadingProp}
                   width={song.thumbnailWidth}
                   height={song.thumbnailHeight}
                 />
@@ -193,6 +200,12 @@
     border-radius: 3px;
     margin-bottom: 3px;
   }
+  .cover img {
+    max-width: 200px;
+    max-height: 200px;
+    object-fit: contain;
+    border-radius: 3px;
+  }
   .bgimage {
     display: none;
     background-color: var(--color-bg);
@@ -231,6 +244,10 @@
       backdrop-filter: blur(10px);
       -webkit-backdrop-filter: blur(10px);
     }
+    .cover img {
+      max-width: 60px;
+      max-height: 60px;
+    }
     .bgimage {
       display: block;
       width: 100%;
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 1ca468a..eca0936 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -163,7 +163,7 @@
     {#if posts.length === 0}
       Sorry, no posts recommending music have been found yet
     {/if}
-    {#each posts as post (post.url)}
+    {#each posts as post, index (post.url)}
       <div
         class="post"
         transition:edgeFly|global={{
@@ -173,7 +173,7 @@
           easing: cubicInOut
         }}
       >
-        <PostComponent {post} />
+        <PostComponent {post} lazyLoadImages={index >= 4} />
       </div>
     {/each}
     <LoadMoreComponent