Optimize FTB with lazy rendering + computed props
What does this MR do?
Optimizes the File Tree Browser (FTB) rendering performance for repositories with large directory structures by implementing lazy rendering and computed property optimizations.
Key improvements:
- Lazy rendering with IntersectionObserver: File row components are now rendered only when they appear in the viewport, reducing render cost
-
Computed property optimization: Converted
flatFilesListfrom data prop to a computed property for better caching and fewer recalculations -
Simplified watchers: Replaced two deep watchers (
directoriesCacheandexpandedPathsMap) with a single watcher onfilteredFlatFilesList
Follow-up work
A similar optimization will be applied to the main tree content area in a follow-up MR. Currently, when viewing a large directory in the main content area, all file rows are rendered immediately, blocking the main thread and degrading the performance of the entire page. Applying lazy rendering to the main tree ensures both the tree browser and the main content remain responsive even when displaying many files simultaneously.
References
Related to #577630 (closed)
Screenshots or screen recordings
| Before | After |
|---|---|
|
|
With scrollMargin added (pre-render while scrolling to prevent white flashing)
How to set up and validate locally
- Navigate to a test repository with many files (example (1500 files))
- In the example project, expand the
mock_filesdirectory - Click "Show more" until all 1500 files are visible
- Observe:
- Faster initial render compared to master
- File rows appear smoothly as you scroll (only visible items are rendered)
- Improved responsiveness when expanding/collapsing directories
Performance profiling:
- Open DevTools → Performance tab and observe the INP metric while interacting with the FTB, it should ideally stay under 200ms
- Compare this against the
masterbranch
MR acceptance checklist
Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.


