administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-03-20 23:28:23 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

fix: use callback ref to measure container width after skeleton unmounts

Browse Source 
useLayoutEffect with [] deps only ran on the initial render when
gridContainerRef was null (grid div was hidden behind skeleton).
After skeleton disappeared the div mounted but useLayoutEffect never
re-ran, leaving containerWidth=0 and Responsive invisible (blank screen).

A callback ref fires every time the element mounts, so containerWidth
is always set immediately when the grid div first appears.
This commit is contained in:
Claude 2026-03-16 04:12:48 +00:00
parent 067fdb50e1
commit 710dec00fe
No known key found for this signature in database
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(() => {