From cb6ae474845ab6f0acdd0766acb29aaaf7f52492 Mon Sep 17 00:00:00 2001
From: david0xd <david@timechaser.org>
Date: Thu, 16 Jan 2025 21:06:14 +0100
Subject: [PATCH] Add Skeleton to Snaps UI

---
 .../safe-component-list.js                      |  2 ++
 .../snaps/snap-ui-renderer/components/index.ts  |  2 ++
 .../snap-ui-renderer/components/skeleton.ts     | 13 +++++++++++++
 .../app/snaps/snaps-ui-skeleton/index.ts        |  1 +
 .../snaps-ui-skeleton/snap-ui-skeleton.tsx      | 17 +++++++++++++++++
 5 files changed, 35 insertions(+)
 create mode 100644 ui/components/app/snaps/snap-ui-renderer/components/skeleton.ts
 create mode 100644 ui/components/app/snaps/snaps-ui-skeleton/index.ts
 create mode 100644 ui/components/app/snaps/snaps-ui-skeleton/snap-ui-skeleton.tsx

diff --git a/ui/components/app/metamask-template-renderer/safe-component-list.js b/ui/components/app/metamask-template-renderer/safe-component-list.js
index b15bff11247c..5d3ecb243444 100644
--- a/ui/components/app/metamask-template-renderer/safe-component-list.js
+++ b/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,
diff --git a/ui/components/app/snaps/snap-ui-renderer/components/index.ts b/ui/components/app/snaps/snap-ui-renderer/components/index.ts
index f6173b7199b0..64248c4b1a89 100644
--- a/ui/components/app/snaps/snap-ui-renderer/components/index.ts
+++ b/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,
 };
diff --git a/ui/components/app/snaps/snap-ui-renderer/components/skeleton.ts b/ui/components/app/snaps/snap-ui-renderer/components/skeleton.ts
new file mode 100644
index 000000000000..022be2a6dc12
--- /dev/null
+++ b/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,
+    },
+  };
+};
diff --git a/ui/components/app/snaps/snaps-ui-skeleton/index.ts b/ui/components/app/snaps/snaps-ui-skeleton/index.ts
new file mode 100644
index 000000000000..ae70ea0523d8
--- /dev/null
+++ b/ui/components/app/snaps/snaps-ui-skeleton/index.ts
@@ -0,0 +1 @@
+export * from './snap-ui-skeleton';
diff --git a/ui/components/app/snaps/snaps-ui-skeleton/snap-ui-skeleton.tsx b/ui/components/app/snaps/snaps-ui-skeleton/snap-ui-skeleton.tsx
new file mode 100644
index 000000000000..00d067567cae
--- /dev/null
+++ b/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} />;
+};