diff --git a/packages/sdk/packages/node-renderer/src/components/module/graph/NodeHover.tsx b/packages/sdk/packages/node-renderer/src/components/module/graph/NodeHover.tsx index 738ff74aab..e2be23b366 100644 --- a/packages/sdk/packages/node-renderer/src/components/module/graph/NodeHover.tsx +++ b/packages/sdk/packages/node-renderer/src/components/module/graph/NodeHover.tsx @@ -1,5 +1,7 @@ +import { PopperProps } from '@mui/material' +import { FlexCol } from '@xylabs/react-flexbox' import { NodeSingular } from 'cytoscape' -import { useLayoutEffect, useRef, useState } from 'react' +import { useEffect, useLayoutEffect, useRef, useState } from 'react' import { ModuleHoverPopper } from './Popper' @@ -11,12 +13,16 @@ export const ModuleGraphNodeHover: React.FC = ({ node }) => { const { address, name } = node?.data() ?? {} const [boundingBox, setBoundingBox] = useState(node?.renderedBoundingBox()) const ref = useRef(null) - const [currentEl, setCurrentEl] = useState(null) + const [currentEl, setCurrentEl] = useState(null) - useLayoutEffect(() => { - if (node && ref.current) { + // Ensure first render clears the previous element when node changes to avoid flicker + useEffect(() => { + setCurrentEl(null) + }, [node]) + + useEffect(() => { + if (node) { setBoundingBox(node.renderedBoundingBox()) - setCurrentEl(ref.current) } const listener = () => { @@ -30,24 +36,30 @@ export const ModuleGraphNodeHover: React.FC = ({ node }) => { } }, [node]) + // Once boundingBox state is set and applied to the layout, update the ref + useLayoutEffect(() => { + setCurrentEl(ref.current) + }, [boundingBox]) + return ( <> + {node ? ( <> -
) : null}