Access to measured item heights for stable placeholder rendering

[itayganor]

I’m trying to improve the UX around placeholder rendering while items are loading. All item heights are dynamic, and their loading only begins once they're visible.

In discussion #1083, the topic came up around scroll up jumps when loading content with an unknown height. What I’m trying to do is at least make it so that if an item jumps once (when loading finishes), it doesn’t jump again the next time it’s shown as a placeholder.

To do that, I’d need a way to access the measured height that Virtuoso already knows about after it renders the full item, so I can reuse that same height next time I render a placeholder for that index. Right now, I’d have to measure it myself via getBoundingClientRect, but it feels wasteful since Virtuoso already has this data internally.

Would it be possible to expose something like getItemHeight(index) or an onItemMeasured(index, height) callback?

I understand the internal measurement logic is meant to be abstracted away, but this would go a long way toward avoiding layout shifts and improving the overall UX using Virtuoso. I saw that Tanstack Virtual for example exposes an array of measurementsCache (which isn't perfect because it also takes the estimated size into account), but I'd really prefer to stick with Virtuoso.

Happy to provide more details or pitch in with a PR if needed.

Thanks!

[petyosi]

If I understand your case correctly, you can do something like what this example was doing. Notice how I capture the known size in the HeightPreservingItem, then pass it as a css variable for consumption in the content.

You need to pay some attention on what's going on in the initial render (since you will receive 0 the first time), and also avoid the chicken-and-egg problem.

Let me know if this is what you have in mind. It can be made more accessible (or, at least, documented, happy to accept a PR).

P.S. the example was removed because beautiful dnd is in maintenance mode, but the idea for the height preserving itself is still valid.

[itayganor]

This looks like it could indeed solve my case.

The only thing that bothers me is that I need to manage my own size cache, either by maintaining a const sizesByKey = useRef({}) or by directly accessing data-known-size that might feel like a bit of a mix of concerns?

I guess Virtuoso has that exact size cache object already for its calculation? If you have a simple solution in mind, I'd love to hear it, since I'm not very familiar with Virtuoso's state system yet

[petyosi]

I guess Virtuoso has that exact size cache object already for its calculation?

No. This is stored in a binary tree data structure.

Why do you need the entire size set?