feat(ActionList): update loading styles for specific child elements #7468

jonrohan · 2026-01-22T22:46:33Z

Part of https://github.com/github/pull-requests/issues/22213

Summary

Optimizes CSS selector performance in ActionList by replacing expensive universal selectors (*) and broad :has() queries with targeted class selectors. :is(.ActionListItem:not(:has([aria-disabled], [disabled]), [data-has-subitem="true"]):where([data-loading="true"]), .ActionListItem:not(:has([aria-disabled], [disabled]), [data-has-subitem="true"]):has([data-loading="true"])) *

Problem

During LCP (Largest Contentful Paint) analysis, we identified a selector in ActionList that was attempting to match ~200k elements but matching none:

The issues were:

Universal selector (& *) - Forces the browser to check every descendant element
Broad :has([data-loading='true']) - Scans all descendants looking for the data-loading attribute

Solution

Replaced & * with explicit class targets:
- .ItemLabel
- .Description
- .LeadingVisual
- .TrailingVisual
- .VisualWrap
Removed :has([data-loading='true']) entirely - After investigation, data-loading is set directly on the <li> element via Item.tsx, so the :has() variant was unnecessary. The separate rule at line 369 already handles TrailingAction-specific loading states.

Related Issue(s)

Before/After

Aspect	Before	After
Loading state selector	`&:where([data-loading='true']), &:has([data-loading='true']) { & * { ... } }`	`&:where([data-loading='true']), & [data-loading='true'] { & .ItemLabel, & .Description, ... { ... } }`
Elements checked	~200k (all descendants)	Only elements with specific classes
`:has()` scope	All descendants	Direct child with `data-loading` attribute

Testing & Verification

Build passes (npm run build)
Unit tests pass (npm test - 505 tests)
CSS linting passes (npx stylelint)
Verified loading state styling in Storybook
Tested with ActionList items using loading prop
Tested with TrailingAction containing loading buttons

Merge checklist

Added/updated tests
Added/updated documentation
Tested in all supported browsers
Reviewed for accessibility impact (no changes to accessibility behavior)

Screenshots

N/A - This is a performance optimization with no visual changes.

changeset-bot · 2026-01-22T22:46:37Z

🦋 Changeset detected

Latest commit: 79b2187

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 · 2026-01-22T22:47:16Z

👋 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.

mattcosta7 · 2026-01-23T02:20:04Z

packages/react/src/ActionList/ActionList.module.css

@@ -278,7 +278,11 @@

    &:where([data-loading='true']),
    &:has([data-loading='true']) {


is the [data-loading] really at any level of depth, or is it possibly on the ListItem wrappers directly? that would probably be another nice win

Theres is a .TrailingAction data-loading that can happen, but we can make the has more specific here to avoid scanning all the descendants.

Optimizes CSS selector performance in ActionList by replacing expensive universal selectors (`*`) and broad `:has()` queries with targeted class selectors.

Copilot

Pull request overview

Improves ActionList loading-state CSS performance by replacing expensive universal/:has() selectors with more targeted class-based selectors.

Changes:

Replaced & * loading-state styling with a curated set of ActionList child classes.
Removed the broad :has([data-loading='true']) loading selector path.
Added a changeset documenting the performance optimization.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.

File	Description
packages/react/src/ActionList/ActionList.module.css	Updates loading-state selectors to reduce matching work and avoid broad descendant scans.
.changeset/orange-walls-buy.md	Publishes the change as a patch with a note about selector performance optimization.

Copilot · 2026-01-23T21:06:41Z

packages/react/src/ActionList/ActionList.module.css

    &:where([data-loading='true']),
-    &:has([data-loading='true']) {
-      & * {
+    & > [data-loading='true'] {


& > [data-loading='true'] likely never matches with the current ActionList.Item markup. data-loading is set on the <li> itself (Item.tsx:210), and when TrailingAction is loading the attribute is on the nested button inside .TrailingAction, not on a direct child of the <li>. Consider removing this selector (keeping only &:where([data-loading='true'])) to avoid dead/incorrect CSS, or update it to match an actual DOM structure that needs support.

See below for a potential fix:

&:where([data-loading='true']) {

packages/react/src/ActionList/ActionList.module.css

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

primer-integration · 2026-01-23T22:24:27Z

👋 Hi from github/github-ui! Your integration PR is ready: https://github.com/github/github-ui/pull/11637

primer-integration · 2026-01-23T22:43:13Z

Integration test results from github/github-ui:

CI Passed
VRT Passed
Projects Passed

All checks passed!

siddharthkp

Nice!

Is this something we can add to our stylelint-config or is it more nuanced?

feat(ActionList): update loading styles for specific child elements

c2daca3

github-actions bot added the staff Author is a staff member label Jan 22, 2026

github-actions bot added the integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm label Jan 22, 2026

jonrohan deployed to github-pages January 22, 2026 22:57 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-7468 January 22, 2026 22:57 Inactive

mattcosta7 reviewed Jan 23, 2026

View reviewed changes

jonrohan added 2 commits January 23, 2026 18:18

Scan only the trailingaction for data-loading

d3319db

Merge branch 'main' into remove_expensive_star_query_actionlist

e389b16

github-actions bot requested a deployment to storybook-preview-7468 January 23, 2026 18:22 Abandoned

jonrohan deployed to github-pages January 23, 2026 18:34 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-7468 January 23, 2026 18:34 Inactive

Update to direct descendent selector

0c7be88

jonrohan deployed to github-pages January 23, 2026 19:18 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-7468 January 23, 2026 19:19 Inactive

Optimize CSS selectors in ActionList

8dcc929

Optimizes CSS selector performance in ActionList by replacing expensive universal selectors (`*`) and broad `:has()` queries with targeted class selectors.

jonrohan marked this pull request as ready for review January 23, 2026 21:03

jonrohan requested a review from a team as a code owner January 23, 2026 21:03

jonrohan requested review from Copilot and siddharthkp January 23, 2026 21:03

Copilot started reviewing on behalf of jonrohan January 23, 2026 21:03 View session

Copilot AI reviewed Jan 23, 2026

View reviewed changes

jonrohan deployed to github-pages January 23, 2026 21:12 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-7468 January 23, 2026 21:12 Inactive

Update packages/react/src/ActionList/ActionList.module.css

79b2187

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

jonrohan deployed to github-pages January 23, 2026 22:29 — with GitHub Actions View deployment

github-actions bot deployed to storybook-preview-7468 January 23, 2026 22:29 View deployment

jonrohan requested a review from francinelucca January 23, 2026 22:38

francinelucca approved these changes Jan 24, 2026

View reviewed changes

siddharthkp approved these changes Jan 26, 2026

View reviewed changes

jonrohan added this pull request to the merge queue Jan 26, 2026

Merged via the queue into main with commit 731fb71 Jan 26, 2026
52 checks passed

jonrohan deleted the remove_expensive_star_query_actionlist branch January 26, 2026 17:38

primer bot mentioned this pull request Jan 26, 2026

Release tracking (38.9.0) #7479

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(ActionList): update loading styles for specific child elements #7468

feat(ActionList): update loading styles for specific child elements #7468

jonrohan commented Jan 22, 2026 •

edited

Loading

Uh oh!

changeset-bot bot commented Jan 22, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Jan 22, 2026

Uh oh!

mattcosta7 Jan 23, 2026

Uh oh!

jonrohan Jan 23, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Jan 23, 2026

Uh oh!

Uh oh!

primer-integration bot commented Jan 23, 2026

Uh oh!

primer-integration bot commented Jan 23, 2026

Uh oh!

siddharthkp left a comment •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

		@@ -278,7 +278,11 @@

		&:where([data-loading='true']),
		&:has([data-loading='true']) {

feat(ActionList): update loading styles for specific child elements #7468

feat(ActionList): update loading styles for specific child elements #7468

Conversation

jonrohan commented Jan 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Problem

Solution

Related Issue(s)

Before/After

Testing & Verification

Merge checklist

Screenshots

Uh oh!

changeset-bot bot commented Jan 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions bot commented Jan 22, 2026

Uh oh!

mattcosta7 Jan 23, 2026

Choose a reason for hiding this comment

Uh oh!

jonrohan Jan 23, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Jan 23, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

primer-integration bot commented Jan 23, 2026

Uh oh!

primer-integration bot commented Jan 23, 2026

Uh oh!

siddharthkp left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

jonrohan commented Jan 22, 2026 •

edited

Loading

changeset-bot bot commented Jan 22, 2026 •

edited

Loading

siddharthkp left a comment •

edited

Loading