feat: adding skeleton component

[georgewrmarshall]

Description

This PR introduces a new Skeleton component to MetaMask Mobile, mirroring the functionality of the Skeleton component in MetaMask Extension. The Skeleton component serves as a placeholder UI element displayed while content is loading.

The reason for this change is to provide a consistent loading UI experience across the application, and to support snaps and the multichain efforts by matching what's available in the extension codebase. The solution includes an animated placeholder component that can adapt to different content layouts, providing visual feedback during loading states.

Key features include:

• Animated background with pulsing effect
• Configurable dimensions (height and width)
• Support for nested children components
• Option to hide children while maintaining dimensions
• Automatic sizing to match children when no explicit dimensions are provided

Related issues

Fixes: #3324

Manual testing steps

1. Go to the Storybook view in the app
2. Navigate to "Component Library / Skeleton"
3. Test the basic Skeleton with various width/height values
4. Test the WithChildren example to see nested Skeletons
5. Test the HideChildren example by toggling the "Toggle Loading" button
6. Test the BorderRadius examples to verify different border radius values

Screenshots/Recordings

Before

N/A - This is a new component

After

• Basic Skeleton with animation and controls
• Skeleton with nested children components
• Skeleton with hidden children (loading state)
• Skeleton with various border radius styles

after720.mov

Pre-merge author checklist

• I've followed MetaMask Contributor Docs and MetaMask Mobile Coding Standards.
• 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.

[github-actions]

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
96.9% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[georgewrmarshall]

Don't have an image to put here because there is no Skeleton in Figma

[georgewrmarshall]

There are a few nuances here that I'll touch on.

We want children to be both viewable and hideable within the skeleton so we can pass in skeleton loaders to create more complex loading states. See the WithChildren story:

We also want children to be hideable so we can pass in the same content as what is being loaded, allowing the skeleton to resize to fit the children within it. Additional styles might be needed for this—see the HideChildren story: