fix: update FilteredActionList skeleton to use deterministic widths

.changeset/filtered-action-list-skeleton-widths.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+FilteredActionList: Make body skeleton widths stable for server rendering

e2e/components/FilteredActionList.test.ts

@@ -47,18 +47,18 @@ const stories = [
     title: 'Custom Item Rendering',
     id: 'components-filteredactionlist-features--custom-item-rendering',
   },
-  // {
-  //   title: 'Loading In Input',
-  //   id: 'components-filteredactionlist-features--loading-in-input',
-  // },
-  // {
-  //   title: 'Loading With Body Spinner',
-  //   id: 'components-filteredactionlist-features--loading-with-body-spinner',
-  // },
-  // {
-  //   title: 'Loading With Body Skeleton',
-  //   id: 'components-filteredactionlist-features--loading-with-body-skeleton',
-  // },
+  {
+    title: 'Loading In Input',
+    id: 'components-filteredactionlist-features--loading-in-input',
+  },
+  {
+    title: 'Loading With Body Spinner',
+    id: 'components-filteredactionlist-features--loading-with-body-spinner',
+  },
+  {
+    title: 'Loading With Body Skeleton',
+    id: 'components-filteredactionlist-features--loading-with-body-skeleton',
+  },
   {
     title: 'Virtualized List',
     id: 'components-filteredactionlist-features--virtualized-list',

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

@@ -1,8 +1,29 @@
 .LoadingSkeleton {
+  width: var(--loading-skeleton-width);
   /* stylelint-disable-next-line primer/borders */
   border-radius: 4px;
 }
 
+.LoadingSkeletonRow {
+  --loading-skeleton-width: 80%;
+
+  &:nth-of-type(5n + 2) {
+    --loading-skeleton-width: 52.5%;
+  }
+
+  &:nth-of-type(5n + 3) {
+    --loading-skeleton-width: 67.5%;
+  }
+
+  &:nth-of-type(5n + 4) {
+    --loading-skeleton-width: 40%;
+  }
+
+  &:nth-of-type(5n + 5) {
+    --loading-skeleton-width: 72.5%;
+  }
+}
+
 .LoadingSpinner {
   padding: var(--base-size-16);
   flex-grow: 1;

packages/react/src/FilteredActionList/FilteredActionListLoaders.tsx

@@ -43,10 +43,9 @@ function LoadingSkeleton({rows = 10, ...props}: {rows: number}): JSX.Element {
     <div className={classes.LoadingSkeletonContainer} data-component="FilteredActionList.Skeleton">
       <Stack direction="vertical" justify="center" gap="condensed" {...props}>
         {Array.from({length: rows}, (_, i) => (
-          <Stack key={i} direction="horizontal" gap="condensed" align="center">
+          <Stack key={i} direction="horizontal" gap="condensed" align="center" className={classes.LoadingSkeletonRow}>
             <SkeletonBox width="16px" height="16px" />
-            {/* eslint-disable-next-line react-hooks/purity */}
-            <SkeletonBox height="10px" width={`${Math.random() * 60 + 20}%`} className={classes.LoadingSkeleton} />
+            <SkeletonBox height="10px" className={classes.LoadingSkeleton} />
           </Stack>
         ))}
       </Stack>