Virtual scroll does the exact opposite. Makes everything lag
The issue
We have a large tree with a couple of thousand nodes total. Some are nested like crazy (like my example), but some also have a root node with 1000+ child nodes (with no children). However, for some reason, it seems like virtual scroll is making everything lag like crazy. Try opening this and scroll up/down in the box:
https://angular-9v2d7m.stackblitz.io/ (source code can be found here)
In the example, I have 10 root nodes, where each has 30 child nodes total (child -> child -> child -> child, and so on).
Temporary fix
Setting useVirtualScroll: false makes it work "great" again. It's still a bit laggy, but it's definitely better than with virtual scroll
My stuff
- Latest version of Chrome
- Angular 6.0.0
- angular-tree-component 8.0.0
Other notes
Edge and Firefox works kind of. The scrolling appears to be very good, compared to Chrome, but not all elements are rendered. Sometimes I can barely see more than 1 or 2 root jobs (and sometimes they're number 6 and number 7 for example). Chrome seems to work perfectly compared to that.
I never tested the tree with 30 node levels. It might be an edge case where it makes sense not to use virtualScroll, but I didn't investigate it thoroughly
The problem occurs when setting the fixed height to a tree wrapper div. Even in your demo if I set the height from current '800px' to 'auto', it works smooth without any lag at all. This should be taken a look at.