I have created n-level nested expand/collapse functionality using dynamic components of angular 5.
Functionally everything is working fine but when I load multiple dom elements browser either crashes or scroll stops working (Jerky Scroll)
Basically its advanced reporting feature with user selected filters and group by dimensions that we are offering.
Here is how my developed feature works
1) User visits report page on the web app. 2) The user selects filters and groupby params according to which I generate div based table having multiple row.
Now I have kept condition checking that user can further expand/collapse row, based on the object which I am maintaining using group by. Here group by indicates the number of levels which user can utilize
For example, Group by parameters are Country, OS, Appname and Campaign, I will render first level table displaying data for all countries available with expand button for every row, on click of expanding button I render another table having Operating System (OS) data for that specific country and so on...
I have actually identified why performance issue occurs, it might be because I am checking for that specific expand/collapsed button identified by next groupby object and isCollapsed parameter. Because of that specific condition is checking multiple time periodically scroll either stops working or browser start performing slow
Here is video illustrating how it works and scrollbar performance
https://youtu.be/m1a2uxhoNqc
I can not upload code on plunker or any other online tool because it's already integrated into a platform that I am developing having actual data.
I am not able to add code here due to stackoverflow character limit but have created gist.
Here is url to access code:
https://drive.google.com/drive/folders/1ZxAS8yHd8iHJ6ds3mZhLR0bw6o0cnRL6?usp=sharing
I would like to make code more reusable will do it once performance issue is resolved.
Have a look into this and let me know my mistakes to improve code quality and performance issues.
Thanks.