Improve Rapid Diffs performance on view settings change

Stanislav Lashmanovrequested to merge
slashmanov/rapid-diffs-reload-performance into master

What does this MR do and why?

This MR improves client-side Rapid Diffs performance when changing view settings.

Previously we changed the opacity on the diffs list root element. This caused a very expensive style recalculation due to attribute mutation when lots of diffs were rendered on the page.

To solve that we create an overlay element alongside the diffs list, which will dim the diffs list when we change view settings and reload diffs. Changing attributes on this element will not cause style recalculation on the diffs list.

Screenshots or screen recordings

Before After
image image

How to set up and validate locally

  1. Enable rapid_diffs and rapid_diffs_on_mr_show feature flags
  2. Go to any large merge request (more than 100 files/1000 lines changed)
  3. Select 'Changes' tab
  4. Add ?rapid_diffs=true to the URL, follow it
  5. Open view preferences
  6. Select 'Show whitespace changes'
  7. Observe no lag (alternatively: profile this using DevTools performance tab)

Merge request reports