From 28869858b516a13d9036d59f2918e32b363f6e33 Mon Sep 17 00:00:00 2001
From: Dominic R <dominic@sdko.org>
Date: Fri, 25 Apr 2025 05:25:40 -0400
Subject: [PATCH] web/admin: prevent default logo flashing in admin interface
 (#13960)

* web: elements: SidebarBrand: prevent logo flashing in admin interface

When using a custom SVG file (or mabye other types, TBH I didn't check, I should) for a branded logo, the logo would flash the stock authentik logo for a moment before the custom logo appears on the Admin interface.

This was happening because the brand configuration was being loaded asynchronously through the context provider, causing a brief moment where the default logo was shown.

Closes https://github.com/goauthentik/authentik/issues/3228
Closes https://github.com/goauthentik/authentik/issues/13739

* use globalAK

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

---------

Signed-off-by: Jens Langhammer <jens@goauthentik.io>
Co-authored-by: Jens Langhammer <jens@goauthentik.io>
---
 web/src/elements/sidebar/SidebarBrand.ts | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/web/src/elements/sidebar/SidebarBrand.ts b/web/src/elements/sidebar/SidebarBrand.ts
index f63bd99b3f..1deededded 100644
--- a/web/src/elements/sidebar/SidebarBrand.ts
+++ b/web/src/elements/sidebar/SidebarBrand.ts
@@ -1,10 +1,11 @@
 import { EVENT_SIDEBAR_TOGGLE } from "@goauthentik/common/constants";
+import { globalAK } from "@goauthentik/common/global";
 import { AKElement } from "@goauthentik/elements/Base";
 import { WithBrandConfig } from "@goauthentik/elements/Interface/brandProvider";
 import { themeImage } from "@goauthentik/elements/utils/images";
 
 import { msg } from "@lit/localize";
-import { CSSResult, TemplateResult, css, html } from "lit";
+import { CSSResult, TemplateResult, css, html, nothing } from "lit";
 import { customElement } from "lit/decorators.js";
 
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
@@ -70,7 +71,10 @@ export class SidebarBrand extends WithBrandConfig(AKElement) {
     }
 
     render(): TemplateResult {
-        return html` ${window.innerWidth <= MIN_WIDTH
+        const logoUrl =
+            globalAK().brand.brandingLogo || this.brand?.brandingLogo || DefaultBrand.brandingLogo;
+
+        return html`${window.innerWidth <= MIN_WIDTH
                 ? html`
                       <button
                           class="sidebar-trigger pf-c-button"
@@ -86,14 +90,10 @@ export class SidebarBrand extends WithBrandConfig(AKElement) {
                           <i class="fas fa-bars"></i>
                       </button>
                   `
-                : html``}
+                : nothing}
             <a href="#/" class="pf-c-page__header-brand-link">
                 <div class="pf-c-brand ak-brand">
-                    <img
-                        src=${themeImage(this.brand?.brandingLogo ?? DefaultBrand.brandingLogo)}
-                        alt="${msg("authentik Logo")}"
-                        loading="lazy"
-                    />
+                    <img src=${themeImage(logoUrl)} alt="${msg("authentik Logo")}" loading="lazy" />
                 </div>
             </a>`;
     }