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
- Enable
rapid_diffsfeature flag - Visit any merge request with many files changed
- Select 'Changes' tab
- Add
?rapid_diffs=trueto the URL, follow it - Wait for the page to load
- Resize file browser
- Observe no lag when resizing
Edited by Stanislav Lashmanov