feat(SkeletonBox): add customizable delay #7448

francinelucca · 2026-01-13T05:06:53Z

Closes https://github.com/github/primer/issues/6292

Changelog

New

added delay prop in SkeletonBox, along with docs, story and tests

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

Merge checklist

Added/updated tests
Added/updated documentation
Added/updated previews (Storybook)
Changes are SSR compatible
Tested in Chrome
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-bot · 2026-01-13T05:06:56Z

🦋 Changeset detected

Latest commit: 33e64c1

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

github-actions · 2026-01-13T05:07:32Z

👋 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. Or, apply the integration-tests: skipped manually label to skip these checks.

Change version type for @primer/react from patch to feat.

Copilot

Pull request overview

This PR adds a customizable delay feature to the SkeletonBox component, allowing developers to control when skeleton loading states appear. The delay can be set to a boolean for a default 1000ms delay, or a custom number of milliseconds.

Changes:

Added delay prop to SkeletonBox with support for boolean or numeric values
Implemented delay logic using useState and useEffect with setTimeout (following the existing pattern from the Spinner component)
Added comprehensive test coverage for delay behavior with proper timer mocking
Added documentation and Storybook story for the new feature

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
packages/react/src/Skeleton/SkeletonBox.tsx	Implements delay prop with useState/useEffect pattern, supporting both boolean and numeric delay values
packages/react/src/Skeleton/tests/SkeletonBox.test.tsx	Adds test suite for delay behavior covering immediate render, delayed render, timeout cleanup, and timer advancement
packages/react/src/Skeleton/SkeletonBox.features.stories.tsx	Adds WithDelay story to demonstrate the delay feature in Storybook
packages/react/src/Skeleton/SkeletonBox.docs.json	Documents the new delay prop with type, description, and default value
.changeset/sweet-pets-breathe.md	Adds changeset entry for the feature release

Copilot · 2026-01-14T04:51:07Z

packages/react/src/Skeleton/SkeletonBox.docs.json

  "props": [
+    {
+      "name": "delay",
+      "type": "boolean | 'number'",


The type should be "boolean | number" without quotes around "number". The quotes make it a string literal type instead of the number type.

Suggested change

"type": "boolean | 'number'",

"type": "boolean | number",

Because this is a new prop, should we try 'short' | 'long' | number? instead of boolean?

Bonus points if we can align it with Spinner delay

any thoughts on what short and long would translate to? 👀

Looking at motion primitives: https://primer.style/primitives/storybook/?path=/story/motion-base--base

long is what we have now, 1000ms. I imagine short could one of 200, 300, 400 or 500ms. Not sure if @lukasoppermann already has a preference. I personally would pick 300 and run with it.

implemented!

packages/react/src/Skeleton/__tests__/SkeletonBox.test.tsx

Copilot · 2026-01-14T04:59:23Z

@francinelucca I've opened a new pull request, #7450, to work on those changes. Once the pull request is ready, I'll request review from you.

siddharthkp

Approved because it matches Spinner.

Left a comment about my ideal API, but approving in advance in case you choose not to take the suggestion

Co-authored-by: copilot-swe-agent[bot] <[email protected]> Co-authored-by: francinelucca <[email protected]>

primer-integration · 2026-01-15T05:01:46Z

👋 Hi from github/github-ui! Your integration PR is ready: https://github.com/github/github-ui/pull/10805

primer-integration · 2026-01-16T05:21:49Z

Integration test results from github/github-ui:

CI Failed
VRT Failed
Projects Passed

CI check runs linting, type checking, and unit tests. Check the workflow logs for specific failures.

VRT check ensures that when visual differences are detected, the PR cannot proceed until someone acknowledges the changes by adding the "visual difference acknowledged" label.

Need help? If you believe this failure is unrelated to your changes, please reach out to the Primer team for assistance.

feat(SkeletonBox): add customizable delay

5bb33e1

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 Jan 13, 2026

francinelucca added 2 commits January 13, 2026 00:09

Update version type for @primer/react

ec9e6db

Change version type for @primer/react from patch to feat.

Merge branch 'main' into feat/add-delay-to-skeletonbox

515f78c

github-actions bot requested a deployment to storybook-preview-7448 January 13, 2026 05:13 Abandoned

francinelucca deployed to github-pages January 13, 2026 05:23 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-7448 January 13, 2026 05:23 Inactive

Merge branch 'main' into feat/add-delay-to-skeletonbox

f10fd22

francinelucca marked this pull request as ready for review January 14, 2026 04:48

francinelucca requested a review from a team as a code owner January 14, 2026 04:48

francinelucca requested review from Copilot and siddharthkp January 14, 2026 04:48

Copilot started reviewing on behalf of francinelucca January 14, 2026 04:48 View session

Copilot AI reviewed Jan 14, 2026

View reviewed changes

Change version type for @primer/react to minor

30092f6

Copilot AI mentioned this pull request Jan 14, 2026

Add test coverage for custom numeric delay values in SkeletonBox #7450

Merged

13 tasks

github-actions bot temporarily deployed to storybook-preview-7448 January 14, 2026 05:04 Inactive

francinelucca had a problem deploying to github-pages January 14, 2026 05:15 — with GitHub Actions Failure

github-actions bot temporarily deployed to storybook-preview-7448 January 14, 2026 05:25 Inactive

siddharthkp approved these changes Jan 14, 2026

View reviewed changes

Copilot AI and others added 3 commits January 14, 2026 22:34

Add test coverage for custom numeric delay values in SkeletonBox (#7450)

9c48216

Co-authored-by: copilot-swe-agent[bot] <[email protected]> Co-authored-by: francinelucca <[email protected]>

add unmount test

5c265f6

fix docs

29ba4d7

github-actions bot requested a deployment to storybook-preview-7448 January 15, 2026 03:41 Abandoned

francinelucca deployed to github-pages January 15, 2026 03:51 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-7448 January 15, 2026 03:51 Inactive

francinelucca and others added 2 commits January 16, 2026 23:34

expand API

be6e8dc

Merge branch 'main' into feat/add-delay-to-skeletonbox

00c2f2f

github-actions bot requested a deployment to storybook-preview-7448 January 17, 2026 04:39 Abandoned

francinelucca deployed to github-pages January 17, 2026 04:49 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-7448 January 17, 2026 04:50 Inactive

fix story

33e64c1

francinelucca requested review from lukasoppermann and siddharthkp January 17, 2026 04:58

francinelucca mentioned this pull request Jan 17, 2026

feat(Spinner): make delay customizable #7438

Open

13 tasks

francinelucca deployed to github-pages January 17, 2026 05:06 — with GitHub Actions View deployment

github-actions bot deployed to storybook-preview-7448 January 17, 2026 05:07 View deployment

feat(SkeletonBox): add customizable delay #7448

Are you sure you want to change the base?

feat(SkeletonBox): add customizable delay #7448

Conversation

francinelucca commented Jan 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changelog

New

Rollout strategy

Testing & Reviewing

Merge checklist

Uh oh!

changeset-bot bot commented Jan 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions bot commented Jan 13, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Jan 14, 2026

Choose a reason for hiding this comment

Uh oh!

siddharthkp Jan 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

francinelucca Jan 15, 2026

Choose a reason for hiding this comment

Uh oh!

siddharthkp Jan 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

francinelucca Jan 17, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI commented Jan 14, 2026

Uh oh!

siddharthkp left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

primer-integration bot commented Jan 15, 2026

Uh oh!

primer-integration bot commented Jan 16, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

francinelucca commented Jan 13, 2026 •

edited

Loading

changeset-bot bot commented Jan 13, 2026 •

edited

Loading

siddharthkp Jan 14, 2026 •

edited

Loading

siddharthkp Jan 16, 2026 •

edited

Loading

siddharthkp left a comment •

edited

Loading