Add frontend performance monitoring for commit list refactor

What does this MR do and why?

Adds frontend performance monitoring (User Timing API marks and measures) to the Vue CommitListApp component to instrument the full page lifecycle — from app mount through data fetch to final render.

Four performance marks are added:

  1. commit-app-mounted — Vue component mounted to DOM
  2. fetching-commit-data — Apollo query starts fetching
  3. rendering-commit-data — Apollo result received, Vue re-render begins
  4. commit-data-rendered — DOM updated and painted ($nextTick + rAF)

Three derived measures:

  • Commit List: Time to mount — navigation start → app mounted
  • Commit List: Data fetch — fetch start → data received
  • Commit List: Render — data received → DOM painted

References

https://docs.gitlab.com/development/fe_guide/performance/#user-timing-api

Screenshots or screen recordings

CleanShot_2026-02-25_at_22.46.19

How to set up and validate locally

  1. Enable project_commits_refactor feature flag in rails console:
  2. Navigate to any project's commit list page, e.g. gitlab-org/gitlab-test/-/commits/master?ref_type=head
  3. Open DevTools → Performance tab → record a page load. The measures appear as named ranges in the "Timings" row of the waterfall.

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.

Resolves #547689 (closed)

Edited by Chaoyue Zhao

Merge request reports

Loading
Loading