Dynamic heights not calculated correctly when initial render has placeholders

[neilkuumar]

Hi,

Firstly, great work on this library it works really well with little config.

I have a list that initially renders with placeholders whilst waiting for the data to load, then once all the placeholders have loaded, each item in the list is a different size, however, data-known-size="72" for all items (this is the height for the initial render with placeholders).

Is there any way I can recalculate the know size after the component has re-rendered/data has loaded?

Thanks!

[petyosi]

Hey,

check this comment: https://github.com/petyosi/react-virtuoso/issues/137#issuecomment-646948828

data-known-size won't refresh if the list looks ok (according to the calculations).

[neilkuumar]

Thanks for the prompt reply! What would you recommend the solution is? I see you mention accessing offsetHeight of the node directly - are you able to elaborate on this?

[petyosi]

I don't know why you need to access data-known-size. What are you trying to achieve?

[neilkuumar]

I was referring to the comment you added in #137 "Up to the problem you describe - can you access the offsetHeight of the node directly? This is the first thing that comes to mind." But I see they actually just needed the heights for use with a different library. Ignore my previous comment 😄 .

What I want to achieve are the correct heights being calculated after the component has loaded the data and re-rendered.

I am using scrollToIndex(), it isn't always scrolling to the item or the item isn't always in fully in view after scrolling - I assumed this was due to the data-known-size not being correct?

[petyosi]

scrollToIndex has some self-correcting mechanisms in place to address scrolling to items with an unexpected size. However, since you mention rendering placeholders, my guess is that your setup is somewhat more complex. Can you replicate your setup in a simplified stackblitz/code sandbox? I should be able to advise you further.

[neilkuumar]

yeah sure, will do that and get back to you later on today. Thanks for your help!

[neilkuumar]

So I think I've realised the issue whilst building the codesandbox. I think the margin-bottom on each item element is affecting the scroll position? (I've also just read the docs saying margin is the kryptonite 😅 so I guess the fix would be to remove the margin).

I've quickly put together this example here:

If you select the last element, select the last item in the list and click next list. You will see the active element isn't always fully in view. https://codesandbox.io/s/cranky-noether-pijlb?file=/src/App.js

[petyosi]

Correct. Margins are guaranteed to cause miscalculations. Removing the margin makes the example work as expected, as far as I can see.

[neilkuumar]

Yeah and it works nicely with padding as an alternative 👌 .

Thank you so much for your fast replies, this library is awesome - keep up the good work! 🎉