Implement basic Virtual Scrolling in Merge Request Diffs
Problem to solve
When rendering very large MRs, the performance deteriorates immensely.
Theoretically, by removing the number of nodes in the page we can reduce the amount of watchers/getters/setters currently on the page and the rendering load of having so many DOM nodes.
User experience goal
Large Merge Requests perform better.
Proposal
- Use virtual scrolling to hide Diff Files distant from the viewport
- Hiding can be partial (only parts of the diff file are removed) or complete (the whole diff file is removed)
- Render diff files as user scrolls through the page, never noticing the are being rendered as they go.
Further details
Performance bottlenecks and impact to monitor:
Goals:
- TBT metric going down
- Memory usage going down
- No sluggishness while user scrolls
- No feature is broken
- (ideally) Native browser search can still find important parts, like the diff lines or notes.
Availability & Testing
-->
What does success look like, and how can we measure that?
Faster Large MRs and better performance while interacting with the page.
Is this a cross-stage feature?
No, Code Review only. However, virtual scrolling might exist elsewhere in the project or at least there might be other areas interested in using this solution.
-->