ListView animations don't work properly with variable height rows

[bmcmahen]

Provide a general summary of the issue here

When creating a ListView with variable height rows, the animations that occur when adding a new row are pretty janky. The animation transaction occurs prior to the measurement or the row, so the animation assumes that the row is the estimated height and animates the list accordingly. Only once the animation transaction has finished does the list update with the correct height.

🤔 Expected Behavior?

I'd expect the animations to work seamlessly with variable sized rows.

😯 Current Behavior

A video demonstrating the janky animation:

CleanShot.2024-02-16.at.14.56.56.1.mp4

And the associated code: https://stackblitz.com/edit/stackblitz-starters-vanwph?file=SpectrumExample.tsx

💁 Possible Solution

The animation transaction in Virtualizer occurs when the collection updates, but before the dom measurement of the newly inserted row has occurred. We likely need a way to defer that animation transaction until measurements have occurred, which doesn't seem possible currently.

🔦 Context

We are trying to build a similar primitive to Spectrum's ListView, based upon Virtualizer from react-stately but we ran into this problem when supporting dynamic height rows. I was able to replicate the issue in Spectrum's ListView to confirm it wasn't just our implementation that was at fault.

🖥️ Steps to Reproduce

https://stackblitz.com/edit/stackblitz-starters-vanwph?file=SpectrumExample.tsx

Which is based upon an example from the docs.

Version

3.34.1

What browsers are you seeing the problem on?

Chrome, Safari

If other, please specify.

No response

What operating system are you using?

Ventura 13.3

🧢 Your Company/Team

Frame.io

🕷 Tracking Issue

No response

[LFDanLu]

Thanks, I'll link this in the other two Virtualizer tickets so we can track this when we pick that work back up