diff --git a/.changeset/filtered-action-list-skeleton-widths.md b/.changeset/filtered-action-list-skeleton-widths.md new file mode 100644 index 00000000000..5a49b089568 --- /dev/null +++ b/.changeset/filtered-action-list-skeleton-widths.md @@ -0,0 +1,5 @@ +--- +'@primer/react': patch +--- + +FilteredActionList: Make body skeleton widths stable for server rendering diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Loading-In-Input-dark-colorblind-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Loading-In-Input-dark-colorblind-linux.png new file mode 100644 index 00000000000..3dd515d1734 Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Loading-In-Input-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Loading-In-Input-dark-dimmed-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Loading-In-Input-dark-dimmed-linux.png new file mode 100644 index 00000000000..922feb00180 Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Loading-In-Input-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Loading-In-Input-dark-high-contrast-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Loading-In-Input-dark-high-contrast-linux.png new file mode 100644 index 00000000000..f7db99c71fb Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Loading-In-Input-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Loading-In-Input-dark-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Loading-In-Input-dark-linux.png new file mode 100644 index 00000000000..3dd515d1734 Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Loading-In-Input-dark-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Loading-In-Input-dark-tritanopia-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Loading-In-Input-dark-tritanopia-linux.png new file mode 100644 index 00000000000..3dd515d1734 Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Loading-In-Input-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Loading-In-Input-light-colorblind-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Loading-In-Input-light-colorblind-linux.png new file mode 100644 index 00000000000..a4ae3092ebb Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Loading-In-Input-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Loading-In-Input-light-high-contrast-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Loading-In-Input-light-high-contrast-linux.png new file mode 100644 index 00000000000..b138a46fa19 Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Loading-In-Input-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Loading-In-Input-light-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Loading-In-Input-light-linux.png new file mode 100644 index 00000000000..a4ae3092ebb Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Loading-In-Input-light-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Loading-In-Input-light-tritanopia-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Loading-In-Input-light-tritanopia-linux.png new file mode 100644 index 00000000000..a4ae3092ebb Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Loading-In-Input-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Loading-With-Body-Skeleton-dark-colorblind-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Loading-With-Body-Skeleton-dark-colorblind-linux.png new file mode 100644 index 00000000000..20d8bea82b2 Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Loading-With-Body-Skeleton-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Loading-With-Body-Skeleton-dark-dimmed-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Loading-With-Body-Skeleton-dark-dimmed-linux.png new file mode 100644 index 00000000000..102cbc6c916 Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Loading-With-Body-Skeleton-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Loading-With-Body-Skeleton-dark-high-contrast-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Loading-With-Body-Skeleton-dark-high-contrast-linux.png new file mode 100644 index 00000000000..6080a97f407 Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Loading-With-Body-Skeleton-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Loading-With-Body-Skeleton-dark-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Loading-With-Body-Skeleton-dark-linux.png new file mode 100644 index 00000000000..20d8bea82b2 Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Loading-With-Body-Skeleton-dark-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Loading-With-Body-Skeleton-dark-tritanopia-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Loading-With-Body-Skeleton-dark-tritanopia-linux.png new file mode 100644 index 00000000000..20d8bea82b2 Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Loading-With-Body-Skeleton-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Loading-With-Body-Skeleton-light-colorblind-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Loading-With-Body-Skeleton-light-colorblind-linux.png new file mode 100644 index 00000000000..3db445578aa Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Loading-With-Body-Skeleton-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Loading-With-Body-Skeleton-light-high-contrast-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Loading-With-Body-Skeleton-light-high-contrast-linux.png new file mode 100644 index 00000000000..1f797d73727 Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Loading-With-Body-Skeleton-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Loading-With-Body-Skeleton-light-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Loading-With-Body-Skeleton-light-linux.png new file mode 100644 index 00000000000..0daf7e50e9f Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Loading-With-Body-Skeleton-light-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Loading-With-Body-Skeleton-light-tritanopia-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Loading-With-Body-Skeleton-light-tritanopia-linux.png new file mode 100644 index 00000000000..3db445578aa Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Loading-With-Body-Skeleton-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Loading-With-Body-Spinner-dark-colorblind-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Loading-With-Body-Spinner-dark-colorblind-linux.png new file mode 100644 index 00000000000..344af2aa33f Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Loading-With-Body-Spinner-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Loading-With-Body-Spinner-dark-dimmed-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Loading-With-Body-Spinner-dark-dimmed-linux.png new file mode 100644 index 00000000000..62a2efb4836 Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Loading-With-Body-Spinner-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Loading-With-Body-Spinner-dark-high-contrast-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Loading-With-Body-Spinner-dark-high-contrast-linux.png new file mode 100644 index 00000000000..0515432bbdb Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Loading-With-Body-Spinner-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Loading-With-Body-Spinner-dark-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Loading-With-Body-Spinner-dark-linux.png new file mode 100644 index 00000000000..344af2aa33f Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Loading-With-Body-Spinner-dark-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Loading-With-Body-Spinner-dark-tritanopia-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Loading-With-Body-Spinner-dark-tritanopia-linux.png new file mode 100644 index 00000000000..344af2aa33f Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Loading-With-Body-Spinner-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Loading-With-Body-Spinner-light-colorblind-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Loading-With-Body-Spinner-light-colorblind-linux.png new file mode 100644 index 00000000000..ab1b70d3fac Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Loading-With-Body-Spinner-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Loading-With-Body-Spinner-light-high-contrast-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Loading-With-Body-Spinner-light-high-contrast-linux.png new file mode 100644 index 00000000000..0f2ae7fb46b Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Loading-With-Body-Spinner-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Loading-With-Body-Spinner-light-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Loading-With-Body-Spinner-light-linux.png new file mode 100644 index 00000000000..ab1b70d3fac Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Loading-With-Body-Spinner-light-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Loading-With-Body-Spinner-light-tritanopia-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Loading-With-Body-Spinner-light-tritanopia-linux.png new file mode 100644 index 00000000000..ab1b70d3fac Binary files /dev/null and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Loading-With-Body-Spinner-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Multi-Select-With-Select-All-dark-colorblind-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Multi-Select-With-Select-All-dark-colorblind-linux.png index cdd313a56d0..d3446d125f2 100644 Binary files a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Multi-Select-With-Select-All-dark-colorblind-linux.png and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Multi-Select-With-Select-All-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Multi-Select-With-Select-All-dark-tritanopia-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Multi-Select-With-Select-All-dark-tritanopia-linux.png index d3446d125f2..cdd313a56d0 100644 Binary files a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Multi-Select-With-Select-All-dark-tritanopia-linux.png and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Multi-Select-With-Select-All-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Select-All-Selected-dark-high-contrast-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Select-All-Selected-dark-high-contrast-linux.png index e3b5f3d5324..a54ec6c2e3d 100644 Binary files a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Select-All-Selected-dark-high-contrast-linux.png and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Select-All-Selected-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Select-All-Selected-dark-linux.png b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Select-All-Selected-dark-linux.png index 13947bf497e..0d14d306522 100644 Binary files a/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Select-All-Selected-dark-linux.png and b/.playwright/snapshots/components/FilteredActionList.test.ts-snapshots/FilteredActionList-Select-All-Selected-dark-linux.png differ diff --git a/e2e/components/FilteredActionList.test.ts b/e2e/components/FilteredActionList.test.ts index f954e68bfc2..1db5da55eca 100644 --- a/e2e/components/FilteredActionList.test.ts +++ b/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', diff --git a/packages/react/src/FilteredActionList/FilteredActionListLoaders.module.css b/packages/react/src/FilteredActionList/FilteredActionListLoaders.module.css index 603d07a0c66..002366ea42d 100644 --- a/packages/react/src/FilteredActionList/FilteredActionListLoaders.module.css +++ b/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; diff --git a/packages/react/src/FilteredActionList/FilteredActionListLoaders.tsx b/packages/react/src/FilteredActionList/FilteredActionListLoaders.tsx index 02451d7243d..87d0ccbfc3f 100644 --- a/packages/react/src/FilteredActionList/FilteredActionListLoaders.tsx +++ b/packages/react/src/FilteredActionList/FilteredActionListLoaders.tsx @@ -43,10 +43,9 @@ function LoadingSkeleton({rows = 10, ...props}: {rows: number}): JSX.Element {
{Array.from({length: rows}, (_, i) => ( - + - {/* eslint-disable-next-line react-hooks/purity */} - + ))}