Apply floating resize to Rapid Diffs file browser

What does this MR do and why?

This MR applies floating resize approach to file browser in Rapid Diffs.

This is done to avoid heavy layout calculations when resizing file browser with lots of files.

It works by applying position: fixed on the wrapping element and resizing file browser in a fixed position state. This skips any layout recalculations for the diff files list while file browser is resized. When resizing is done position: fixed is removed and we can finally perform a layout recalculation for the diff files list.

This improves perceived performance of the page while keeping feature virtually the same.

This feature is not enabled in existing diffs app because it doesn't have this performance problem.

Screenshots or screen recordings

Before After
Screen_Recording_2025-03-29_at_04.50.42 Screen_Recording_2025-03-31_at_09.17.49

How to set up and validate locally

  1. Enable rapid_diffs feature flag
  2. Visit any merge request with many files changed
  3. Select 'Changes' tab
  4. Add ?rapid_diffs=true to the URL, follow it
  5. Wait for the page to load
  6. Resize file browser
  7. Observe no lag when resizing
Edited by Stanislav Lashmanov

Merge request reports

Loading