improve desktop layout rendering readiness.

This commit is contained in:
2025-12-03 14:30:56 +01:00
parent e66451afbd
commit 4337575b17
+16 -2
View File
@@ -95,6 +95,8 @@ const DesktopWorkspaceContent: React.FC<DesktopWorkspaceProps> = ({
const { addPointer, removePointer } = usePointerTracking(); const { addPointer, removePointer } = usePointerTracking();
const containerRef = useRef<HTMLDivElement>(null); const containerRef = useRef<HTMLDivElement>(null);
const [isLayoutReady, setIsLayoutReady] = useState(false); const [isLayoutReady, setIsLayoutReady] = useState(false);
const [isLayoutLoaded, setIsLayoutLoaded] = useState(false);
const [hasContainerSize, setHasContainerSize] = useState(false);
const items = useMemo(() => { const items = useMemo(() => {
return entries return entries
@@ -117,7 +119,7 @@ const DesktopWorkspaceContent: React.FC<DesktopWorkspaceProps> = ({
const { width, height } = entry.contentRect; const { width, height } = entry.contentRect;
layoutStore.setContainerSize(width, height); layoutStore.setContainerSize(width, height);
if (width > 0 && height > 0) { if (width > 0 && height > 0) {
setIsLayoutReady(true); setHasContainerSize(true);
} }
} }
}); });
@@ -130,10 +132,22 @@ const DesktopWorkspaceContent: React.FC<DesktopWorkspaceProps> = ({
if (tenantId && viewId) { if (tenantId && viewId) {
// Clear store when switching views to prevent stale items // Clear store when switching views to prevent stale items
layoutStore.clear(); 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]); }, [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 // Sync LayoutStore items with current entries to remove stale items
useEffect(() => { useEffect(() => {
const currentIds = new Set(items.map((doc, index) => doc.id ? String(doc.id) : `temp-${index}`)); const currentIds = new Set(items.map((doc, index) => doc.id ? String(doc.id) : `temp-${index}`));