[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

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();
@@ -1235,6 +1237,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 () => {

addons/website/static/src/js/editor/snippets.editor.js

@@ -46,6 +46,9 @@ weSnippetEditor.Class.include({
      * @private
      */
     _onThemeTabClick: async function (ev) {
+        this._addTabLoading(this.tabs.THEME);
+        await new Promise(resolve => setTimeout(() => resolve())); // Needed to force the loading to appear... to review with new design
+
         if (!this.fakeThemeEl) {
             this.fakeThemeEl = document.createElement('theme');
             this.fakeThemeEl.dataset.name = "";