Hartmut/CapaKraken
1
0
Fork 0
Code Issues 10 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix(dashboard): measure grid container width after hydration completes, not just on mount

Browse Source
This commit is contained in:
Hartmut Nörenberg
2026-04-09 20:58:57 +02:00
parent 5ad1048519
commit 1a67af6761
1 changed files with 4 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/dashboard/DashboardClient.tsx
+4 -1
View File
@@ -166,6 +166,9 @@ export function DashboardClient() {
const resizeFrameRef = useRef<number | null>(null); const resizeFrameRef = useRef<number | null>(null);
const lastMeasuredWidthRef = useRef(0); const lastMeasuredWidthRef = useRef(0);
const [gridWidth, setGridWidth] = useState(1200); const [gridWidth, setGridWidth] = useState(1200);
// Re-run when isHydrated flips: on first mount the containerRef div doesn't
// exist yet (skeleton is shown), so the effect returns early. Once hydration
// completes the real container div is rendered and we need to measure it.
useEffect(() => { useEffect(() => {
const el = containerRef.current; const el = containerRef.current;
if (!el) return; if (!el) return;
@@ -189,7 +192,7 @@ export function DashboardClient() {
ro.disconnect(); ro.disconnect();
if (resizeFrameRef.current !== null) cancelAnimationFrame(resizeFrameRef.current); if (resizeFrameRef.current !== null) cancelAnimationFrame(resizeFrameRef.current);
}; };
}, []); }, [isHydrated]);
const layouts = useMemo( const layouts = useMemo(
() => ({ () => ({