Merge request diff should be interactive while progressively loading diffs
Problem to solve
Loading a large merge request causes the web browser to become slow to respond. Progressively loading the diffs #31290 (closed) means that information becomes visible faster, but until it is finished loading the page is noticeably slow.
Intended users
Further details
Proposal
Idea
- statically render everything (code) which is fast and low overhead
- add the dynamic bits (hydration) when it comes into view so that there are fewer Vue elements being created and managed at any given time.
Concern
One big concern we have is to maintain the native search functionality intact on the "code".
Some open questions:
- can we postpone rendering the discussions until hydration as well?
- will experience suffer as user scrolls through the page and triggers the hydration of these components?
- should we destroy the Vue components and rollback to static render when out of sight? Or minimizing DOM operations is better?
Testing
Testing might need significant effort to adjust to this strategy since not everything will be possible to load at first..
What does success look like, and how can we measure that?
- Lower CPU usage (less scripting time and/or less CPU stress).
- Lower memory usage.
- Overall better interactivity on large MR pages.
Links / references
Recent deep performance analysis on an (then) ongoing MR with more data:
Edited by James Ramsay (ex-GitLab)