Lazy load and insert/virtualize diff files
We should lazy load diff files.
There are 3 methods here we should use.
-
Infinite scroll diff files (or paginate with any other method).
For example, request 10 diff files, scroll to bottom to load 10 more, repeat.
This helps decrease BE response time as it renders small sets of diffs at any one time and never loads more than it needs.
This obviously needs to be supported by some strong UX choices to ensure that we don't create any frustration by not having all the diffs available right from the start.
-
Lazy insert and clobber (virtualize) individual diff files
For example, insert diff files into the DOM that are visible to the user, remove diff files that aren't.
This increases the total number of reflows but decreases the time of any reflow which results in a perceived increase in performance.
-
Lazy insert and clobber (virtualize) diff lines
Same as point 2 but for individual diff lines (well, not lines because we could be displaying a single minified line, so 'chunks of diff lines' is more accurate).
This would have the same affect as point 2 also but only for the odd diff that has a lot of highlighting and text in a small amount of screen space. It's definitely over the top and points 1 and 2 should have a good enough effect on their own and are much simpler.
/cc @jschatz1