[FIX] web_editor, website_form: speed up and robustify form editing

STEPS:
* open website page with a form (e.g. /contactus)
* click edit
* slow down connection speed
* click fast between form input lines or change order of the lines

BEFORE:
* 7 svg files are requested every click
* get_authorized_fields is called every click
* random error "'classList' of undefined" in SelectUserValueWidget::close
* random similar errors when a method is called before initialization

AFTER:
* svg and get_authorized_fields are requested once
* random errors are no reproduced or it's hard to do it
* performance of switching between inputs doesn't depend on connection
speed (though, still not instant)

WHY:
* about changing in SelectUserValueWidget::close: posible reason why
this.menuTogglerEl may be undefined is because method start is async
* the other updates just implement caching

---

opw-2368928

closes odoo/odoo#61598

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

1 files changed, 20 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 3b1360c8951..635360677fc 100644
--- a/addons/web_editor/static/src/js/editor/snippets.options.js
+++ b/addons/web_editor/static/src/js/editor/snippets.options.js
@@ -82,17 +82,25 @@ function _buildTitleElement(title) {
  * @param {string} src
  * @returns {HTMLElement}
  */
+const _buildImgElementCache = {};
 async function _buildImgElement(src) {
-    if (src.split('.').pop() === 'svg') {
-        const response = await window.fetch(src);
-        const text = await response.text();
-        const parser = new window.DOMParser();
-        const xmlDoc = parser.parseFromString(text, 'text/xml');
-        return xmlDoc.getElementsByTagName('svg')[0];
+    if (!(src in _buildImgElementCache)) {
+        _buildImgElementCache[src] = (async () => {
+            if (src.split('.').pop() === 'svg') {
+                const response = await window.fetch(src);
+                const text = await response.text();
+                const parser = new window.DOMParser();
+                const xmlDoc = parser.parseFromString(text, 'text/xml');
+                return xmlDoc.getElementsByTagName('svg')[0];
+            } else {
+                const imgEl = document.createElement('img');
+                imgEl.src = src;
+                return imgEl;
+            }
+        })();
     }
-    const imgEl = document.createElement('img');
-    imgEl.src = src;
-    return imgEl;
+    const node = await _buildImgElementCache[src];
+    return node.cloneNode(true);
 }
 /**
  * Build the correct DOM for a we-row element.
@@ -868,7 +876,9 @@ const SelectUserValueWidget = BaseSelectionUserValueWidget.extend({
      */
     close: function () {
         this._super(...arguments);
-        this.menuTogglerEl.classList.remove('active');
+        if (this.menuTogglerEl) {
+            this.menuTogglerEl.classList.remove('active');
+        }
     },
     /**
      * @override