[IMP] web_editor, website: add loading effect in left panel editor

The goal is to reduce loadings as much as possible but there will
always be some. So that loadings do not appear as bugs and give users
some feedback that they are ongoing, this commit adds a loading effect
during the loading of some actions.

Part of https://github.com/odoo/odoo/pull/52211
Related to task-2197038

1 files changed, 19 insertions, 0 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 2870303a53a..a4fa1bf5994 100644
--- a/addons/web_editor/static/src/js/editor/snippets.editor.js
+++ b/addons/web_editor/static/src/js/editor/snippets.editor.js
@@ -910,6 +910,8 @@ var SnippetsMenu = Widget.extend({
             )[0]
         );
 
+        this._addTabLoading(this.tabs.BLOCKS);
+
         // Fetch snippet templates and compute it
         defs.push(this._loadSnippetsTemplates().then(() => {
             return this._updateInvisibleDOM();
@@ -1236,6 +1238,21 @@ var SnippetsMenu = Widget.extend({
         });
     },
     /**
+     * @private
+     * @param {this.tabs.VALUE} [tab='OPTIONS'] - the tab to select
+     */
+    _addTabLoading: function (tab) {
+        const loadingEl = document.createElement('div');
+        loadingEl.classList.add('o_we_ui_loading', 'text-center', 'pt-5');
+        const loadingIconEl = document.createElement('i');
+        loadingIconEl.classList.add('fa', 'fa-circle-o-notch', 'fa-spin', 'fa-3x');
+        loadingEl.appendChild(loadingIconEl);
+        this._updateLeftPanelContent({
+            content: loadingEl,
+            tab: tab || this.tabs.OPTIONS,
+        });
+    },
+    /**
      * Adds an entry for every invisible snippet in the left panel box.
      * The entries will contains an 'Edit' button to activate their snippet.
      *
@@ -2041,6 +2058,8 @@ var SnippetsMenu = Widget.extend({
      * @param {Event} ev
      */
     _onInvisibleEntryClick: async function (ev) {
+        this._addTabLoading();
+
         ev.preventDefault();
         const $snippet = $(this.invisibleDOMMap.get(ev.currentTarget));
         const isVisible = await this._mutex.exec(async () => {