[FIX] website: improve menu loading effect

Long story short: that menu loading effect was introduced with version
12.0 for a technical reason: allow menu items to collapse into a
dropdown when there are too many. For that, during loading their height
is forced to 0 and they are hidden so that they do not make the header
grow when going on multiple lines.

Since 13.0, the lazy loading made this effect to be too delayed... but
fixing that would make another flickering appear due to the logo image
loading. This thus cannot be fixed at the moment.

However, since 14.0 there are several menu templates and some make the
effect look really ugly. Like the vertical header which has a tiny
empty header which then grow with the menu items on loading. To mitigate
the effect, this commit replaces the "height: 0" trick by forcing the
menu items on one line during loading. They however still stay hidden
during this time to avoid the logo menu flickering, for now.

Part of https://github.com/odoo/odoo/pull/59136

closes odoo/odoo#59148

X-original-commit: 1edf40e76be4a4595849c4c9dab692984e372c46
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

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

@@ -186,6 +186,9 @@ $-seen-urls: ();
         font-family: $o-theme-navbar-font;
     }
 
+    .navbar-collapse {
+        min-width: 0; // Allows it to shrink during loading
+    }
     .nav-item {
         transition: opacity 1000ms ease 0s;
     }
@@ -195,10 +198,13 @@ $-seen-urls: ();
         // the header does not flicker during loading.
         white-space: nowrap;
     }
-    .o_menu_loading .nav-item {
-        height: 0 !important;
+    .o_menu_loading {
+        flex-wrap: nowrap !important;
         overflow: hidden !important;
-        opacity: 0 !important;
+
+        .nav-item {
+            opacity: 0 !important;
+        }
     }
 }