[FIX] website: add loader when installing a new module from frontend

The eCommerce module installation is sometimes taking over 30 seconds,
to manage the user wait a loader is now displayed during the
process.

Part of https://github.com/odoo/odoo/pull/65575
task-2446852

4 files changed, 53 insertions, 2 deletions

diff --git a/addons/website/i18n/website.pot b/addons/website/i18n/website.pot
index 0c1ed06ac21..fc3343badf6 100644
--- a/addons/website/i18n/website.pot
+++ b/addons/website/i18n/website.pot
@@ -1639,6 +1639,13 @@ msgstr ""
 
 #. module: website
 #. openerp-web
+#: code:addons/website/static/src/js/menu/new_content.js:0
+#, python-format
+msgid "Building your %s"
+msgstr ""
+
+#. module: website
+#. openerp-web
 #: code:addons/website/static/src/xml/theme_preview.xml:0
 #, python-format
 msgid "Building your website..."
diff --git a/addons/website/static/src/js/menu/new_content.js b/addons/website/static/src/js/menu/new_content.js
index c06213b9c08..8d541210126 100644
--- a/addons/website/static/src/js/menu/new_content.js
+++ b/addons/website/static/src/js/menu/new_content.js
@@ -7,8 +7,7 @@ var websiteNavbarData = require('website.navbar');
 var wUtils = require('website.utils');
 var tour = require('web_tour.tour');
 
-var qweb = core.qweb;
-var _t = core._t;
+const {qweb, _t} = core;
 
 var enableFlag = 'enable_new_content';
 
@@ -68,6 +67,7 @@ var NewContentMenu = websiteNavbarData.WebsiteNavbarActionWidget.extend({
             );
             this._showMenu();
         }
+        this.$loader = $(qweb.render('website.new_content_loader'));
         return this._super.apply(this, arguments);
     },
 
@@ -188,6 +188,23 @@ var NewContentMenu = websiteNavbarData.WebsiteNavbarActionWidget.extend({
             wUtils.removeLoader();
         });
     },
+    /**
+     * Called to add loader element in DOM.
+     *
+     * @param {string} moduleName
+     * @private
+     */
+    _addLoader(moduleName) {
+        const newContentLoaderText = _.str.sprintf(_t("Building your %s"), moduleName);
+        this.$loader.find('#new_content_loader_text').replaceWith(newContentLoaderText);
+        $('body').append(this.$loader);
+    },
+    /**
+     * @private
+     */
+    _removeLoader() {
+        this.$loader.remove();
+    },
 
     //--------------------------------------------------------------------------
     // Handlers
@@ -297,6 +314,7 @@ var NewContentMenu = websiteNavbarData.WebsiteNavbarActionWidget.extend({
                             $p.removeClass('o_uninstalled_module')
                                 .text(_.str.sprintf(self.newContentText.installPleaseWait, name));
                             $el.fadeTo(1000, 1);
+                            self._addLoader(name);
                         });
                     }
 
@@ -304,6 +322,7 @@ var NewContentMenu = websiteNavbarData.WebsiteNavbarActionWidget.extend({
                         var origin = window.location.origin;
                         var redirectURL = $el.find('a').data('url') || (window.location.pathname + '?' + enableFlag);
                         window.location.href = origin + redirectURL;
+                        self._removeLoader();
                     }, function () {
                         $i.removeClass()
                             .addClass('fa fa-exclamation-triangle');
diff --git a/addons/website/static/src/scss/website.editor.ui.scss b/addons/website/static/src/scss/website.editor.ui.scss
index 5c6468cdc76..ebf946979ae 100644
--- a/addons/website/static/src/scss/website.editor.ui.scss
+++ b/addons/website/static/src/scss/website.editor.ui.scss
@@ -60,3 +60,20 @@ $o-we-switch-inactive-color: #F7F7F7 !default;
         }
     }
 }
+
+.o_new_content_loader_container {
+    background-color: rgba($o-shadow-color, .9);
+    pointer-events: all;
+    font-size: 3.5rem;
+    justify-content: center;
+    z-index: $zindex-modal - 1;
+}
+.o_new_content_loader {
+    position: relative;
+    display: inline-block;
+    width: 400px;
+    height: 220px;
+    background-image: url('/website/static/src/img/theme_loader.gif');
+    background-size: cover;
+    border-radius: 6px;
+}
diff --git a/addons/website/static/src/xml/website.editor.xml b/addons/website/static/src/xml/website.editor.xml
index 2132bfce727..3048271678b 100644
--- a/addons/website/static/src/xml/website.editor.xml
+++ b/addons/website/static/src/xml/website.editor.xml
@@ -143,4 +143,12 @@
         <div class="mb-2" t-esc="contentText"/>
         <div class="o_ace_editor_container"/>
     </div>
+
+    <t t-name="website.new_content_loader">
+        <div class="o_new_content_loader_container position-fixed fixed-top fixed-left
+            h-100 w-100 d-flex flex-column align-items-center text-white font-weight-bold">
+            <p id="new_content_loader_text"/>
+            <div class="o_new_content_loader"/>
+        </div>
+    </t>
 </templates>