Pre-fetch neighboring files when single file-by-file file is displayed
What does this MR do and why?
For #391805 (closed)
When in file-by-file mode & when a diff file is displayed, prefetch the next and previous diff files as soon as the browser is able (hopefully immediately).
Deeper why
When we shipped the single-file file-by-file mode, the main drawback was that each time a user navigated to another file they would be interrupted by a short loading spinner as that one file was fetched.
This is still better than having to wait for a - potentially massive - entire merge request to load, but it's still irritating to get hit with a loading spinner over and over.
This prefetch behavior should eliminate that loading spinner for a huge amount of users who - when using file-by-file mode - navigate through each file in sequence, as the load for the neighboring file will happen immediately after the current file is displayed without having to wait for user input.
Caveats
Users who don't navigate the files in sequence (i.e., they use the file tree and are clicking "randomly" [or at least in some non-sequential order]), will get no immediate benefit.
Over time, "random" clicks through the file tree will eventually load every file (loading the next and previous diff for each one diff load), so they will eventually experience loading-spinner-free navigation, but it won't be as consistent.
Screenshots or screen recordings
The difference here is fairly subtle, but note that - on a fresh load of the 3rd file - in the after video, no navigation from that time ever introduces a loading spinner for the next or previous navigation.
| Before | After |
|---|---|
| RecApp-2023-07-13-17_47_23 | RecApp-2023-07-13-17_51_46 |
How to set up and validate locally
- Visit an MR with at least 2 (preferably >= 3) files
- Enable the "File-by-file" mode by selecting the "Show one file at a time" checkbox in the MR
⚙ popover menu - Refresh the page (if you were not in file-by-file mode before, every file will have already loaded)
- Navigate among the files in various ways
- for example, go to the second file, then hard refresh to clear the stored files
- Note how navigating to the first or 3rd files from the 2nd file is practically instant without a loading indicator
MR acceptance checklist
This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.
-
I have evaluated the MR acceptance checklist for this MR.