feat: Add Skeleton to Snaps UI components

[david0xd]

Description

Add Skeleton to Snaps UI components.

Related issues

Fixes: MetaMask/snaps#2940

Related Pull Requests

Snaps PR: MetaMask/snaps#3024

Manual testing steps

1. Make and install test Snap with source code that uses Skeleton component.
2. Check if it matches expectations.

Snap UI JSX code used for testing:

            <Container>
              <Box>
                <Text>Skeleton inside text component:</Text>
                <Text>
                  <Skeleton />
                </Text>
                <Text>Classic Skeleton inside a box:</Text>
                <Skeleton />
                <Text>Top level Skeleton: </Text>
                <Skeleton height={32} width="100%" />
                <Skeleton height={16} width="50%" borderRadius="none" />
                <Skeleton height={16} width="25%" borderRadius="medium" />
                <Skeleton height={32} width={32} borderRadius="full" />
                <Text>Skeleton inside Section: </Text>
                <Section>
                  <Skeleton height={32} width="100%" />
                  <Skeleton height={16} width="50%" borderRadius="none" />
                  <Skeleton height={16} width="25%" borderRadius="medium" />
                  <Skeleton height={32} width={32} borderRadius="full" />
                </Section>
                <Text>Skeleton inside Row: </Text>
                <Row label="Row">
                  <Skeleton height={22} width="30%" />
                </Row>
                <Row label="Row">
                  <Text>
                    <Skeleton height={22} width={40} />
                  </Text>
                </Row>
              </Box>
            </Container>

Screenshots/Recordings

Before

Skeleton was not available before. Nothing to show here.

After

Pre-merge author checklist

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

[metamaskbot]

Builds ready [ac0d545]

• builds: chrome, firefox
• builds (flask): chrome, firefox
• builds (MMI): chrome
• builds (test): chrome, firefox
• builds (test-flask): chrome, firefox
• build viz: Build System
• mv3: Bundle Size Stats
• mv2: E2e Actions Stats
• storybook: Storybook
• typescript migration: Dashboard
• all artifacts
• bundle viz:

  • background: 0, 1, 2, 3, 4, 5, 6, 7
  • common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
  • ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
  • content-script: 0
  • offscreen: 0

Page Load Metrics (1661 ± 67 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	638	1974	1600	255	123
		domContentLoaded	1439	1934	1640	138	66
		load	1467	1979	1661	139	67
		domInteractive	23	73	42	14	7
		backgroundConnect	6	48	16	13	6
		firstReactRender	15	97	41	30	15
		getState	4	73	24	22	10
		initialActions	0	0	0	0	0
		loadScripts	1045	1446	1208	114	55
		setupStore	5	55	11	13	6
		uiStartup	1614	2752	1973	268	128

Bundle size diffs [🚀 Bundle size reduced!]

• background: 0 Bytes (0.00%)
• ui: 4.42 KiB (0.06%)
• common: -372 Bytes (-0.00%)

[metamaskbot]

Builds ready [05f71fb]

• builds: chrome, firefox
• builds (flask): chrome, firefox
• builds (MMI): chrome
• builds (test): chrome, firefox
• builds (test-flask): chrome, firefox
• build viz: Build System
• mv3: Bundle Size Stats
• mv2: E2e Actions Stats
• storybook: Storybook
• typescript migration: Dashboard
• all artifacts
• bundle viz:

  • background: 0, 1, 2, 3, 4, 5, 6, 7
  • common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
  • ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
  • content-script: 0
  • offscreen: 0

Page Load Metrics (1830 ± 79 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	229	2199	1226	753	362
		domContentLoaded	1542	2166	1812	165	79
		load	1557	2182	1830	165	79
		domInteractive	26	94	51	21	10
		backgroundConnect	6	66	26	20	10
		firstReactRender	16	176	65	41	19
		getState	5	54	15	13	6
		initialActions	0	1	0	0	0
		loadScripts	1131	1588	1334	130	62
		setupStore	6	85	23	25	12
		uiStartup	1801	2875	2289	323	155

Bundle size diffs [🚀 Bundle size reduced!]

• background: 239 Bytes (0.00%)
• ui: 6.42 KiB (0.08%)
• common: -277 Bytes (-0.00%)