[FIX] website, *: avoid top menu flickering

* portal, web

5 files changed, 44 insertions, 19 deletions

diff --git a/addons/portal/static/src/scss/portal.scss b/addons/portal/static/src/scss/portal.scss
index a4ef0bb4775..043753f2bf7 100644
--- a/addons/portal/static/src/scss/portal.scss
+++ b/addons/portal/static/src/scss/portal.scss
@@ -3,10 +3,12 @@
 /// rules.
 ///
 
+$-navbar-height: $nav-link-height !default;
+
 // Resize and vertically align navbar’s items relative to navbar
 @mixin o-w-fill-navbar($ratio: 1) {
-    height: round($nav-link-height * $ratio * 100) / 100;
-    margin-top: round($nav-link-height * (1 - $ratio) / 2 * 100) / 100;
+    height: round($-navbar-height * $ratio * 100) / 100;
+    margin-top: round($-navbar-height * (1 - $ratio) / 2 * 100) / 100;
 }
 
 // Frontend general
@@ -26,14 +28,23 @@
 }
 
 header {
-    .navbar-brand.logo {
-        padding-top: 0;
-        padding-bottom: 0;
-
-        img {
-            @include o-w-fill-navbar;
-            width: auto;
-            max-width: none;
+    .navbar-brand {
+        flex: 0 0 auto;
+
+        &.logo {
+            // Width and height are fixed to prevent navbar flickering due to
+            // image loading
+            width: 4 * $-navbar-height;
+            height: $-navbar-height;
+
+            padding-top: 0;
+            padding-bottom: 0;
+
+            img {
+                @include o-w-fill-navbar;
+                width: auto;
+                max-width: none;
+            }
         }
     }
     .nav-link {
diff --git a/addons/web/static/src/js/core/dom.js b/addons/web/static/src/js/core/dom.js
index 9280b9a0884..f8a04f9b467 100644
--- a/addons/web/static/src/js/core/dom.js
+++ b/addons/web/static/src/js/core/dom.js
@@ -409,7 +409,7 @@ return {
             }, 0);
 
             if (maxWidth - menuItemsWidth >= -0.001) {
-                return
+                return;
             }
 
             var $dropdownMenu = $('<ul/>', {class: 'dropdown-menu'});
@@ -422,7 +422,7 @@ return {
             menuItemsWidth += computeFloatOuterWidthWithMargins($extraItemsToggle[0]);
             do {
                 menuItemsWidth -= computeFloatOuterWidthWithMargins($items.eq(--nbItems)[0]);
-            } while (menuItemsWidth > maxWidth);
+            } while (!(maxWidth - menuItemsWidth >= -0.001));
 
             var $extraItems = $items.slice(nbItems).detach();
             $extraItems.removeClass('nav-item');
diff --git a/addons/website/static/src/js/content/menu.js b/addons/website/static/src/js/content/menu.js
index 3511f51a70f..e0c8011cf9b 100644
--- a/addons/website/static/src/js/content/menu.js
+++ b/addons/website/static/src/js/content/menu.js
@@ -1,7 +1,6 @@
 odoo.define('website.content.menu', function (require) {
 'use strict';
 
-var config = require('web.config');
 var dom = require('web.dom');
 var sAnimation = require('website.content.snippets.animation');
 
@@ -76,18 +75,19 @@ sAnimation.registry.affixMenu = sAnimation.Class.extend({
  *
  * Note: this works well with the affixMenu... by chance (autohideMenu is called
  * after alphabetically).
- *
- * @todo We may want to avoid some code duplication by sharing what is done in
- * the backend in enterprise...
  */
 sAnimation.registry.autohideMenu = sAnimation.Class.extend({
-    selector: 'header:not(.o_no_autohide_menu) #top_menu',
+    selector: 'header #top_menu',
 
     /**
      * @override
      */
     start: function () {
-        dom.initAutoMoreMenu(this.$el, {unfoldable: '.divider, .divider ~ li'});
+        this.noAutohide = this.$el.closest('.o_no_autohide_menu').length;
+        if (!this.noAutohide) {
+            dom.initAutoMoreMenu(this.$el, {unfoldable: '.divider, .divider ~ li'});
+        }
+        this.$el.removeClass('o_menu_loading');
         return this._super.apply(this, arguments);
     },
     /**
@@ -95,7 +95,9 @@ sAnimation.registry.autohideMenu = sAnimation.Class.extend({
      */
     destroy: function () {
         this._super.apply(this, arguments);
-        dom.destroyAutoMoreMenu(this.$el);
+        if (!this.noAutohide) {
+            dom.destroyAutoMoreMenu(this.$el);
+        }
     },
 });
 
diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss
index 09ba9772154..5d46eeee438 100644
--- a/addons/website/static/src/scss/website.scss
+++ b/addons/website/static/src/scss/website.scss
@@ -28,6 +28,15 @@ $-theme-font: nth($o-theme-font-urls, $o-theme-font-number);
 
 .navbar {
     @include o-bg-color(color('menu'));
+
+    .nav-item {
+        transition: opacity 1000ms ease 0s;
+    }
+    .o_menu_loading .nav-item {
+        height: 0 !important;
+        overflow: hidden !important;
+        opacity: 0 !important;
+    }
 }
 .o_footer {
     @include o-bg-color(color('footer'));
diff --git a/addons/website/views/website_templates.xml b/addons/website/views/website_templates.xml
index 0664f8e4281..b5126df0ded 100644
--- a/addons/website/views/website_templates.xml
+++ b/addons/website/views/website_templates.xml
@@ -213,6 +213,9 @@
     <xpath expr="//header//a[hasclass('navbar-brand')]" position="replace">
         <a class="navbar-brand" href="/" t-if="website" t-field="website.name">My Website</a>
     </xpath>
+    <xpath expr="//header//ul[@id='top_menu']" position="attributes">
+        <attribute name="class" separator=" " add="o_menu_loading"/>
+    </xpath>
     <xpath expr="//header//ul[@id='top_menu']/li[hasclass('divider')]" position="attributes">
         <attribute name="t-if">website.user_id != user_id</attribute>
     </xpath>