From efbed98e2d861153d4e24bd354d59ee500dd151f Mon Sep 17 00:00:00 2001
From: perennial <mail@perennialte.ch>
Date: Thu, 17 Oct 2024 23:14:07 +1100
Subject: [PATCH] lazy load comment author avatars and stamps

---
 assets/views/blocks/comments.jet.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/assets/views/blocks/comments.jet.html b/assets/views/blocks/comments.jet.html
index 4e15e56..494185f 100644
--- a/assets/views/blocks/comments.jet.html
+++ b/assets/views/blocks/comments.jet.html
@@ -46,10 +46,10 @@
               {* checks whether .AuthorName is empty, indicating a deleted user *}
               {{- if .AuthorName != "" }}
               <a href="/users/{{ .AuthorID }}/bookmarks">
-                <img class="img-fluid rounded-circle object-fit-cover" src="{{ .Avatar }}" alt="{{ .AuthorName }}" style="width: 40px; height: 40px" />
+                <img class="img-fluid rounded-circle object-fit-cover" src="{{ .Avatar }}" alt="{{ .AuthorName }}" loading="lazy" style="width: 40px; height: 40px" />
               </a>
               {{- else }}
-              <img class="img-fluid rounded-circle object-fit-cover" src="{{ .Avatar }}" alt="{{ .AuthorName }}" style="width: 40px; height: 40px" />
+              <img class="img-fluid rounded-circle object-fit-cover" src="{{ .Avatar }}" alt="{{ .AuthorName }}" loading="lazy" style="width: 40px; height: 40px" />
               {{- end }}
             </div>
 
@@ -71,7 +71,7 @@
               <!-- Stamp or emoji -->
               <!-- TODO: .Stamp occasionally templates in text (which should be part of the main comment text) instead of an image, causing breakage in the layout. See the comment by "Unknown417" on /artworks/107442519 for an example -->
               {{- if .Stamp }}
-              <img class="stamp img-fluid rounded object-fit-cover me-2" src="/proxy/s.pximg.net/common/images/stamp/generated-stamps/{{ .Stamp }}_s.jpg" alt="/proxy/s.pximg.net/common/images/stamp/generated-stamps/{{ .Stamp }}_s.jpg"/>
+              <img class="stamp img-fluid rounded object-fit-cover me-2" src="/proxy/s.pximg.net/common/images/stamp/generated-stamps/{{ .Stamp }}_s.jpg" alt="/proxy/s.pximg.net/common/images/stamp/generated-stamps/{{ .Stamp }}_s.jpg" loading="lazy" />
               {{- else }}
               <!-- Comment with emojis -->
               <p class="d-flex flex-wrap align-items-center m-0">{{ raw: parseEmojis(.Context) }}</p>