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

.changeset/content-visibility-perf.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Add `content-visibility: auto` to ActionList items to improve rendering performance for large lists by allowing the browser to skip layout and paint for off-screen items.

packages/react/src/FilteredActionList/FilteredActionList.module.css

@@ -15,6 +15,14 @@
   height: 100%;
   overflow: auto;
   flex-grow: 1;
+
+  /* Allow the browser to skip rendering for off-screen items, reducing style recalc and layout costs in long lists.
+     Exclude items that show the active indicator line, as content-visibility: auto applies paint containment
+     which clips the absolutely-positioned ::after pseudo-element that renders outside the item bounds. */
+  & .ActionListItem:not(:focus, [data-is-active-descendant], [data-active], [data-input-focused]) {
+    content-visibility: auto;
+    contain-intrinsic-size: auto 32px;
+  }
 }
 
 .ActionList {

packages/react/src/experimental/SelectPanel2/SelectPanel.module.css

@@ -78,6 +78,14 @@
     overflow-y: auto;
     flex-grow: 1;
   }
+
+  /* Allow the browser to skip rendering for off-screen items, reducing style recalc and layout costs in long lists.
+     Exclude items that show the active indicator line, as content-visibility: auto applies paint containment
+     which clips the absolutely-positioned ::after pseudo-element that renders outside the item bounds. */
+  li:not(:focus, [data-is-active-descendant], [data-active]) {
+    content-visibility: auto;
+    contain-intrinsic-size: auto 32px;
+  }
 }
 
 .HeaderContent {