Add Skeleton to Snaps UI

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

@@ -34,6 +34,7 @@ import { SnapDelineator } from '../snaps/snap-delineator';
 import { SnapUIAddress } from '../snaps/snap-ui-address';
 import { SnapUIAvatar } from '../snaps/snap-ui-avatar';
 import { SnapUIBanner } from '../snaps/snap-ui-banner';
+import { SnapUISkeleton } from '../snaps/snaps-ui-skeleton';
 import { SnapUIButton } from '../snaps/snap-ui-button';
 import { SnapUICard } from '../snaps/snap-ui-card';
 import { SnapUICheckbox } from '../snaps/snap-ui-checkbox';
@@ -91,6 +92,7 @@ export const safeComponentList = {
   SnapUIAddress,
   SnapUIAvatar,
   SnapUIBanner,
+  SnapUISkeleton,
   SnapUIButton,
   SnapUICard,
   SnapUICheckbox,

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,13 @@
+import { SkeletonElement } from '@metamask/snaps-sdk/jsx';
+import { UIComponentFactory } from './types';
+
+export const skeleton: UIComponentFactory<SkeletonElement> = ({ element }) => {
+  return {
+    element: 'SnapUISkeleton',
+    props: {
+      width: element.props.width,
+      height: element.props.height,
+      borderRadius: element.props.borderRadius,
+    },
+  };
+};

ui/components/app/snaps/snaps-ui-skeleton/index.ts

@@ -0,0 +1 @@
+export * from './snap-ui-skeleton';

ui/components/app/snaps/snaps-ui-skeleton/snap-ui-skeleton.tsx

@@ -0,0 +1,17 @@
+import React, { FunctionComponent } from 'react';
+import { Skeleton } from '../../../component-library/skeleton';
+import { BorderRadius } from '../../../../helpers/constants/design-system';
+
+export type SnapUISkeletonProps = {
+  width: number | string;
+  height: number | string;
+  borderRadius?: BorderRadius;
+};
+
+export const SnapUISkeleton: FunctionComponent<SnapUISkeletonProps> = ({
+  width,
+  height,
+  borderRadius,
+}) => {
+  return <Skeleton width={width} height={height} borderRadius={borderRadius} />;
+};