[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/68823
task-2446852

X-original-commit: 9a75b8cc09b3210e0a555f225ac347801b584d3a

addons/website/i18n/website.pot

@@ -1533,6 +1533,13 @@ msgstr ""
 msgid "Building blocks system"
 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

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);
     },
 
@@ -186,6 +186,23 @@ var NewContentMenu = websiteNavbarData.WebsiteNavbarActionWidget.extend({
             self.$('> a').focus();
         });
     },
+    /**
+     * 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
@@ -295,6 +312,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);
                         });
                     }
 
@@ -302,6 +320,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');

addons/website/static/src/scss/website.editor.ui.scss

@@ -138,3 +138,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;
+}

addons/website/static/src/xml/website.editor.xml

@@ -142,4 +142,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>