Skip to content

fix: update FilteredActionList skeleton to use deterministic widths#7929

Open
joshblack wants to merge 8 commits into
docs/add-stories-and-snapshots-for-filtered-action-listfrom
joshblack/issue-6386-ssr-safe-loaders
Open

fix: update FilteredActionList skeleton to use deterministic widths#7929
joshblack wants to merge 8 commits into
docs/add-stories-and-snapshots-for-filtered-action-listfrom
joshblack/issue-6386-ssr-safe-loaders

Conversation

@joshblack

@joshblack joshblack commented Jun 5, 2026

Copy link
Copy Markdown
Member

Changelog

New

N/A

Changed

  • FilteredActionList body skeleton rows now use deterministic CSS-module widths instead of render-time randomness, making the loading state SSR-compatible.
  • Kept VRT snapshot updates scoped to FilteredActionList loading states only.

Removed

  • Removed the redundant FilteredActionListBodyLoader test asserting that Math.random is not called.
  • Reverted unrelated VRT snapshot updates for ActionMenu and Avatar.

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 & Reviewing

  • npx vitest run packages/react/src/FilteredActionList/FilteredActionList.test.tsx
  • npm run format:diff
  • npm run lint
  • npm run lint:css
  • npm run type-check
  • npm run build
  • npm test -- --run
  • Storybook started successfully and responded for /?path=/story/components-filteredactionlist--default

Merge checklist

@changeset-bot

changeset-bot Bot commented Jun 5, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 467870c

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 github-actions Bot added staff Author is a staff member integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm labels Jun 5, 2026
@github-actions

github-actions Bot commented Jun 5, 2026

Copy link
Copy Markdown
Contributor

⚠️ Action required

👋 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. Check the integration testing docs for step-by-step instructions. Or, apply the integration-tests: skipped manually label to skip these checks.

To publish a canary release for integration testing, apply the Canary Release label to this PR.

Comment thread packages/react/src/FilteredActionList/FilteredActionList.test.tsx Outdated
@github-actions github-actions Bot temporarily deployed to storybook-preview-7929 June 5, 2026 19:11 Inactive
@github-actions github-actions Bot temporarily deployed to storybook-preview-7929 June 5, 2026 21:30 Inactive
@joshblack joshblack changed the base branch from main to docs/add-stories-and-snapshots-for-filtered-action-list June 8, 2026 20:16
@joshblack joshblack force-pushed the docs/add-stories-and-snapshots-for-filtered-action-list branch from f2a7f31 to 9c9f6fa Compare June 8, 2026 20:27
@joshblack joshblack force-pushed the joshblack/issue-6386-ssr-safe-loaders branch from 30b6ce8 to 31f823b Compare June 8, 2026 20:27
@github-actions github-actions Bot requested a deployment to storybook-preview-7929 June 8, 2026 20:31 Abandoned
@primer

primer Bot commented Jun 8, 2026

Copy link
Copy Markdown
Contributor

🤖 Lint and formatting issues have been automatically fixed and committed to this PR.

@joshblack joshblack force-pushed the joshblack/issue-6386-ssr-safe-loaders branch from 2e12404 to 23c71fb Compare June 8, 2026 20:35
@joshblack joshblack force-pushed the docs/add-stories-and-snapshots-for-filtered-action-list branch from 9c9f6fa to 240df94 Compare June 8, 2026 20:35
@joshblack joshblack added the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Jun 8, 2026
@github-actions github-actions Bot requested a deployment to storybook-preview-7929 June 8, 2026 20:39 Abandoned
@github-actions github-actions Bot removed the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Jun 8, 2026
@github-actions github-actions Bot temporarily deployed to storybook-preview-7929 June 8, 2026 20:52 Inactive
@github-actions github-actions Bot temporarily deployed to storybook-preview-7929 June 8, 2026 21:01 Inactive
@joshblack joshblack force-pushed the joshblack/issue-6386-ssr-safe-loaders branch from 9640da4 to 3425442 Compare June 9, 2026 15:27
@joshblack joshblack marked this pull request as ready for review June 9, 2026 15:27
Copilot AI review requested due to automatic review settings June 9, 2026 15:27
@joshblack joshblack requested a review from a team as a code owner June 9, 2026 15:27
@joshblack joshblack requested a review from liuliu-dev June 9, 2026 15:27
@joshblack joshblack changed the title Fix FilteredActionList skeleton SSR widths fix: update FilteredActionList skeleton to use deterministic widths Jun 9, 2026

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR makes FilteredActionList’s body-loading skeleton SSR-compatible by removing render-time randomness and replacing it with deterministic, CSS-driven widths.

Changes:

  • Replace Math.random()-based skeleton text widths with deterministic widths defined via CSS custom properties and :nth-of-type() rules.
  • Apply a row class to drive deterministic width variation across skeleton rows.
  • Re-enable VRT coverage for the “loading” Storybook stories and add a patch changeset entry.
Show a summary per file
File Description
packages/react/src/FilteredActionList/FilteredActionListLoaders.tsx Removes random width generation and applies a row class to enable deterministic skeleton styling.
packages/react/src/FilteredActionList/FilteredActionListLoaders.module.css Adds deterministic width rules for skeleton rows via a CSS variable + :nth-of-type() pattern.
e2e/components/FilteredActionList.test.ts Re-enables VRT snapshots for loading-related stories now that rendering is deterministic.
.changeset/filtered-action-list-skeleton-widths.md Adds a patch changeset describing the consumer-facing SSR stability improvement.

Copilot's findings

  • Files reviewed: 4/37 changed files
  • Comments generated: 1

Comment thread .changeset/filtered-action-list-skeleton-widths.md Outdated
@github-actions github-actions Bot requested a deployment to storybook-preview-7929 June 9, 2026 15:33 Abandoned
@github-actions github-actions Bot temporarily deployed to storybook-preview-7929 June 9, 2026 15:43 Inactive
@joshblack joshblack added the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Jun 9, 2026
@github-actions github-actions Bot removed the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Jun 9, 2026
@joshblack

Copy link
Copy Markdown
Member Author

@copilot remove the snapshot changes that are not related to FIlteredActionList (they should not change from what we already have)

Copilot AI commented Jun 9, 2026

Copy link
Copy Markdown
Contributor

@copilot remove the snapshot changes that are not related to FIlteredActionList (they should not change from what we already have)

Done in e39811e — I reverted the unrelated ActionMenu and Avatar snapshot updates so this PR only keeps FilteredActionList-related snapshot changes.

@github-actions github-actions Bot temporarily deployed to storybook-preview-7929 June 9, 2026 16:50 Inactive
joshblack and others added 8 commits June 9, 2026 11:52
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Co-authored-by: joshblack <3901764+joshblack@users.noreply.github.com>
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Co-authored-by: joshblack <3901764+joshblack@users.noreply.github.com>
@joshblack joshblack force-pushed the docs/add-stories-and-snapshots-for-filtered-action-list branch from 4a6993d to 46c8fd3 Compare June 9, 2026 16:52
@joshblack joshblack force-pushed the joshblack/issue-6386-ssr-safe-loaders branch from e39811e to 467870c Compare June 9, 2026 16:52
@github-actions github-actions Bot requested a deployment to storybook-preview-7929 June 9, 2026 16:57 Abandoned
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm staff Author is a staff member

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants