Prevent header layout shift

client/src/app/header/header.component.html

@@ -1,13 +1,13 @@
-<div class="root" [hidden]="!loaded || (loggedIn && !user.account)">
+<div class="root">
   <a class="peertube-title" [routerLink]="getDefaultRoute()" [queryParams]="getDefaultRouteQuery()">
 
     <span class="icon-logo"></span>
     <span class="instance-name">{{ instanceName }}</span>
   </a>
 
-  <my-search-typeahead></my-search-typeahead>
+  <my-search-typeahead [hidden]="!isLoaded()"></my-search-typeahead>
 
-  <div class="d-flex align-items-center buttons-container">
+  <div class="d-flex align-items-center buttons-container" [hidden]="!isLoaded()">
     @if (!loggedIn) {
       <my-button
         i18n-title title="Open settings modal"

client/src/app/header/header.component.scss

@@ -25,6 +25,7 @@
   color: inherit !important;
   display: flex;
   align-items: center;
+  min-height: 46px; // Prevent layout shifting when waiting for the right part of the header to load
 
   @include padding-left(18px);
   @include margin-right(0.5rem);

client/src/app/header/header.component.ts

@@ -62,8 +62,6 @@ export class HeaderComponent implements OnInit, OnDestroy {
 
   currentInterfaceLanguage: string
 
-  loaded = false
-
   private serverConfig: ServerConfig
 
   private quickSettingsModalSub: Subscription
@@ -93,6 +91,10 @@ export class HeaderComponent implements OnInit, OnDestroy {
     return this.serverService.getHTMLConfig().instance.name
   }
 
+  isLoaded () {
+    return this.serverConfig && (!this.loggedIn || !!this.user?.account)
+  }
+
   isInMobileView () {
     return this.screenService.isInMobileView()
   }
@@ -125,8 +127,6 @@ export class HeaderComponent implements OnInit, OnDestroy {
 
     this.quickSettingsModalSub = this.modalService.openQuickSettingsSubject
       .subscribe(() => this.openQuickSettings())
-
-    this.loaded = true
   }
 
   ngOnDestroy () {

client/src/sass/include/_button-mixins.scss

@@ -205,12 +205,10 @@
 @mixin button-with-icon($width: 20px, $margin-right: 3px, $top: -1px, $right: 0) {
   my-global-icon {
     position: relative;
-    display: inline-block;
-    width: $width;
-    height: $width;
-    line-height: $width;
     top: $top;
     right: $right;
+
+    @include global-icon-size($width);
   }
 
   &:not(.icon-only) {