Performance: Add <PrefetchableFile /> and use in file sidebar#40354
Conversation
<PrefetchableFile /><PrefetchableFile /> and use in file sidebar
limitedmage
left a comment
There was a problem hiding this comment.
Very nice! Left some small suggestions.
| * Note: This is currently experimental, and should only be enabled through | ||
| * the `enableSidebarFilePrefetch ` feature flag. | ||
| */ | ||
| export const PrefetchableFile = React.forwardRef(function PrefetchableFile( |
There was a problem hiding this comment.
Can we log some events here to see how much this is actually being used?
There was a problem hiding this comment.
Hey @limitedmage, could you share an example that you have in mind of how this data can help us later?
I'd be happy to add event logging, but I want to understand why it can be valuable here. With the current implementation, every hover/keyboard selection will trigger the file prefetch. I'm struggling to find a baseline for comparing the number of prefetch calls.
There was a problem hiding this comment.
I will merge this PR and add telemetry events in a follow-up based on the discussion outcome here.
There was a problem hiding this comment.
I think the best way to figure this out is to a/b test the performance, to see how much load time is actually being saved by users. (Compare load time for loading the blob page). This is a bit more advanced so I understand skipping it if we're confident this will be an improvement regardless.
lrhacker
left a comment
There was a problem hiding this comment.
Working as expected behind the experimental feature flag. +1 to @limitedmage's suggestion for logging an event and to discuss whether we'd want to add keyboard navigation support as well.
Context
Pre-fetch plaintext blobs from the file sidebar on hover to improve blobs loading performance.
This improvement is hidden behind a feature flag which is disabled by default.
Before
PrefetchableFileBefore.mp4
After
PrefetchableFileAfter.mp4
Test plan
Tested locally
App preview:
Check out the client app preview documentation to learn more.