From 44e8b32c2f1f397299aec9c05e706c5b89a3ed01 Mon Sep 17 00:00:00 2001
From: Jannis Braun <151788261+TheZwiss@users.noreply.github.com>
Date: Sun, 22 Mar 2026 03:17:00 +0100
Subject: [PATCH] feat: apply delayed loading to app boot skeleton

---
 packages/web/src/components/layout/AppLayout.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/web/src/components/layout/AppLayout.tsx b/packages/web/src/components/layout/AppLayout.tsx
index 7c1a2e6a..5ae8bb3c 100644
--- a/packages/web/src/components/layout/AppLayout.tsx
+++ b/packages/web/src/components/layout/AppLayout.tsx
@@ -28,6 +28,7 @@ import { ToastContainer } from '../ui/ToastContainer';
 import { UpdateToast } from '../ui/UpdateToast';
 import { ContextMenuRenderer } from '../ui/ContextMenuRenderer';
 import { useAuth } from '../../hooks/useAuth';
+import { useDelayedLoading } from '../../hooks/useDelayedLoading';
 import { useWebSocket } from '../../hooks/useWebSocket';
 import { useFederationToasts } from '../../hooks/useFederationToasts';
 import { useLiveKit } from '../../hooks/useLiveKit';
@@ -91,6 +92,7 @@ export function AppLayout() {
   }, [outputDeviceId]);
 
   const { user, isLoading } = useAuth();
+  const showBootSkeleton = useDelayedLoading(isLoading);
   const setCurrentSpace = useSpaceStore((s) => s.setCurrentSpace);
   const loadSpaceDetail = useSpaceStore((s) => s.loadSpaceDetail);
   const setCurrentChannel = useChatStore((s) => s.setCurrentChannel);
@@ -262,7 +264,7 @@ export function AppLayout() {
     }
   }, [spaceId, channelId, channels, navigate]);
 
-  if (isLoading || !user) {
+  if (!user || showBootSkeleton) {
     return (
       <div className="h-full flex bg-surface-base" role="status" aria-label="Loading Backspace">
         {/* Space strip */}