Correct usage of useTransition with visx

[gtb104]

We're using visx as our base charting library. While creating a DonutChart by following their example, I'm not sure the usage of useTransition is correct. The example seems to be for v8, but we're using v9.

The behavior I'm expecting is for all the segments to animate in clockwise. What I see is that something starts animating in, disappears, then more segments animate in filling the donut. That little bit that animates first is real quick, hard to see, but it's there. I'd like to know:

1. Why it's there?
2. Is this is the recommended way to animate donut segments?
3. When clicking on a segment, how can I make that segment fill the pie smoothly?

I have a codesandbox that isolates our code so you can see what's going on (not all of it work yet, like hovering/clicking).

[gtb104]

I see why there's two groups of segments. The ParentSize component renders twice. Once with a width/height of 0, and another time with the dimensions of the parent element.

I remember the visx example having an escape hatch of if ( parent.width === 0) return. This works fine under normal circumstances, but doesn't work well in testing. We use Jest, and that doesn't implement getBoundingClientRect which is needed for ParentSize to find its dimensions.

[joshuaellis]

That's great you managed to solve it so quickly. It's a cool example I haven't seen before 🤓 in testing, I suppose you could mock something to immediately return the width you're expecting?

[gtb104]

Well, I didn't really solve it, I just figured out what was causing the "extra" donut segments to show up.

What I'm curious is, is this the best way to animate donut segments? Using the useTransition. I'm thinking not because when I hover of a segment, it's suppose to highlight that segment and dim the others. What happens though, is that the whole chart redraws.

[joshuaellis]

I think for changing the data it makes sense. But I wouldn't use it for hovering... The example is very noisy so it's hard for me to get my head round it in short time but those are my thoughts.

Hovering, i'd probably just use a regular useSpring 🤷🏼‍♀️