Use the `loading` HTML attr to lazily load images

CHANGES.md

@@ -2,6 +2,7 @@
 
 ## 9.1.1 (Unreleased)
 
+- GIFs don't render inside unfurls and cause a TypeError
 
 ## 9.1.0 (2022-04-02)
 

src/headless/plugins/emoji/index.js

@@ -131,6 +131,7 @@ export function getEmojiMarkup (data, options={unicode_only: false, add_title_wr
         } else {
             const path = api.settings.get('emoji_image_path');
             return html`<img class="emoji"
+                loading="lazy"
                 draggable="false"
                 title="${shortname}"
                 alt="${emoji}"
@@ -140,6 +141,7 @@ export function getEmojiMarkup (data, options={unicode_only: false, add_title_wr
         return shortname;
     } else {
         return html`<img class="emoji"
+            loading="lazy"
             draggable="false"
             title="${shortname}"
             alt="${shortname}"

src/shared/directives/image.js

@@ -18,6 +18,7 @@ class ImageDirective extends AsyncDirective {
 
     renderImage (src, href, onLoad, onClick) {
         return html`<img class="chat-image img-thumbnail"
+                loading="lazy"
                 src="${src}"
                 @click=${onClick}
                 @error=${() => this.onError(src, href, onLoad, onClick)}