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: replace useResizeObserver with useLayoutEffect for reliable container width

Browse Source 
useResizeObserver reads ref.current during render (before commit), so on
first render ref.current is null, no observation starts, and containerWidth
stays 0 if no subsequent re-render happens (e.g. page refresh with cached
SWR data). useLayoutEffect runs after refs are committed, so ref.current
is always the real DOM element.

This fixes both the right-column overflow (no window.innerWidth fallback
needed — width is always the actual container width) and the black screen
on refresh (containerWidth is reliable before the first paint).

https://claude.ai/code/session_01H1sqbcFmtwwsdNTJcJHJWd
This commit is contained in:
Claude 2026-03-15 12:03:54 +00:00
parent 5e40dbbcd2
commit 067fdb50e1
No known key found for this signature in database
1 changed files with 20 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -28,7 +28,7 @@ import {
VolumeState,
} from "@/types/live";
import { Skeleton } from "@/components/ui/skeleton";
import { useResizeObserver } from "@/hooks/resize-observer";
import { isEqual } from "lodash";
import useSWR from "swr";
import { isDesktop, isMobile } from "react-device-detect";
@ -329,23 +329,25 @@ export default function DraggableGridLayout({
const gridContainerRef = useRef<HTMLDivElement>(null);
const [{ width: containerWidth, height: containerHeight }] =
useResizeObserver(gridContainerRef);
const [containerWidth, setContainerWidth] = useState(0);
const [containerHeight, setContainerHeight] = useState(0);
// useResizeObserver reads ref.current at render time, so it may miss the
// initial mount when ref.current is null (e.g. on page refresh with cached
// SWR data). Measure the container synchronously in useLayoutEffect as a
// reliable seed value; containerWidth from ResizeObserver takes over once
// it fires.
const [initialWidth, setInitialWidth] = useState(0);
// 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(() => {
if (gridContainerRef.current) {
setInitialWidth(gridContainerRef.current.offsetWidth);
}
const el = gridContainerRef.current;
if (!el) return;
setContainerWidth(el.clientWidth);
setContainerHeight(el.clientHeight);
const ro = new ResizeObserver(([entry]) => {
setContainerWidth(entry.contentRect.width);
setContainerHeight(entry.contentRect.height);
});
ro.observe(el);
return () => ro.disconnect();
}, []);
const effectiveWidth = containerWidth || initialWidth;
const scrollBarWidth = useMemo(() => {
if (containerWidth && containerHeight && containerRef.current) {
return (
@ -356,8 +358,8 @@ export default function DraggableGridLayout({
}, [containerRef, containerHeight, containerWidth]);
const availableWidth = useMemo(
() => (scrollBarWidth ? effectiveWidth + scrollBarWidth : effectiveWidth),
[effectiveWidth, scrollBarWidth],
() => (scrollBarWidth ? containerWidth + scrollBarWidth : containerWidth),
[containerWidth, scrollBarWidth],
);
const hasScrollbar = useMemo(() => {
@ -373,7 +375,7 @@ export default function DraggableGridLayout({
// subtract container margin, 1 camera takes up at least 4 rows
// account for additional margin on bottom of each row
return (
((availableWidth || window.innerWidth) - 2 * marginValue) /
(availableWidth - 2 * marginValue) /
12 /
aspectRatio -
marginValue +
@ -724,7 +726,7 @@ export default function DraggableGridLayout({
currentGroups={groups}
activeGroup={group}
/>
{effectiveWidth > 0 && <Responsive
{containerWidth > 0 && <Responsive
className="grid-layout"
width={availableWidth}
layouts={{