DEV: add native lazy loading for emojis (#15830)

app/assets/javascripts/discourse/tests/acceptance/emoji-test.js

@@ -13,7 +13,7 @@ acceptance("Emoji", function (needs) {
     await fillIn(".d-editor-input", "this is an emoji :blonde_woman:");
     assert.strictEqual(
       queryAll(".d-editor-preview:visible").html().trim(),
-      `<p>this is an emoji <img src="/images/emoji/google_classic/blonde_woman.png?v=${v}" title=":blonde_woman:" class="emoji" alt=":blonde_woman:"></p>`
+      `<p>this is an emoji <img src="/images/emoji/google_classic/blonde_woman.png?v=${v}" title=":blonde_woman:" class="emoji" alt=":blonde_woman:" loading="lazy" width="20" height="20"></p>`
     );
   });
 
@@ -24,7 +24,7 @@ acceptance("Emoji", function (needs) {
     await fillIn(".d-editor-input", "this is an emoji :blonde_woman:t5:");
     assert.strictEqual(
       queryAll(".d-editor-preview:visible").html().trim(),
-      `<p>this is an emoji <img src="/images/emoji/google_classic/blonde_woman/5.png?v=${v}" title=":blonde_woman:t5:" class="emoji" alt=":blonde_woman:t5:"></p>`
+      `<p>this is an emoji <img src="/images/emoji/google_classic/blonde_woman/5.png?v=${v}" title=":blonde_woman:t5:" class="emoji" alt=":blonde_woman:t5:" loading="lazy" width="20" height="20"></p>`
     );
   });
 });

app/assets/javascripts/discourse/tests/acceptance/user-drafts-stream-test.js

@@ -55,7 +55,7 @@ acceptance("User Drafts", function (needs) {
     );
     assert.strictEqual(
       query(".user-stream-item:nth-child(3) .excerpt").innerHTML.trim(),
-      `here goes a reply to a PM <img src="/images/emoji/google_classic/slight_smile.png?v=${IMAGE_VERSION}" title=":slight_smile:" class="emoji" alt=":slight_smile:">`
+      `here goes a reply to a PM <img src="/images/emoji/google_classic/slight_smile.png?v=${IMAGE_VERSION}" title=":slight_smile:" class="emoji" alt=":slight_smile:" loading="lazy" width="20" height="20">`
     );
   });
 });

app/assets/javascripts/discourse/tests/unit/lib/pretty-text-test.js

@@ -1506,7 +1506,7 @@ var bar = 'bar';
     assert.cookedOptions(
       ":grin: @sam",
       { featuresOverride: ["emoji"] },
-      `<p><img src="/images/emoji/google_classic/grin.png?v=${v}" title=":grin:" class="emoji" alt=":grin:"> @sam</p>`,
+      `<p><img src="/images/emoji/google_classic/grin.png?v=${v}" title=":grin:" class="emoji" alt=":grin:" loading="lazy" width="20" height="20"> @sam</p>`,
       "cooks emojis when only the emoji markdown engine is enabled"
     );
 
@@ -1521,15 +1521,15 @@ var bar = 'bar';
   test("emoji", function (assert) {
     assert.cooked(
       ":smile:",
-      `<p><img src="/images/emoji/google_classic/smile.png?v=${v}" title=":smile:" class="emoji only-emoji" alt=":smile:"></p>`
+      `<p><img src="/images/emoji/google_classic/smile.png?v=${v}" title=":smile:" class="emoji only-emoji" alt=":smile:" loading="lazy" width="20" height="20"></p>`
     );
     assert.cooked(
       ":(",
-      `<p><img src="/images/emoji/google_classic/frowning.png?v=${v}" title=":frowning:" class="emoji only-emoji" alt=":frowning:"></p>`
+      `<p><img src="/images/emoji/google_classic/frowning.png?v=${v}" title=":frowning:" class="emoji only-emoji" alt=":frowning:" loading="lazy" width="20" height="20"></p>`
     );
     assert.cooked(
       "8-)",
-      `<p><img src="/images/emoji/google_classic/sunglasses.png?v=${v}" title=":sunglasses:" class="emoji only-emoji" alt=":sunglasses:"></p>`
+      `<p><img src="/images/emoji/google_classic/sunglasses.png?v=${v}" title=":sunglasses:" class="emoji only-emoji" alt=":sunglasses:" loading="lazy" width="20" height="20"></p>`
     );
   });
 
@@ -1543,7 +1543,7 @@ var bar = 'bar';
     assert.cookedOptions(
       "test:smile:test",
       { siteSettings: { enable_inline_emoji_translation: true } },
-      `<p>test<img src="/images/emoji/google_classic/smile.png?v=${v}" title=":smile:" class="emoji" alt=":smile:">test</p>`
+      `<p>test<img src="/images/emoji/google_classic/smile.png?v=${v}" title=":smile:" class="emoji" alt=":smile:" loading="lazy" width="20" height="20">test</p>`
     );
   });
 
@@ -1551,7 +1551,7 @@ var bar = 'bar';
     assert.cookedOptions(
       ":smile:",
       { siteSettings: { emoji_set: "twitter" } },
-      `<p><img src="/images/emoji/twitter/smile.png?v=${v}" title=":smile:" class="emoji only-emoji" alt=":smile:"></p>`
+      `<p><img src="/images/emoji/twitter/smile.png?v=${v}" title=":smile:" class="emoji only-emoji" alt=":smile:" loading="lazy" width="20" height="20"></p>`
     );
   });
 
@@ -1564,7 +1564,7 @@ var bar = 'bar';
           external_emoji_url: "https://emoji.hosting.service",
         },
       },
-      `<p><img src="https://emoji.hosting.service/twitter/smile.png?v=${v}" title=":smile:" class="emoji only-emoji" alt=":smile:"></p>`
+      `<p><img src="https://emoji.hosting.service/twitter/smile.png?v=${v}" title=":smile:" class="emoji only-emoji" alt=":smile:" loading="lazy" width="20" height="20"></p>`
     );
   });
 
@@ -1574,7 +1574,7 @@ var bar = 'bar';
     assert.cookedOptions(
       ":foo:",
       {},
-      `<p><img src="/images/d-logo-sketch.png?v=${v}" title=":foo:" class="emoji emoji-custom only-emoji" alt=":foo:"></p>`
+      `<p><img src="/images/d-logo-sketch.png?v=${v}" title=":foo:" class="emoji emoji-custom only-emoji" alt=":foo:" loading="lazy" width="20" height="20"></p>`
     );
 
     registerEmoji("bar", "/images/avatar.png", "baz");
@@ -1582,7 +1582,7 @@ var bar = 'bar';
     assert.cookedOptions(
       ":bar:",
       {},
-      `<p><img src="/images/avatar.png?v=${v}" title=":bar:" class="emoji emoji-custom only-emoji" alt=":bar:"></p>`
+      `<p><img src="/images/avatar.png?v=${v}" title=":bar:" class="emoji emoji-custom only-emoji" alt=":bar:" loading="lazy" width="20" height="20"></p>`
     );
   });
 

app/assets/javascripts/pretty-text/engines/discourse-markdown/emoji.js

@@ -118,6 +118,9 @@ function getEmojiTokenByName(name, state) {
       ["title", info.title],
       ["class", info.classes],
       ["alt", info.title],
+      ["loading", "lazy"],
+      ["width", "20"],
+      ["height", "20"],
     ];
 
     return token;
@@ -345,5 +348,8 @@ export function setup(helper) {
     "img[class=emoji emoji-custom]",
     "img[class=emoji emoji-custom only-emoji]",
     "img[class=emoji only-emoji]",
+    "img[loading=lazy]",
+    "img[width=20]",
+    "img[height=20]",
   ]);
 }

app/assets/javascripts/pretty-text/engines/discourse-markdown/quotes.js

@@ -127,6 +127,7 @@ const rule = {
               emojiCDNUrl: options.emojiCDNUrl,
               enableEmojiShortcuts: options.enableEmojiShortcuts,
               inlineEmoji: options.inlineEmoji,
+              lazy: true,
             });
           }