[IMP] web_editor: preload colorpalette dependencies on editor start

As the colorpalette has very big chances to have to be loaded when the
user enters edit mode (any click on a text will require the colorpalette
to be available), this commit makes it so the dependencies are loaded as
soon as the editor is started, without actually waiting for them until
the colorpalette are used.

This allows to make the first click on a text or on the theme tab a bit
faster to react.

closes odoo/odoo#52116

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

2 files changed, 48 insertions, 19 deletions

diff --git a/addons/web_editor/static/src/js/editor/snippets.editor.js b/addons/web_editor/static/src/js/editor/snippets.editor.js
index 5f959da3778..b507b5d5f85 100644
--- a/addons/web_editor/static/src/js/editor/snippets.editor.js
+++ b/addons/web_editor/static/src/js/editor/snippets.editor.js
@@ -8,6 +8,7 @@ var dom = require('web.dom');
 var Widget = require('web.Widget');
 var options = require('web_editor.snippets.options');
 var Wysiwyg = require('web_editor.wysiwyg');
+const {ColorPaletteWidget} = require('web_editor.ColorPalette');
 
 var _t = core._t;
 
@@ -877,6 +878,17 @@ var SnippetsMenu = Widget.extend({
     /**
      * @override
      */
+    willStart: function () {
+        // Preload colorpalette dependencies without waiting for them. The
+        // widget have huge chances of being used by the user (clicking on any
+        // text will load it). The colorpalette itself will do the actual
+        // waiting of the loading completion.
+        ColorPaletteWidget.loadDependencies(this);
+        return this._super(...arguments);
+    },
+    /**
+     * @override
+     */
     start: function () {
         var defs = [this._super.apply(this, arguments)];
         this.ownerDocument = this.$el[0].ownerDocument;
diff --git a/addons/web_editor/static/src/js/wysiwyg/widgets/color_palette.js b/addons/web_editor/static/src/js/wysiwyg/widgets/color_palette.js
index 85c2e624515..60fdec4108d 100644
--- a/addons/web_editor/static/src/js/wysiwyg/widgets/color_palette.js
+++ b/addons/web_editor/static/src/js/wysiwyg/widgets/color_palette.js
@@ -1,6 +1,7 @@
 odoo.define('web_editor.ColorPalette', function (require) {
 'use strict';
 
+const ajax = require('web.ajax');
 const core = require('web.core');
 const session = require('web.session');
 const {ColorpickerWidget} = require('web.Colorpicker');
@@ -9,10 +10,8 @@ const summernoteCustomColors = require('web_editor.rte.summernote_custom_colors'
 
 const qweb = core.qweb;
 
-let templatePromise;
-
 const ColorPaletteWidget = Widget.extend({
-    xmlDependencies: ['/web_editor/static/src/xml/snippets.xml'],
+    // ! for xmlDependencies, see loadDependencies function
     template: 'web_editor.snippet.option.colorpicker',
     events: {
         'click button': '_onColorButtonClick',
@@ -53,22 +52,7 @@ const ColorPaletteWidget = Widget.extend({
      */
     willStart: async function () {
         await this._super(...arguments);
-        if (session.is_website_user) {
-            // Public user using the editor may have a colorpalette but with
-            // the default summernote ones.
-            return;
-        }
-        // We can call the colorPalette multiple times but only need 1 rpc
-        if (!templatePromise && !qweb.has_template('web_editor.colorpicker')) {
-            templatePromise = this._rpc({
-                model: 'ir.ui.view',
-                method: 'read_template',
-                args: ['web_editor.colorpicker'],
-            }).then(template => {
-                return qweb.add_template('<templates>' + template + '</templates>');
-            });
-        }
-        await templatePromise;
+        await ColorPaletteWidget.loadDependencies(this);
     },
     /**
      * @override
@@ -356,6 +340,39 @@ const ColorPaletteWidget = Widget.extend({
     },
 });
 
+//------------------------------------------------------------------------------
+// Static
+//------------------------------------------------------------------------------
+
+/**
+ * Load ColorPaletteWidget dependencies. This allows to load them without
+ * instantiating the widget itself.
+ *
+ * @static
+ */
+let colorpickerTemplateProm;
+ColorPaletteWidget.loadDependencies = async function (rpcCapableObj) {
+    const proms = [ajax.loadXML('/web_editor/static/src/xml/snippets.xml', qweb)];
+
+    // Public user using the editor may have a colorpalette but with
+    // the default summernote ones.
+    if (!session.is_website_user) {
+        // We can call the colorPalette multiple times but only need 1 rpc
+        if (!colorpickerTemplateProm && !qweb.has_template('web_editor.colorpicker')) {
+            colorpickerTemplateProm = rpcCapableObj._rpc({
+                model: 'ir.ui.view',
+                method: 'read_template',
+                args: ['web_editor.colorpicker'],
+            }).then(template => {
+                return qweb.add_template('<templates>' + template + '</templates>');
+            });
+        }
+        proms.push(colorpickerTemplateProm);
+    }
+
+    return Promise.all(proms);
+};
+
 return {
     ColorPaletteWidget: ColorPaletteWidget,
 };