feat: Add Skeleton to Snaps UI components (#29764)

## **Description**
Add Skeleton to Snaps UI components.

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/29764?quickstart=1)

## **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:
```typescript
            <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**
![Screenshot 2025-01-17 at 13 09
22](https://github.com/user-attachments/assets/fb1be740-f06d-4da0-80ec-7fb3c5cbf1d3)

## **Pre-merge author checklist**
- [ ] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [ ] 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](https://jsdoc.app/) format
if applicable
- [ ] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
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.

ui/components/app/metamask-template-renderer/safe-component-list.js

@@ -60,6 +60,7 @@ import {
 import { SnapAccountRedirect } from '../../../pages/snap-account-redirect';
 import { CreateNamedSnapAccount } from '../../multichain/create-named-snap-account';
 import SnapAuthorshipHeader from '../snaps/snap-authorship-header';
+import { Skeleton } from '../../component-library/skeleton';
 ///: END:ONLY_INCLUDE_IF
 
 export const safeComponentList = {
@@ -108,6 +109,7 @@ export const safeComponentList = {
   SnapUITooltip,
   span: 'span',
   Spinner,
+  Skeleton,
   Text,
   TextArea,
   TextField,

ui/components/app/snaps/snap-ui-renderer/components/index.ts

@@ -28,6 +28,7 @@ import { icon } from './icon';
 import { section } from './section';
 import { avatar } from './avatar';
 import { banner } from './banner';
+import { skeleton } from './skeleton';
 
 export const COMPONENT_MAPPING = {
   Box: box,
@@ -60,4 +61,5 @@ export const COMPONENT_MAPPING = {
   Selector: selector,
   Section: section,
   Banner: banner,
+  Skeleton: skeleton,
 };

ui/components/app/snaps/snap-ui-renderer/components/skeleton.ts

@@ -0,0 +1,21 @@
+import { SkeletonElement } from '@metamask/snaps-sdk/jsx';
+import { BorderRadius } from '../../../../../helpers/constants/design-system';
+import { mapSnapBorderRadiusToExtensionBorderRadius } from '../utils';
+import { UIComponentFactory } from './types';
+
+const DEFAULT_SKELETON_WIDTH = '100%';
+const DEFAULT_SKELETON_HEIGHT = 22;
+const DEFAULT_SKELETON_BORDER_RADIUS = BorderRadius.MD;
+
+export const skeleton: UIComponentFactory<SkeletonElement> = ({ element }) => {
+  return {
+    element: 'Skeleton',
+    props: {
+      width: element.props.width ?? DEFAULT_SKELETON_WIDTH,
+      height: element.props.height ?? DEFAULT_SKELETON_HEIGHT,
+      borderRadius: element.props.borderRadius
+        ? mapSnapBorderRadiusToExtensionBorderRadius(element.props.borderRadius)
+        : DEFAULT_SKELETON_BORDER_RADIUS,
+    },
+  };
+};

ui/components/app/snaps/snap-ui-renderer/utils.ts

@@ -5,7 +5,10 @@ import { sha256 } from '@noble/hashes/sha256';
 import { NonEmptyArray, bytesToHex, remove0x } from '@metamask/utils';
 import { unescape as unescapeEntities } from 'he';
 import { ChangeEvent as ReactChangeEvent } from 'react';
-import { BackgroundColor } from '../../../../helpers/constants/design-system';
+import {
+  BackgroundColor,
+  BorderRadius,
+} from '../../../../helpers/constants/design-system';
 import { COMPONENT_MAPPING } from './components';
 import { UIComponent } from './components/types';
 
@@ -156,3 +159,23 @@ export const mapToExtensionCompatibleColor = (color: string) => {
   };
   return color ? backgroundColorMapping[color] : undefined;
 };
+
+/**
+ * Map Snap custom size for border radius to extension compatible size.
+ *
+ * @param snapBorderRadius - Snap custom color.
+ * @returns String, representing border radius size from design system.
+ */
+export const mapSnapBorderRadiusToExtensionBorderRadius = (
+  snapBorderRadius: string | undefined,
+): BorderRadius => {
+  switch (snapBorderRadius) {
+    case 'none':
+    default:
+      return BorderRadius.none;
+    case 'medium':
+      return BorderRadius.MD;
+    case 'full':
+      return BorderRadius.full;
+  }
+};