[FIX] web_editor: unblock the editor after dropping the "Quotes" snippet

Before this commit, when the user dropped the "Quotes" snippet, the
editor was not allowing to drop any more snippet (see [1]). This was
because the editors initialization related to the drop of the "Quotes"
snippet was not able to be fully performed. Indeed, it is composed of
carousel items, themself containing images. As some of those carousel
items are hidden, the images they contains are too... and some options
actually wait to access their naturalWidth. As the images are lazy
loaded since [2], we were thus waiting infinitely.

[1]: https://github.com/odoo/odoo/commit/277f39904e7218bef2dd23b1c5b719ce8660008f
[2]: https://github.com/odoo/odoo/commit/617c716aeafd7bbc776d81da134a9b25329f08c9

closes odoo/odoo#61123

Signed-off-by: Samuel Degueldre <sdegueldre@users.noreply.github.com>

1 files changed, 12 insertions, 10 deletions

diff --git a/addons/web_editor/static/src/js/editor/snippets.options.js b/addons/web_editor/static/src/js/editor/snippets.options.js
index 58d4158608c..552652f23b8 100644
--- a/addons/web_editor/static/src/js/editor/snippets.options.js
+++ b/addons/web_editor/static/src/js/editor/snippets.options.js
@@ -3136,15 +3136,6 @@ const ImageHandlerOption = SnippetOptionWidget.extend({
     async willStart() {
         const _super = this._super.bind(this);
         await this._loadImageInfo();
-        // Make sure image is loaded because we need its naturalWidth to render XML
-        const img = this._getImg();
-        await new Promise((resolve, reject) => {
-            if (img.complete) {
-                return resolve();
-            }
-            img.addEventListener('load', resolve, {once: true});
-            img.addEventListener('error', resolve, {once: true});
-        });
         return _super(...arguments);
     },
 
@@ -3211,8 +3202,19 @@ const ImageHandlerOption = SnippetOptionWidget.extend({
     /**
      * @override
      */
-    _computeWidgetState(methodName, params) {
+    async _computeWidgetState(methodName, params) {
         const img = this._getImg();
+
+        // Make sure image is loaded because we need its naturalWidth
+        await new Promise((resolve, reject) => {
+            if (img.complete) {
+                resolve();
+                return;
+            }
+            img.addEventListener('load', resolve, {once: true});
+            img.addEventListener('error', resolve, {once: true});
+        });
+
         switch (methodName) {
             case 'selectWidth':
                 return img.naturalWidth;