Animation of row show/hide

[EliteUser]

I'm wondering how to implement animation of row closing\opening inside virtual list. Need to implement animation in tree, but I am stuck.

I've created an example where I'm trying to reproduce my task https://codesandbox.io/s/react-virtual-tree-nnqp98
My data is a flat list, items have a visible flag. So when I click the parent row two child rows become visible.
Another thing to mention - I want to use react-collapse library to implement the animation, but it doesn't work.

Another problem - when I pass a whole list it renders with gaps - where children should be placed. I can filter the list to show only visible items, but then there won't be animation wrapper components.

I want to achieve this behavior - nodes are animated and tree works as expected.

I have a more complicated case - with dynamic and unknown height of the row, but I found some examples with Resize Observer, which can help me to solve it.

[piecyk]

Hi, overall with animation on rows better is to wrap items with a div and position the whole range and not individual rows. Checkout this example https://codesandbox.io/s/react-virtual-tree-forked-t8f306?file=/src/App.js it's using extracted code from this PR #405 to use Resize Observer to have correct range when item height changes.

[EliteUser]

Hello!
A huge thank you for this example, I was finally able to move forward with my problem!

I also wanted to ask: the fact that there are empty child nodes in the tree - will it affect the performance? May it lead to some bugs?
And when is it planned to add this virtualizer implementation to the main branch? For now, I will use your code from the example, but I will definitely include the library in the future.

[piecyk]

the fact that there are empty child nodes in the tree - will it affect the performance? May it lead to some bugs?

No, it's fine.

And when is it planned to add this virtualizer implementation to the main branch

I hope soonish 🤞

[EliteUser]

Hello! @piecyk
Looks like empty nodes are problem, if there are a lot of nested nodes. I made some changes in your example -https://codesandbox.io/s/react-virtual-tree-forked-kny4ow?file=/src/App.js. When childrenCount = 20, app works but animation is choppy. When childrenCount = 30 app fails to start, because of react-collapse, there are a lot of setState() calls inside and it reaches maximum callstack.
So in DOM there are just empty nodes, but as you can see in React DevTools, there are these collapse components which are still rendering. I wonder if there is some way to filter nodes, or maybe I should try to use another animation library.
P.S. The reference for me is the Antd Tree - https://ant.design/components/tree/#components-tree-demo-virtual-scroll which has virtual scroll and animated at the same time.

[piecyk]

@EliteUser on hint to fix maximum callstack, is to return 0 in estimateSize for rows that are not visible, checkout this example https://codesandbox.io/s/react-virtual-tree-forked-7fi26x

[EliteUser]

Oh, thanks a lot! It resolved my issue.
Animation is still a little bit choppy, but at least it works