angular-tree-component icon indicating copy to clipboard operation
angular-tree-component copied to clipboard

Virtual scroll does the exact opposite. Makes everything lag

Open mortenmoulder opened this issue 7 years ago • 2 comments

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.

mortenmoulder avatar Sep 13 '18 08:09 mortenmoulder

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

adamkleingit avatar Oct 24 '18 21:10 adamkleingit

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.

dinohorvat avatar Aug 20 '19 10:08 dinohorvat