[go: up one dir, main page]

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 flatFilesList from data prop to a computed property for better caching and fewer recalculations
  • Simplified watchers: Replaced two deep watchers (directoriesCache and expandedPathsMap) with a single watcher on filteredFlatFilesList

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
2025-11-10_15.49.07_1 2025-11-10_15.49.07_2

With scrollMargin added (pre-render while scrolling to prevent white flashing)

2025-11-12_14.14.34_2

How to set up and validate locally

  1. Navigate to a test repository with many files (example (1500 files))
  2. In the example project, expand the mock_files directory
  3. Click "Show more" until all 1500 files are visible
  4. 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 master branch

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.

Edited by Jacques Erasmus

Merge request reports

Loading