From d1a9e049f7754a45565d04fa714f05f60fb1ceaa Mon Sep 17 00:00:00 2001
From: Antoine Guenet <age@odoo.com>
Date: Thu, 29 Jun 2023 13:47:38 +0000
Subject: [PATCH] [IMP] mass_mailing: do not load images on add sidebar and
 commitChanges

Images in mass_mailing are not lazy loaded, which is deliberate for the
mailing itself and its conversion, but when we load the sidebar we add
the HTML to all the snippets and hide it so if these images are not lazy
loaded, they all get loaded along with the sidebar, which is slow and
unnecessary.

This loads the images only once we add them to the mailing, which is
when we remove the lazy loading attribute.

task-3323894

Part-of: odoo/odoo#126845
---
 .../static/src/js/mass_mailing_html_field.js      |  1 +
 .../mass_mailing/static/src/js/snippets.editor.js | 15 +++++++++++++++
 2 files changed, 16 insertions(+)

diff --git a/addons/mass_mailing/static/src/js/mass_mailing_html_field.js b/addons/mass_mailing/static/src/js/mass_mailing_html_field.js
index 6d5031cb8d3..c8ec19ccc6e 100644
--- a/addons/mass_mailing/static/src/js/mass_mailing_html_field.js
+++ b/addons/mass_mailing/static/src/js/mass_mailing_html_field.js
@@ -535,6 +535,7 @@ export class MassMailingHtmlField extends HtmlField {
         for (const img of $container.find("img")) {
             const $img = $(img);
             const src = $img.attr("src");
+            $img.removeAttr('loading');
 
             let m = src.match(/^\/web\/image\/\w+\.s_default_image_(?:theme_[a-z]+_)?(.+)$/);
             if (!m) {
diff --git a/addons/mass_mailing/static/src/js/snippets.editor.js b/addons/mass_mailing/static/src/js/snippets.editor.js
index a4253847762..19073eae850 100644
--- a/addons/mass_mailing/static/src/js/snippets.editor.js
+++ b/addons/mass_mailing/static/src/js/snippets.editor.js
@@ -32,11 +32,26 @@ export const MassMailingSnippetsMenu = snippetsEditor.SnippetsMenu.extend({
             this.$editable = this.options.wysiwyg.getEditable();
         });
     },
+    /**
+     * @override
+     */
+    callPostSnippetDrop: async function ($target) {
+        $target.find('img[loading=lazy]').removeAttr('loading');
+        return this._super(...arguments);
+    },
 
     //--------------------------------------------------------------------------
     // Private
     //--------------------------------------------------------------------------
 
+    /**
+     * @override
+     */
+    _computeSnippetTemplates: function (html) {
+        const $html = $(`<div>${html}</div>`);
+        $html.find('img').attr('loading', 'lazy');
+        return this._super($html.html().trim());
+    },
     /**
      * @override
      */