Skip to content

feat: add skeleton#891

Merged
georgewrmarshall merged 5 commits into
MetaMask:mainfrom
kirillzyusko:feat/migrate-skeleton
Feb 20, 2026
Merged

feat: add skeleton#891
georgewrmarshall merged 5 commits into
MetaMask:mainfrom
kirillzyusko:feat/migrate-skeleton

Conversation

@kirillzyusko

@kirillzyusko kirillzyusko commented Feb 10, 2026

Copy link
Copy Markdown
Collaborator

Description

Added Skeleton component.

Important

I didn't use process.JEST and isE2E variables. Instead I added autoPlay prop. This prop must be pre-configured in client apps.

Related issues

Fixes: https://consensyssoftware.atlassian.net/browse/DSYS-274

Manual testing steps

  1. Open storybook app
  2. Go to skeleton example
  3. Check that it works as per spec

Screenshots/Recordings

Before

After

Simulator.Screen.Recording.-.iPhone.17.Pro.-.2026-02-10.at.15.37.12.mov

Pre-merge author checklist

  • I've followed MetaMask Contributor Docs
  • I've completed the PR template to the best of my ability
  • I’ve included tests if applicable
  • I’ve documented my code using JSDoc format if applicable
  • I’ve applied the right labels on the PR (see labeling guidelines). Not required for external contributors.

Pre-merge reviewer checklist

  • I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
  • I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.

Note

Low Risk
Adds a new UI component and related Storybook/docs/tests with minimal impact on existing behavior; primary risk is animation/timer behavior differences across client apps when autoPlay is enabled.

Overview
Adds a new Skeleton loading placeholder component to design-system-react-native, including pulsing opacity animation, optional fixed/string dimensions, Tailwind styling via twClassName, and support for rendering children either normally or invisibly via hideChildren while disabling interactions/accessibility.

Exports Skeleton/SkeletonProps from the component index, adds Storybook stories (and registers them in the Storybook app), and includes README documentation plus a comprehensive test suite covering props passthrough, styling, children behavior, and autoPlay animation control.

Written by Cursor Bugbot for commit bc1608f. This will update automatically on new commits. Configure here.

brianacnguyen
brianacnguyen previously approved these changes Feb 17, 2026
@kirillzyusko kirillzyusko marked this pull request as ready for review February 17, 2026 11:39
@kirillzyusko kirillzyusko requested a review from a team as a code owner February 17, 2026 11:39
@georgewrmarshall georgewrmarshall enabled auto-merge (squash) February 18, 2026 17:54
@brianacnguyen

Copy link
Copy Markdown
Contributor

@kirillzyusko can you help resolve the cursor comments?

brianacnguyen
brianacnguyen previously approved these changes Feb 19, 2026
@@ -0,0 +1,2 @@
export { default as Skeleton } from './Skeleton';

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should be a named export I'll update in a future PR

@georgewrmarshall georgewrmarshall merged commit 41b3bb5 into MetaMask:main Feb 20, 2026
42 checks passed

@cursor cursor Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cursor Bugbot has reviewed your changes and found 1 potential issue.

});

afterEach(() => {
jest.useFakeTimers('legacy');

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Test cleanup uses wrong timer restoration method

Low Severity

The afterEach calls jest.useFakeTimers('legacy') instead of jest.useRealTimers(). Every other animation-related test in the codebase (Checkbox, Toast) uses jest.useRealTimers() for cleanup. Calling useFakeTimers('legacy') doesn't restore real timers — it switches to a different fake timer implementation, which is not the intended cleanup behavior and is inconsistent with the established codebase pattern.

Fix in Cursor Fix in Web

georgewrmarshall added a commit that referenced this pull request Feb 20, 2026
## Summary

Reverts the failed Release 20.0.0 (#921) to redo it properly with
complete changelogs and correct yarn.lock.

## Context

Release 20.0.0 was merged to main but the publish workflow failed due to
a yarn.lock issue:
- **Failed workflow:**
https://github.com/MetaMask/metamask-design-system/actions/runs/22198282954
- **Root cause:** yarn.lock not updated when peer dependency changed

After the release was merged, 7 additional PRs were merged to main:
1. Label component (#907)
2. HeaderBase component (#902)
3. Skeleton (#891)
4. Card (#923)
5. BottomSheetFooter (#899)
6. Toast (#892)
7. Input component (#909)

## Why Revert?

To maintain clean version history and proper changelogs:
- Release 20.0.0 was never published to NPM (latest is 19.0.0)
- The 7 PRs merged after are not documented in Release 20.0.0 changelog
- Reverting allows us to create a proper Release 20.0.0 that includes
ALL changes

## Changes

This PR reverts commit `45004196` which:
- Restores package versions to pre-release state (8.1.1, 0.7.0, 0.6.0,
etc.)
- Restores root package.json version from 20.0.0 to 19.0.0
- Removes Release 20.0.0 changelog entries

## Next Steps

After this is merged:
1. Create new `release/20.0.0` branch using standard release process
2. Include all changes (original + 7 PRs) in changelogs
3. **Run `yarn install` to update yarn.lock**
4. Merge new Release 20.0.0 PR
5. Publish workflow will succeed with correct lockfile

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants