From 43557ecbc7db6477defa14cd248a297eaa975c86 Mon Sep 17 00:00:00 2001
From: qsm-odoo <qsm@odoo.com>
Date: Thu, 28 May 2020 10:04:26 +0000
Subject: [PATCH] [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
---
 .../static/src/js/editor/snippets.editor.js   | 19 +++++++++++++++++++
 .../static/src/js/editor/snippets.editor.js   |  3 +++
 2 files changed, 22 insertions(+)

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();
@@ -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 () => {
diff --git a/addons/website/static/src/js/editor/snippets.editor.js b/addons/website/static/src/js/editor/snippets.editor.js
index dd4f974918b..04de692f2fd 100644
--- a/addons/website/static/src/js/editor/snippets.editor.js
+++ b/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 = "";