animateDrawing shows dashed line on first render

Hey there! Cool package. Unfortunately I think I may have found a bug with the animateDrawing prop. I’m using v2.0.2

When animateDrawing is set to true, I’m seeing a dashed line appear on first render instead of seeing the arrow animate cleanly. Strangely, the arrow does animate properly if the component is removed and then added again to the DOM.

This dashed effect happens even if the dashness prop is set to false.

To Reproduce Here’s a code sandbox with a reproducible example. Refresh the preview and you should see a dashed line instead of the animation.

import "./styles.css";
import Xarrow, { Xwrapper } from "react-xarrows";

export default function App() {
  return (
      <div className="container">
        <Xwrapper>
          <div
            style={{
              width: "50px",
              height: "50px",
              backgroundColor: "blue",
              alignSelf: "start"
            }}
            id={"start"}
          />
          <div
            style={{ width: "50px", height: "50px", backgroundColor: "red" }}
            id={"end"}
          />
          <Xarrow
            start={"start"}
            end="end"
            animateDrawing={true}
            dashness={false}
          />
        </Xwrapper>
      </div>
  );
}

Screenshots Here’s how the arrow appears on initial render:

[SimmonsRitchie]

Is there any workaround? Kindly respond!

@SimmonsRitchie @Eliav2

Sorry, I think I abandoned this package after I encountered this bug. It seemed like a cool package but that issue was a bit of a dealbreaker for me in my use case.

[Eliav2]

Great report, Thanks!