From 4337575b172e8ae284c992a61f0b87897a17ec5a Mon Sep 17 00:00:00 2001
From: Nils Schneider <nils.schneider@posteo.de>
Date: Wed, 3 Dec 2025 14:30:56 +0100
Subject: [PATCH] improve desktop layout rendering readiness.

---
 frontend/src/desktop/DesktopWorkspace.tsx | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/frontend/src/desktop/DesktopWorkspace.tsx b/frontend/src/desktop/DesktopWorkspace.tsx
index d360361..345638e 100644
--- a/frontend/src/desktop/DesktopWorkspace.tsx
+++ b/frontend/src/desktop/DesktopWorkspace.tsx
@@ -95,6 +95,8 @@ const DesktopWorkspaceContent: React.FC<DesktopWorkspaceProps> = ({
   const { addPointer, removePointer } = usePointerTracking();
   const containerRef = useRef<HTMLDivElement>(null);
   const [isLayoutReady, setIsLayoutReady] = useState(false);
+  const [isLayoutLoaded, setIsLayoutLoaded] = useState(false);
+  const [hasContainerSize, setHasContainerSize] = useState(false);
 
   const items = useMemo(() => {
     return entries
@@ -117,7 +119,7 @@ const DesktopWorkspaceContent: React.FC<DesktopWorkspaceProps> = ({
         const { width, height } = entry.contentRect;
         layoutStore.setContainerSize(width, height);
         if (width > 0 && height > 0) {
-          setIsLayoutReady(true);
+          setHasContainerSize(true);
         }
       }
     });
@@ -130,10 +132,22 @@ const DesktopWorkspaceContent: React.FC<DesktopWorkspaceProps> = ({
     if (tenantId && viewId) {
       // Clear store when switching views to prevent stale items
       layoutStore.clear();
-      layoutStore.loadLayout(String(tenantId), viewId);
+      setIsLayoutLoaded(false);
+      setIsLayoutReady(false); // Immediately hide cards during transition
+      layoutStore.loadLayout(String(tenantId), viewId).then(() => {
+        setIsLayoutLoaded(true);
+      });
+    } else {
+      // No tenant/view ID means no saved layout to load - skip directly to loaded
+      setIsLayoutLoaded(true);
     }
   }, [layoutStore, tenantId, viewId]);
 
+  // Only set layout ready when both container has size AND layout is loaded
+  useEffect(() => {
+    setIsLayoutReady(hasContainerSize && isLayoutLoaded);
+  }, [hasContainerSize, isLayoutLoaded]);
+
   // Sync LayoutStore items with current entries to remove stale items
   useEffect(() => {
     const currentIds = new Set(items.map((doc, index) => doc.id ? String(doc.id) : `temp-${index}`));