perf(ActionList): add content-visibility: auto to reduce style recalc and layout costs

[hectahertz]

Closes https://github.com/github/primer/issues/5788

Overview

This PR adds content-visibility: auto and contain-intrinsic-size: auto 32px to .ActionListItem in ActionList.module.css. This is a pure CSS change (2 lines) that tells the browser to skip detailed rendering, style calculation, and layout for off-screen list items — essentially CSS-level virtualization without any React code changes.

How it works

content-visibility: auto enables the browser to skip layout and paint work for elements that are not currently visible in the viewport. When an ActionList contains many items (e.g., a SelectPanel with hundreds of labels), only the ~15-20 visible items need full style recalculation and layout. Off-screen items use the intrinsic size hint (contain-intrinsic-size: auto 32px) for sizing, avoiding expensive per-element computation.

This is particularly impactful for forced reflows triggered by useScrollFlash, which reads scrollHeight after DOM mutation — with content-visibility: auto, the browser no longer needs to fully lay out all the items to answer that query.

Browser support

content-visibility is supported in all modern browsers: Chrome 85+, Edge 85+, Firefox 125+, Safari 18+. See caniuse.

Performance measurements

All measurements taken with 500 ActionList items inside a SelectPanel, using Chrome DevTools performance traces with 4x CPU throttling to simulate lower-end devices.

INP (Interaction to Next Paint) — click to open SelectPanel

Run	Baseline (original)	With content-visibility: auto
1	3,072 ms	2,087 ms
2	3,254 ms	1,987 ms
Avg	~3,163 ms	~2,037 ms
Change		-35.6%

Forced reflow breakdown (useScrollFlash)

Metric	Baseline	With content-visibility	Change
useScrollFlash reflow	1,353 ms	143 ms	-89.4%
Total forced reflow	1,592 ms	1,170 ms*	-26.5%

* Remaining reflow is from Storybook's performance addon (updateCompositorLayers), not from component code. In production, the improvement would be even more pronounced.

INP phase breakdown (best run comparison)

Phase	Baseline	With change
Input delay	2 ms	2 ms
Processing duration	2,786 ms	1,879 ms
Presentation delay	115 ms	106 ms

What was tested but showed no impact

During investigation, I also tried replacing all 5 :has() CSS selectors with data-attribute equivalents (e.g., &:has([aria-disabled]) to &[data-disabled]). While theoretically reducing selector evaluation cost, this showed zero measurable INP improvement because the style recalc cost is completely overshadowed by the forced reflow from useScrollFlash and React rendering time at this scale. The content-visibility approach was far more effective.

Changelog

New

Changed

• Added content-visibility: auto and contain-intrinsic-size: auto 32px to .ActionListItem for improved rendering performance with large lists

Removed

Rollout strategy

• Patch release
• Minor release
• Major release; if selected, include a written rollout or migration plan
• None; if selected, include a brief description as to why

Testing and Reviewing

How to test:

1. Start Storybook: npm start
2. Open the SelectPanel Default story
3. Modify the story to add more items (e.g., 500) to stress test
4. Open Chrome DevTools Performance panel
5. Enable 4x CPU throttling
6. Record a trace while clicking the SelectPanel button to open
7. Compare INP and forced reflow times with and without this change

What to verify:

• ActionList items render correctly in all variants (inset, full, with dividers)
• Scrolling behavior is smooth and items appear correctly when scrolled into view
• useScrollFlash still functions (scrollbar flash on open)
• No visual regressions in SelectPanel, ActionMenu, or standalone ActionList usage
• Keyboard navigation (arrow keys, Home/End, Page Up/Down) works correctly
• Items with descriptions, leading visuals, trailing actions all render properly

Merge checklist

• Added/updated tests
• Added/updated documentation
• Added/updated previews (Storybook)
• Changes are SSR compatible
• Tested in Chrome
• Tested in Firefox
• Tested in Safari
• Tested in Edge
• (GitHub staff only) Integration tests pass at github/github (Learn more about how to run integration tests)

[changeset-bot]

🦋 Changeset detected

Latest commit: aff0c6a

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/react	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

👋 Hi, this pull request contains changes to the source code that github/github-ui depends on. If you are GitHub staff, test these changes with github/github-ui using the integration workflow. Or, apply the integration-tests: skipped manually label to skip these checks.

[Copilot]

Pull request overview

This PR improves rendering performance for large ActionList instances in @primer/react by enabling browser-driven skipping of off-screen list item rendering via CSS containment.

Changes:

• Added content-visibility: auto to .ActionListItem to skip rendering/layout/paint for off-screen items.
• Added contain-intrinsic-size: auto 32px to provide a fallback intrinsic size for skipped items.