Implement logo preloading on page load and enhance branding image display with fade-in effect

src/api/branding.ts

@@ -12,6 +12,7 @@ export interface AnimationEnabled {
 }
 
 const BRANDING_CACHE_KEY = 'cabinet_branding'
+const LOGO_PRELOADED_KEY = 'cabinet_logo_preloaded'
 
 // Get cached branding from localStorage
 export const getCachedBranding = (): BrandingInfo | null => {
@@ -35,6 +36,41 @@ export const setCachedBranding = (branding: BrandingInfo) => {
   }
 }
 
+// Preload logo image for instant display
+export const preloadLogo = (branding: BrandingInfo): Promise<void> => {
+  return new Promise((resolve) => {
+    if (!branding.has_custom_logo || !branding.logo_url) {
+      resolve()
+      return
+    }
+
+    const logoUrl = `${import.meta.env.VITE_API_URL || ''}${branding.logo_url}`
+
+    // Check if already preloaded in this session
+    const preloaded = sessionStorage.getItem(LOGO_PRELOADED_KEY)
+    if (preloaded === logoUrl) {
+      resolve()
+      return
+    }
+
+    const img = new Image()
+    img.onload = () => {
+      sessionStorage.setItem(LOGO_PRELOADED_KEY, logoUrl)
+      resolve()
+    }
+    img.onerror = () => resolve()
+    img.src = logoUrl
+  })
+}
+
+// Initialize logo preload from cache on page load
+export const initLogoPreload = () => {
+  const cached = getCachedBranding()
+  if (cached) {
+    preloadLogo(cached)
+  }
+}
+
 export const brandingApi = {
   // Get current branding (public, no auth required)
   getBranding: async (): Promise<BrandingInfo> => {