Add components to support skeleton loading states
Relates to https://github.com/github/primer/issues/2682
https://github.com/primer/react/assets/2313998/854b82e1-8c52-48e1-a2ab-a95911df12cf
Changelog
New
Adds the following components:
SkeletonBone- general-use skeleton loading componentSkeletonAvatar- used to replace avatars with a skeleton loading stateSkeletonText- used to replace text with a skeleton loading state
Changed
DataTable and TreeView use the new skeleton loading components instead of their ad-hoc skeleton loaders
Removed
Rollout strategy
- [ ] Patch release
- [x] 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
Merge checklist
- [x] Added/updated tests
- [x] Added/updated documentation
- [x] Added/updated previews (Storybook)
- [x] Changes are SSR compatible
- [x] Tested in Chrome
- [x] Tested in Firefox
- [ ] Tested in Safari
- [ ] Tested in Edge
- [ ] (GitHub staff only) Integration tests pass at github/github (Learn more about how to run integration tests)
🦋 Changeset detected
Latest commit: 2f8d800b77510ae092582cd890c18c2afd9e66c4
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 | Minor |
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
size-limit report 📦
| Path | Size |
|---|---|
| packages/react/dist/browser.esm.js | 90.32 KB (+0.67% 🔺) |
| packages/react/dist/browser.umd.js | 90.6 KB (+0.76% 🔺) |
@mperrotti just a heads up, started the API PR over in: https://github.com/github/primer/pull/2958 based on our conversation before break! Let me know if I missed anything in the API block and feel free to add to it. My hope is to add some usage examples before marking it as ready for review 👍
Hi! This pull request has been marked as stale because it has been open with no activity for 60 days. You can comment on the pull request or remove the stale label to keep it open. If you do nothing, this pull request will be closed in 7 days.
@joshblack - I was able to address almost all of your feedback.
The only thing I struggled with was replacing sx with className on SkeletonBox.