diff --git a/src/components/Nodes/wrapNode.tsx b/src/components/Nodes/wrapNode.tsx index 9b7faf5c..d33f184c 100644 --- a/src/components/Nodes/wrapNode.tsx +++ b/src/components/Nodes/wrapNode.tsx @@ -1,4 +1,14 @@ -import React, { useEffect, useRef, memo, ComponentType, CSSProperties, useMemo, MouseEvent, useCallback } from 'react'; +import React, { + useEffect, + useLayoutEffect, + useRef, + memo, + ComponentType, + CSSProperties, + useMemo, + MouseEvent, + useCallback, +} from 'react'; import { DraggableCore, DraggableData, DraggableEvent } from 'react-draggable'; import cc from 'classcat'; @@ -39,6 +49,7 @@ export default (NodeComponent: ComponentType) => { isDragging, resizeObserver, }: WrapNodeProps) => { + const observerInitialized = useRef(false); const updateNodeDimensions = useStoreActions((actions) => actions.updateNodeDimensions); const addSelectedElements = useStoreActions((actions) => actions.addSelectedElements); const updateNodePosDiff = useStoreActions((actions) => actions.updateNodePosDiff); @@ -191,21 +202,22 @@ export default (NodeComponent: ComponentType) => { [node, onNodeDoubleClick] ); - useEffect(() => { - if (nodeElement.current && !isHidden) { + useLayoutEffect(() => { + // the resize observer calls an updateNodeDimensions initially. + // We don't need to force another dimension update if it hasn't happened yet + if (nodeElement.current && !isHidden && observerInitialized.current) { updateNodeDimensions([{ id, nodeElement: nodeElement.current, forceUpdate: true }]); } }, [id, isHidden, sourcePosition, targetPosition]); useEffect(() => { if (nodeElement.current) { + observerInitialized.current = true; const currNode = nodeElement.current; resizeObserver?.observe(currNode); return () => resizeObserver?.unobserve(currNode); } - - return; }, []); if (isHidden) {