I have implemented a nested expand/collapse feature using dynamic components in Angular 5.
Although the functionality works well, the browser crashes or the scroll stops working when loading multiple DOM elements (resulting in jerky scroll).
This feature is an advanced reporting tool that allows users to select filters and group data by dimensions.
Here is a brief overview of how the feature works:
1) User navigates to the report page on the web app. 2) User selects filters and group-by parameters, based on which a div-based table with multiple rows is generated.
I have included a condition that allows users to expand or collapse rows based on the grouping. Each level of grouping can be expanded or collapsed as needed.
For example, if the group-by parameters are Country, OS, Appname, and Campaign, the first-level table will display data for all countries with an expand button. Clicking on the expand button will render another table with OS data for the specific country, and so on.
Upon investigation, I believe the performance issue is due to multiple condition checks for each expand/collapse button, leading to slow performance or scroll issues.
Watch this video for a demonstration of how the feature works and to see the scroll performance:
https://youtu.be/m1a2uxhoNqc
I cannot upload the code to Plunker or any online tool as it is integrated into a specific platform with real data.
If you wish to view the code, you can access it here:
https://drive.google.com/drive/folders/1ZxAS8yHd8iHJ6ds3mZhLR0bw6o0cnRL6?usp=sharing
Once I resolve the performance issue, I plan to make the code more reusable.
Please review and provide feedback on improving the code quality and addressing performance issues.
Thank you!