diff --git a/ts/components/MediaEditor.dom.tsx b/ts/components/MediaEditor.dom.tsx index 36464cef2a..647bcf75d0 100644 --- a/ts/components/MediaEditor.dom.tsx +++ b/ts/components/MediaEditor.dom.tsx @@ -328,7 +328,6 @@ export function MediaEditor({ width: img.width, }; setImageState(newImageState); - takeSnapshot('initial state', newImageState, canvas); }; img.onerror = ( event: Event | string, @@ -591,6 +590,20 @@ export function MediaEditor({ drawFabricBackgroundImage({ fabricCanvas, image, imageState }); }, [fabricCanvas, image, imageState]); + const initialSnapshotTaken = useRef(false); + useEffect(() => { + if ( + !fabricCanvas || + !fabricCanvas.backgroundImage || + initialSnapshotTaken.current + ) { + return; + } + + takeSnapshot('initial state', imageState, fabricCanvas); + initialSnapshotTaken.current = true; + }, [fabricCanvas, imageState, takeSnapshot]); + const [canCrop, setCanCrop] = useState(false); const [cropAspectRatioLock, setCropAspectRatioLock] = useState(false); const [drawTool, setDrawTool] = useState(DrawTool.Pen); diff --git a/ts/util/lint/exceptions.json b/ts/util/lint/exceptions.json index 84ab0bfb15..a4b3e85e2c 100644 --- a/ts/util/lint/exceptions.json +++ b/ts/util/lint/exceptions.json @@ -1456,6 +1456,14 @@ "updated": "2025-05-19T22:29:15.758Z", "reasonDetail": "Holding on to a close function" }, + { + "rule": "React-useRef", + "path": "ts/components/MediaEditor.dom.tsx", + "line": " const initialSnapshotTaken = useRef(false);", + "reasonCategory": "usageTrusted", + "updated": "2025-11-19T18:44:48.727Z", + "reasonDetail": "Tracking whether initial snapshot has been taken" + }, { "rule": "React-useRef", "path": "ts/components/MediaQualitySelector.dom.tsx",