style(edges): hide edge while updating closes #2285

packages/core/src/components/Edges/wrapEdge.tsx

@@ -54,6 +54,7 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
     disableKeyboardA11y,
   }: WrapEdgeProps): JSX.Element | null => {
     const edgeRef = useRef<SVGGElement>(null);
+    const [updateHover, setUpdateHover] = useState<boolean>(false);
     const [updating, setUpdating] = useState<boolean>(false);
     const store = useStoreApi();
 
@@ -92,11 +93,13 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
       const isTarget = isSourceHandle;
       const edge = store.getState().edges.find((e) => e.id === id)!;
 
+      setUpdating(true);
       onEdgeUpdateStart?.(event, edge, handleType);
 
-      const _onEdgeUpdateEnd = onEdgeUpdateEnd
+      const _onEdgeUpdateEnd = (evt: MouseEvent) => {
-        ? (evt: MouseEvent): void => onEdgeUpdateEnd(evt, edge, handleType)
+        setUpdating(false);
-        : undefined;
+        onEdgeUpdateEnd?.(evt, edge, handleType);
+      };
 
       const onConnectEdge = (connection: Connection) => onEdgeUpdate?.(edge, connection);
 
@@ -119,8 +122,8 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
     const onEdgeUpdaterTargetMouseDown = (event: React.MouseEvent<SVGGElement, MouseEvent>): void =>
       handleEdgeUpdater(event, false);
 
-    const onEdgeUpdaterMouseEnter = () => setUpdating(true);
+    const onEdgeUpdaterMouseEnter = () => setUpdateHover(true);
-    const onEdgeUpdaterMouseOut = () => setUpdating(false);
+    const onEdgeUpdaterMouseOut = () => setUpdateHover(false);
 
     const inactive = !elementsSelectable && !onClick;
     const handleEdgeUpdate = typeof onEdgeUpdate !== 'undefined';
@@ -128,7 +131,7 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
       'react-flow__edge',
       `react-flow__edge-${type}`,
       className,
-      { selected, animated, inactive, updating },
+      { selected, animated, inactive, updating: updateHover },
     ]);
 
     const onKeyDown = (event: KeyboardEvent) => {
@@ -161,6 +164,7 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
         aria-describedby={disableKeyboardA11y ? undefined : `${ARIA_EDGE_DESC_KEY}-${rfId}`}
         ref={edgeRef}
       >
+        {!updating && (
           <EdgeComponent
             id={id}
             source={source}
@@ -186,6 +190,8 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
             markerStart={markerStartUrl}
             markerEnd={markerEndUrl}
           />
+        )}
+
         {handleEdgeUpdate && (
           <g
             onMouseDown={onEdgeUpdaterSourceMouseDown}