react icon indicating copy to clipboard operation
react copied to clipboard

Add components to support skeleton loading states

Open mperrotti opened this issue 2 years ago • 3 comments

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 component
  • SkeletonAvatar - used to replace avatars with a skeleton loading state
  • SkeletonText - 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)

mperrotti avatar Dec 11 '23 22:12 mperrotti

🦋 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

changeset-bot[bot] avatar Dec 11 '23 22:12 changeset-bot[bot]

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% 🔺)

github-actions[bot] avatar Dec 11 '23 22:12 github-actions[bot]

@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 👍

joshblack avatar Jan 11 '24 22:01 joshblack

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.

github-actions[bot] avatar May 05 '24 20:05 github-actions[bot]

@joshblack - I was able to address almost all of your feedback.

The only thing I struggled with was replacing sx with className on SkeletonBox.

mperrotti avatar Jun 13 '24 21:06 mperrotti