administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-03-17 21:58:22 +03:00
Code Issues Actions 3 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();
}, []);
const gridContainerRef = useRef<HTMLDivElement>(null);
const [containerWidth, setContainerWidth] = useState(0);
const [containerHeight, setContainerHeight] = useState(0);
const roRef = useRef<ResizeObserver | null>(null);
// useLayoutEffect reads ref.current after commit (refs are set before layout
// effects run), so this reliably fires before the first paint regardless of
// whether SWR triggers subsequent re-renders or not.
useLayoutEffect(() => {
const el = gridContainerRef.current;
// Callback ref fires whenever the element mounts/unmounts, so containerWidth
// is always set immediately when the grid div first appears (after skeleton).
const gridContainerRef = useCallback((el: HTMLDivElement | null) => {
roRef.current?.disconnect();
roRef.current = null;
if (!el) return;
setContainerWidth(el.clientWidth);
setContainerHeight(el.clientHeight);
@ -345,7 +344,7 @@ export default function DraggableGridLayout({
setContainerHeight(entry.contentRect.height);
});
ro.observe(el);
return () => ro.disconnect();
roRef.current = ro;
}, []);
const scrollBarWidth = useMemo(() => {