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: 6c39c2c

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] <198982749+Copilot@users.noreply.github.com> Co-authored-by: francinelucca <40550942+francinelucca@users.noreply.github.com>

…ct into feat/add-delay-to-skeletonbox

primer-integration · 2026-01-21T05:11:34Z

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

primer-integration · 2026-01-21T06:32:09Z

Integration test results from github/github-ui:

CI Passed
VRT Running
Projects Passed

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] <198982749+Copilot@users.noreply.github.com> Co-authored-by: francinelucca <40550942+francinelucca@users.noreply.github.com>

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

Merged

13 tasks

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

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

francinelucca and others added 3 commits January 20, 2026 23:58

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

46d7164

remove prop inference

991ea80

Merge branch 'feat/add-delay-to-skeletonbox' of github.com:primer/rea…

6c39c2c

…ct into feat/add-delay-to-skeletonbox

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

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

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

francinelucca added this pull request to the merge queue Jan 21, 2026

Merged via the queue into main with commit 838859d Jan 21, 2026
54 of 55 checks passed

francinelucca deleted the feat/add-delay-to-skeletonbox branch January 21, 2026 08:10

primer bot mentioned this pull request Jan 21, 2026

Release tracking #7457

Open

feat(SkeletonBox): add customizable delay #7448

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 21, 2026

Uh oh!

primer-integration bot commented Jan 21, 2026

Uh oh!

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