From c904f8fbfe38b3d3a878f717dd1cf13219f94219 Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Mon, 2 Dec 2024 08:41:05 +0100
Subject: [PATCH] Prevent header layout shift

---
 client/src/app/header/header.component.html | 6 +++---
 client/src/app/header/header.component.scss | 1 +
 client/src/app/header/header.component.ts   | 8 ++++----
 client/src/sass/include/_button-mixins.scss | 6 ++----
 4 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/client/src/app/header/header.component.html b/client/src/app/header/header.component.html
index 78ef68503..1137c203e 100644
--- a/client/src/app/header/header.component.html
+++ b/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"
diff --git a/client/src/app/header/header.component.scss b/client/src/app/header/header.component.scss
index fd33dbb8c..b2951c287 100644
--- a/client/src/app/header/header.component.scss
+++ b/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);
diff --git a/client/src/app/header/header.component.ts b/client/src/app/header/header.component.ts
index 28e7e1771..08b1eab8b 100644
--- a/client/src/app/header/header.component.ts
+++ b/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 () {
diff --git a/client/src/sass/include/_button-mixins.scss b/client/src/sass/include/_button-mixins.scss
index 40b5381a5..2cec73288 100644
--- a/client/src/sass/include/_button-mixins.scss
+++ b/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) {