Improve CPU and Memory usage while rendering MR diffs

Summary

After the recent improvements on MR Performance, we were made aware there are some fundamental architectural aspects that are stopping us from improving resource usage further.

Idea

@jboyson discussed an idea that is worth pursuing and trying out to see if they're viable.

  • rendering simpler components first and "hydrate" them as users scroll through the page.

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?

justin_-12500_lines-_run_3

Improvements

By not rendering the fully reactive tree of Vue components for each Diff File, we can prevent a lot of computation from happening.

We trade that off with rendering progressively, but we need to assess the impact of such pattern

Risks

There is a chance that this approach turns out not feasible or that it doesn't equate to any significant gains.

We should make a preliminary simple validation before committing to rewriting the app.

Involved components

MR Diffs Vue app, especially the Diff File (and below).

Optional: Intended side effects

Lower CPU usage (less scripting and/or less CPU stress). Lower memory usage.

Overall better interactivity on large MR pages.