fix: update FilteredActionList skeleton to use deterministic widths#7929
Conversation
🦋 Changeset detectedLatest commit: 467870c The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
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 |
|
f2a7f31 to
9c9f6fa
Compare
30b6ce8 to
31f823b
Compare
|
🤖 Lint and formatting issues have been automatically fixed and committed to this PR. |
2e12404 to
23c71fb
Compare
9c9f6fa to
240df94
Compare
9640da4 to
3425442
Compare
There was a problem hiding this comment.
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
|
@copilot remove the snapshot changes that are not related to FIlteredActionList (they should not change from what we already have) |
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>
4a6993d to
46c8fd3
Compare
e39811e to
467870c
Compare
Changelog
New
N/A
Changed
Removed
FilteredActionListBodyLoadertest asserting thatMath.randomis not called.Rollout strategy
Testing & Reviewing
npx vitest run packages/react/src/FilteredActionList/FilteredActionList.test.tsxnpm run format:diffnpm run lintnpm run lint:cssnpm run type-checknpm run buildnpm test -- --run/?path=/story/components-filteredactionlist--defaultMerge checklist