Correct way to virtualize a list with nested dynamic items?

[gabrieljim]

This is my use case:

Outer list:

• Item 1
• Item 2
• Item 3

On click, these items will fetch specific information for the clicked one, and this response can contain thousands of items, so we could end up with

• Item 1
  • InnerItem 1
  • InnerItem 2
  • InnerItem 3
  • InnerItem 4
  • InnerItem 5
• Item 2
• Item 3

Only one will be open at a time
Soooo, obviously I can't really load 5k items at once since the browser will hang, and I was thinking how to correctly use virtuoso for this use case.
Also, it is crucial to avoid having a nested scroll since the outer list is already scrollable, and virtuoso should recalculate based on this scroll

From gathering info, customScrollParent and GroupedVirtuoso seem to be the two solutions for this. Which one would you recommend? Which one is most performant

Thanks a lot for any input!!!

[guimox]

I'm facing the same use case and have already tried both GroupVirtuoso and the nested Virtuoso component, but I reached a dead end in both cases.

A parent list (outer) that have over 4k of elements and any elements inside (inner) of this list can have over 5k of elements.

With GroupVirtuoso: due to the "hidden" dynamic child items in the list, the scrolling behavior is somewhat lost, and flickering tends to occur. Additionally, the error "row size 0" appears and floods the console, likely because the hidden rows are causing internal issues.

With the default Virtuoso and a nested setup: now I used a nested component with a parent Virtuoso and a child Virtuoso. Here, the problem is that the dynamic height of the collapsed rows is not being detected by Virtuoso (child), so you have to manually calculate it and pass it to the child component via style props. Since the core idea of the library is not to handle height calculations, this approach feels somewhat wrong.