Improve performance of rendering large reports
What does this MR do?
Instead of rendering all report items in 4 big lists, we make use of vue-virtual-scroll-list and render only few dozens at once. This improves the performance in several metrics:
- Initial load time
- Memory Pressure
- CPU Load
- DOM node count
In an example with around 11k reported security vulnerabilities:
- Initial load time: 27s -> 4.1s
- Memory Pressure: ~750 MB -> ~270 MB
- CPU Load: 22s -> 2.5s
- DOM node count: 430k -> 7k up to 30k while scrolling
What are the relevant issue numbers?
- Closes #7737 (closed)
Does this MR meet the acceptance criteria?
- Changelog entry added, if necessary
- Documentation created/updated
- Tests added for this feature/bug
- Conforms to the code review guidelines
- Conforms to the merge request performance guidelines
- Conforms to the style guides
- Conforms to the database guides
EE specific content should be in the top level
- For a paid feature, have we considered GitLab.com plans, how it works for groups, and is there a design for promoting it to users who aren't on the correct plan?