[IMP] website: keep loader alive until editor is opened

Before this commit the navigation toolbar was accessible after selecting
a theme before the editor was opened, which on slow connections made it
possible for users to leave the screen and miss the tour

After this commit the loader animation of the theme installation is
blocking the access to the screen until the editor is opened thus
preventing user to navigate elsewhere before seeing the tour

task-2387608

closes odoo/odoo#62029

Signed-off-by: Jérémy Kersten (jke) <jke@openerp.com>

addons/website/models/ir_module_module.py

@@ -361,10 +361,14 @@ class IrModuleModule(models.Model):
         self._theme_upgrade_upstream()
 
         active_todo = self.env['ir.actions.todo'].search([('state', '=', 'open')], limit=1)
+        result = None
         if active_todo:
-            return active_todo.action_launch()
+            result = active_todo.action_launch()
         else:
-            return website.button_go_website(mode_edit=True)
+            result = website.button_go_website(mode_edit=True)
+        if result.get('url') and 'enable_editor' in result['url']:
+            result['url'] = result['url'].replace('enable_editor', 'with_loader=1&enable_editor')
+        return result
 
     def button_remove_theme(self):
         """Remove the current theme of the current website."""

addons/website/static/src/js/menu/edit.js

@@ -83,12 +83,14 @@ var EditPageMenu = websiteNavbarData.WebsiteNavbarActionWidget.extend({
         this._editorAutoStart = (context.editable && window.location.search.indexOf('enable_editor') >= 0);
         this._mustEditTranslations = context.edit_translations;
 
+        var url = new URL(window.location.href)
         if (this._mustEditTranslations) {
-            var url = window.location.href.replace(/([?&])&*edit_translations[^&#]*&?/, '\$1');
+            url.searchParams.delete('edit_translations')
             window.history.replaceState({}, null, url);
             this._startTranslateMode();
         } else {
-            var url = window.location.href.replace(/([?&])&*enable_editor[^&#]*&?/, '\$1');
+            url.searchParams.delete('enable_editor')
+            url.searchParams.delete('with_loader')
             window.history.replaceState({}, null, url);
         }
     },
@@ -147,6 +149,10 @@ var EditPageMenu = websiteNavbarData.WebsiteNavbarActionWidget.extend({
 
         this.wysiwyg = await this._createWysiwyg();
         await this.wysiwyg.attachTo($('#wrapwrap'));
+        const $loader = $('div.o_theme_install_loader_container');
+        if ($loader) {
+            $loader.remove();
+        }
 
         var res = await new Promise((resolve, reject) => {
             this.trigger_up('widgets_start_request', {

addons/website/static/src/scss/website.backend.scss

@@ -424,18 +424,3 @@
         display: none;
     }
 }
-
-
-.o_theme_install_loader_container {
-    background-color: rgba($o-shadow-color, .9);
-    pointer-events: all;
-}
-.o_theme_install_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/scss/website.theme_install.scss

@@ -0,0 +1,15 @@
+.o_theme_install_loader_container {
+    background-color: rgba($o-shadow-color, .9);
+    pointer-events: all;
+    // above menu bar
+    z-index: $zindex-modal - 1;
+}
+.o_theme_install_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/views/assets.xml

@@ -35,6 +35,7 @@
     <xpath expr="//link[last()]" position="after">
         <link rel="stylesheet" type="text/scss" href="/website/static/src/scss/website.backend.scss"/>
         <link rel="stylesheet" type="text/scss" href="/website/static/src/scss/website_visitor_views.scss"/>
+        <link rel="stylesheet" type="text/scss" href="/website/static/src/scss/website.theme_install.scss"/>
     </xpath>
     <xpath expr="//script[last()]" position="after">
         <script type="text/javascript" src="/website/static/src/js/backend/button.js"/>
@@ -145,6 +146,7 @@
     <t t-call="web._assets_helpers"/>
 
     <link rel="stylesheet" type="text/scss" href="/website/static/src/scss/website.editor.ui.scss"/>
+    <link rel="stylesheet" type="text/scss" href="/website/static/src/scss/website.theme_install.scss"/>
 
     <script type="text/javascript" src="/website/static/src/js/menu/content.js"/>
     <script type="text/javascript" src="/website/static/src/js/menu/customize.js"/>

addons/website/views/website_navbar_templates.xml

@@ -20,6 +20,9 @@
             <t t-set="body_classname" t-value="(body_classname if body_classname else '') + (' o_connected_user' if env['ir.ui.view'].user_has_groups('base.group_user') else '')"/>
         </xpath>
         <xpath expr="//div[@id='wrapwrap']" position="before">
+            <div t-if="'with_loader' in request.params" class="o_theme_install_loader_container position-fixed fixed-top fixed-left h-100 w-100 d-flex justify-content-center align-items-center">
+                <div class="o_theme_install_loader"/>
+            </div>
             <nav groups="base.group_user" t-if="website" id="oe_main_menu_navbar" class="o_main_navbar">
                 <ul id="oe_applications">
                     <li class="dropdown active">