From 97c89bcc4276c48cf533eeda096836d1c34b55e2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20Sevilla=20Mart=C3=ADn?=
 <6401250+datitisev@users.noreply.github.com>
Date: Thu, 15 Oct 2020 18:50:00 -0400
Subject: [PATCH] Add lazy loading attribute to twemoji rendered images &
 autocomplete (#31)

---
 .../emoji/js/src/forum/addComposerAutocomplete.js     |  2 +-
 extensions/emoji/js/src/forum/renderEmoji.js          | 11 +++++++++--
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/extensions/emoji/js/src/forum/addComposerAutocomplete.js b/extensions/emoji/js/src/forum/addComposerAutocomplete.js
index 1c64aa678..c4ee94914 100644
--- a/extensions/emoji/js/src/forum/addComposerAutocomplete.js
+++ b/extensions/emoji/js/src/forum/addComposerAutocomplete.js
@@ -77,7 +77,7 @@ export default function addComposerAutocomplete() {
                 onmouseenter={function() {
                   dropdown.setIndex($(this).parent().index() - 1);
                 }}>
-                  <img alt={emoji} class="emoji" draggable="false" src={`${cdn}72x72/${code}.png`}/>
+                  <img alt={emoji} class="emoji" draggable="false" loading="lazy" src={`${cdn}72x72/${code}.png`}/>
                   {name}
               </button>
             );
diff --git a/extensions/emoji/js/src/forum/renderEmoji.js b/extensions/emoji/js/src/forum/renderEmoji.js
index 84cdf28af..e3b016512 100644
--- a/extensions/emoji/js/src/forum/renderEmoji.js
+++ b/extensions/emoji/js/src/forum/renderEmoji.js
@@ -7,12 +7,19 @@ import Post from 'flarum/models/Post';
 
 import base from './cdn';
 
+const options = {
+  base,
+  attributes: () => ({
+    loading: 'lazy',
+  }),
+};
+
 export default function renderEmoji() {
   override(Post.prototype, 'contentHtml', function(original) {
     const contentHtml = original();
 
     if (this.oldContentHtml !== contentHtml) {
-      this.emojifiedContentHtml = twemoji.parse(contentHtml, { base });
+      this.emojifiedContentHtml = twemoji.parse(contentHtml, options);
       this.oldContentHtml = contentHtml;
     }
 
@@ -22,6 +29,6 @@ export default function renderEmoji() {
   override(s9e.TextFormatter, 'preview', (original, text, element) => {
     original(text, element);
 
-    twemoji.parse(element, { base });
+    twemoji.parse(element, options);
   });
 }