administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-04-05 22:57:40 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Merge pull request #53 from ibs0d/claude/fix-grid-layout-height-p9ZWo

Browse Source 
fix: use callback ref to measure container width after skeleton unmounts
This commit is contained in:
ibs0d 2026-03-16 15:22:43 +11:00 committed by GitHub
commit 52f78c9de9
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 7 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
web/src/views/live/DraggableGridLayout.tsx
View File

@ -327,16 +327,15 @@ export default function DraggableGridLayout({
calculateRemValue(); calculateRemValue();
}, []); }, []);
const gridContainerRef = useRef<HTMLDivElement>(null);
const [containerWidth, setContainerWidth] = useState(0); const [containerWidth, setContainerWidth] = useState(0);
const [containerHeight, setContainerHeight] = useState(0); const [containerHeight, setContainerHeight] = useState(0);
const roRef = useRef<ResizeObserver | null>(null);
// useLayoutEffect reads ref.current after commit (refs are set before layout // Callback ref fires whenever the element mounts/unmounts, so containerWidth
// effects run), so this reliably fires before the first paint regardless of // is always set immediately when the grid div first appears (after skeleton).
// whether SWR triggers subsequent re-renders or not. const gridContainerRef = useCallback((el: HTMLDivElement | null) => {
useLayoutEffect(() => { roRef.current?.disconnect();
const el = gridContainerRef.current; roRef.current = null;
if (!el) return; if (!el) return;
setContainerWidth(el.clientWidth); setContainerWidth(el.clientWidth);
setContainerHeight(el.clientHeight); setContainerHeight(el.clientHeight);
@ -345,7 +344,7 @@ export default function DraggableGridLayout({
setContainerHeight(entry.contentRect.height); setContainerHeight(entry.contentRect.height);
}); });
ro.observe(el); ro.observe(el);
return () => ro.disconnect(); roRef.current = ro;
}, []); }, []);
const scrollBarWidth = useMemo(() => { const scrollBarWidth = useMemo(() => {