From 4745a1c04b34bc0836c4890d750aa4c6b72aae56 Mon Sep 17 00:00:00 2001
From: sam <sam@sleepycat.moe>
Date: Tue, 13 Feb 2024 17:13:03 +0100
Subject: [PATCH] feat: lazy load member avatars on user pages

---
 frontend/src/lib/components/FallbackImage.svelte     | 2 ++
 frontend/src/lib/components/PartialMemberCard.svelte | 7 ++++++-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/frontend/src/lib/components/FallbackImage.svelte b/frontend/src/lib/components/FallbackImage.svelte
index 9572e46..18d086f 100644
--- a/frontend/src/lib/components/FallbackImage.svelte
+++ b/frontend/src/lib/components/FallbackImage.svelte
@@ -4,6 +4,7 @@
   export let urls: string[];
   export let alt: string;
   export let width = 300;
+  export let lazyLoad = false;
 
   const contentTypeFor = (url: string) => {
     if (url.endsWith(".webp")) {
@@ -31,6 +32,7 @@
       src={urls[0] || defaultAvatars[0]}
       {alt}
       class="rounded-circle img-fluid"
+      loading={lazyLoad ? "lazy" : "eager"}
     />
   </picture>
 {:else}
diff --git a/frontend/src/lib/components/PartialMemberCard.svelte b/frontend/src/lib/components/PartialMemberCard.svelte
index 4efe806..a7b9320 100644
--- a/frontend/src/lib/components/PartialMemberCard.svelte
+++ b/frontend/src/lib/components/PartialMemberCard.svelte
@@ -46,7 +46,12 @@
 
 <div>
   <a href="/@{user.name}/{member.name}">
-    <FallbackImage urls={memberAvatars(member)} width={200} alt="Avatar for {member.name}" />
+    <FallbackImage
+      urls={memberAvatars(member)}
+      width={200}
+      lazyLoad
+      alt="Avatar for {member.name}"
+    />
   </a>
   <p class="m-2">
     <a class="text-reset fs-5 text-break" href="/@{user.name}/{member.name}">