Add Skeleton component (#3024)

david0xd · web-flow · commit d71d6d892eb4 · 2025-01-20T15:46:01.000+01:00
### Add Skeleton component. Related PR in extension: MetaMask/metamask-extension#29764 #### Code example 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 ![Screenshot 2025-01-17 at 13 09 22](https://github.com/user-attachments/assets/7ebd5646-6664-4b72-8578-33e7db6557a5)
diff --git a/packages/examples/packages/browserify-plugin/snap.manifest.json b/packages/examples/packages/browserify-plugin/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "ssGPi4fxyZSvKOMXbVdOa/vnTx0qrq6WZWCUV91dLqo=",
+    "shasum": "B0senywfM+w5lQ+iMvK+bVcKJ6VeLDj7HiUVYR5Cuag=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",
diff --git a/packages/examples/packages/browserify/snap.manifest.json b/packages/examples/packages/browserify/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "+342Ghzfo9UpTxJgqIPOieHvqRTnf4h00s8r0DpbozY=",
+    "shasum": "PS0U7SHYXWpFhO8QMtArHKU1rFzMkwtTLFlc3/g1HQ4=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",
diff --git a/packages/snaps-rpc-methods/src/permitted/createInterface.test.tsx b/packages/snaps-rpc-methods/src/permitted/createInterface.test.tsx
@@ -141,7 +141,7 @@ describe('snap_createInterface', () => {
       error: {
         code: -32602,
         message:
-          'Invalid params: At path: ui -- Expected type to be one of: "Address", "Bold", "Box", "Button", "Copyable", "Divider", "Dropdown", "RadioGroup", "Field", "FileInput", "Form", "Heading", "Input", "Image", "Italic", "Link", "Row", "Spinner", "Text", "Tooltip", "Checkbox", "Card", "Icon", "Selector", "Section", "Avatar", "Banner", "Container", but received: undefined.',
+          'Invalid params: At path: ui -- Expected type to be one of: "Address", "Bold", "Box", "Button", "Copyable", "Divider", "Dropdown", "RadioGroup", "Field", "FileInput", "Form", "Heading", "Input", "Image", "Italic", "Link", "Row", "Spinner", "Text", "Tooltip", "Checkbox", "Card", "Icon", "Selector", "Section", "Avatar", "Banner", "Skeleton", "Container", but received: undefined.',
         stack: expect.any(String),
       },
       id: 1,
diff --git a/packages/snaps-sdk/src/internals/structs.test.ts b/packages/snaps-sdk/src/internals/structs.test.ts
@@ -66,7 +66,7 @@ describe('typedUnion', () => {
     const result = validate(Text({}), unionStruct);
 
     expect(result[0]?.message).toBe(
-      'At path: props.children -- Expected type to be one of: "Bold", "Italic", "Link", "Icon", but received: undefined',
+      'At path: props.children -- Expected type to be one of: "Bold", "Italic", "Link", "Icon", "Skeleton", but received: undefined',
     );
   });
 
@@ -75,7 +75,7 @@ describe('typedUnion', () => {
     const result = validate(Text({}), nestedUnionStruct);
 
     expect(result[0]?.message).toBe(
-      'At path: props.children -- Expected type to be one of: "Bold", "Italic", "Link", "Icon", but received: undefined',
+      'At path: props.children -- Expected type to be one of: "Bold", "Italic", "Link", "Icon", "Skeleton", but received: undefined',
     );
   });
 
diff --git a/packages/snaps-sdk/src/jsx/components/Banner.ts b/packages/snaps-sdk/src/jsx/components/Banner.ts
@@ -3,6 +3,7 @@ import type { ButtonElement } from './form/Button';
 import type { StandardFormattingElement } from './formatting';
 import type { IconElement } from './Icon';
 import type { LinkElement } from './Link';
+import type { SkeletonElement } from './Skeleton';
 import type { TextElement } from './Text';
 
 /**
@@ -14,6 +15,7 @@ export type BannerChildren = SnapsChildren<
   | LinkElement
   | IconElement
   | ButtonElement
+  | SkeletonElement
 >;
 
 /**
diff --git a/packages/snaps-sdk/src/jsx/components/Image.ts b/packages/snaps-sdk/src/jsx/components/Image.ts
@@ -1,4 +1,5 @@
 import { createSnapComponent } from '../component';
+import type { BorderRadius } from './utils';
 
 /**
  * The props of the {@link Image} component.
@@ -12,7 +13,7 @@ import { createSnapComponent } from '../component';
 type ImageProps = {
   src: string;
   alt?: string | undefined;
-  borderRadius?: 'none' | 'medium' | 'full' | undefined;
+  borderRadius?: BorderRadius | undefined;
 };
 
 const TYPE = 'Image';
diff --git a/packages/snaps-sdk/src/jsx/components/Row.ts b/packages/snaps-sdk/src/jsx/components/Row.ts
@@ -2,6 +2,7 @@ import { createSnapComponent } from '../component';
 import type { AddressElement } from './Address';
 import type { ImageElement } from './Image';
 import type { LinkElement } from './Link';
+import type { SkeletonElement } from './Skeleton';
 import type { TextElement } from './Text';
 import type { ValueElement } from './Value';
 
@@ -13,7 +14,8 @@ export type RowChildren =
   | ImageElement
   | TextElement
   | ValueElement
-  | LinkElement;
+  | LinkElement
+  | SkeletonElement;
 
 /**
  * The props of the {@link Row} component.
diff --git a/packages/snaps-sdk/src/jsx/components/Skeleton.test.tsx b/packages/snaps-sdk/src/jsx/components/Skeleton.test.tsx
@@ -0,0 +1,17 @@
+import { Skeleton } from './Skeleton';
+
+describe('Skeleton', () => {
+  it('renders a skeleton component', () => {
+    const result = <Skeleton width={320} height={32} borderRadius="medium" />;
+
+    expect(result).toStrictEqual({
+      type: 'Skeleton',
+      key: null,
+      props: {
+        width: 320,
+        height: 32,
+        borderRadius: 'medium',
+      },
+    });
+  });
+});
diff --git a/packages/snaps-sdk/src/jsx/components/Skeleton.ts b/packages/snaps-sdk/src/jsx/components/Skeleton.ts
@@ -0,0 +1,36 @@
+import { createSnapComponent } from '../component';
+import type { BorderRadius } from './utils';
+
+/**
+ * The props of the {@link Skeleton} component.
+ *
+ * @param width - Width of the Skeleton.
+ * @param width - Height of the Skeleton.
+ * @param borderRadius - Border radius of the Skeleton.
+ */
+export type SkeletonProps = {
+  width?: number | string | undefined;
+  height?: number | string | undefined;
+  borderRadius?: BorderRadius | undefined;
+};
+
+const TYPE = 'Skeleton';
+
+/**
+ * A Skeleton component, which is used to display skeleton of loading content.
+ *
+ * @param props - The props of the component.
+ * @param props.width - Width of the Skeleton.
+ * @param props.width - Height of the Skeleton.
+ * @param props.borderRadius - Border radius of the Skeleton.
+ * @example
+ * <Skeleton height={32} width="50%" />
+ */
+export const Skeleton = createSnapComponent<SkeletonProps, typeof TYPE>(TYPE);
+
+/**
+ * A Skeleton element.
+ *
+ * @see Skeleton
+ */
+export type SkeletonElement = ReturnType<typeof Skeleton>;
diff --git a/packages/snaps-sdk/src/jsx/components/Text.ts b/packages/snaps-sdk/src/jsx/components/Text.ts
@@ -3,12 +3,17 @@ import { createSnapComponent } from '../component';
 import type { StandardFormattingElement } from './formatting';
 import type { IconElement } from './Icon';
 import type { LinkElement } from './Link';
+import type { SkeletonElement } from './Skeleton';
 
 /**
  * The children of the {@link Text} component.
  */
 export type TextChildren = SnapsChildren<
-  string | StandardFormattingElement | LinkElement | IconElement
+  | string
+  | StandardFormattingElement
+  | LinkElement
+  | IconElement
+  | SkeletonElement
 >;
 
 /**
diff --git a/packages/snaps-sdk/src/jsx/components/index.ts b/packages/snaps-sdk/src/jsx/components/index.ts
@@ -15,6 +15,7 @@ import type { ImageElement } from './Image';
 import type { LinkElement } from './Link';
 import type { RowElement } from './Row';
 import type { SectionElement } from './Section';
+import type { SkeletonElement } from './Skeleton';
 import type { SpinnerElement } from './Spinner';
 import type { TextElement } from './Text';
 import type { TooltipElement } from './Tooltip';
@@ -41,6 +42,8 @@ export * from './Footer';
 export * from './Container';
 export * from './Section';
 export * from './Banner';
+export * from './Skeleton';
+export * from './utils';
 
 /**
  * A built-in JSX element, which can be used in a Snap user interface.
@@ -66,4 +69,5 @@ export type JSXElement =
   | SpinnerElement
   | TextElement
   | TooltipElement
-  | BannerElement;
+  | BannerElement
+  | SkeletonElement;
diff --git a/packages/snaps-sdk/src/jsx/components/utils.ts b/packages/snaps-sdk/src/jsx/components/utils.ts
@@ -0,0 +1,4 @@
+/**
+ * Definition of border radius.
+ */
+export type BorderRadius = 'none' | 'medium' | 'full' | undefined;
diff --git a/packages/snaps-sdk/src/jsx/validation.test.tsx b/packages/snaps-sdk/src/jsx/validation.test.tsx
@@ -34,6 +34,7 @@ import {
   Section,
   Avatar,
   Banner,
+  Skeleton,
 } from './components';
 import {
   AddressStruct,
@@ -72,6 +73,7 @@ import {
   SectionStruct,
   AvatarStruct,
   BannerStruct,
+  SkeletonStruct,
 } from './validation';
 
 describe('KeyStruct', () => {
@@ -1618,3 +1620,34 @@ describe('BannerStruct', () => {
     expect(is(value, BannerStruct)).toBe(false);
   });
 });
+
+describe('SkeletonStruct', () => {
+  it.each([
+    <Skeleton />,
+    <Skeleton width={320} height={32} />,
+    <Skeleton width="30%" height="30%" />,
+    <Skeleton width={32} height="30%" />,
+    <Skeleton width="30%" height={32} />,
+    <Skeleton width="30%" height={32} borderRadius="full" />,
+    <Skeleton width={32} height="30%" borderRadius="medium" />,
+  ])(`validates a Skeleton element`, (value) => {
+    expect(is(value, SkeletonStruct)).toBe(true);
+  });
+
+  it.each([
+    'foo',
+    42,
+    null,
+    undefined,
+    {},
+    [],
+    // @ts-expect-error - Invalid props.
+    <Skeleton foo="bar">foo</Skeleton>,
+    // @ts-expect-error - Invalid props.
+    <Skeleton title={<Copyable value="bar" />} severity="info">
+      <Text>foo</Text>
+    </Skeleton>,
+  ])('does not validate "%p"', (value) => {
+    expect(is(value, SkeletonStruct)).toBe(false);
+  });
+});
diff --git a/packages/snaps-sdk/src/jsx/validation.ts b/packages/snaps-sdk/src/jsx/validation.ts
@@ -48,7 +48,7 @@ import type {
   SnapsChildren,
   StringElement,
 } from './component';
-import type { AvatarElement } from './components';
+import type { AvatarElement, SkeletonElement } from './components';
 import {
   type AddressElement,
   type BoldElement,
@@ -215,15 +215,22 @@ function elementWithSelectiveProps<
   });
 }
 
+/**
+ * Shared struct used to validate border radius values used by various Snaps components.
+ */
+export const BorderRadiusStruct = nullUnion([
+  literal('none'),
+  literal('medium'),
+  literal('full'),
+]);
+
 /**
  * A struct for the {@link ImageElement} type.
  */
 export const ImageStruct: Describe<ImageElement> = element('Image', {
   src: svg(),
   alt: optional(string()),
-  borderRadius: optional(
-    nullUnion([literal('none'), literal('medium'), literal('full')]),
-  ),
+  borderRadius: optional(BorderRadiusStruct),
 });
 
 const IconNameStruct: Struct<`${IconName}`, null> = nullUnion(
@@ -692,6 +699,15 @@ export const LinkStruct: Describe<LinkElement> = element('Link', {
   ]),
 });
 
+/**
+ * A struct for the {@link SkeletonElement} type.
+ */
+export const SkeletonStruct: Describe<SkeletonElement> = element('Skeleton', {
+  width: optional(union([number(), string()])),
+  height: optional(union([number(), string()])),
+  borderRadius: optional(BorderRadiusStruct),
+});
+
 /**
  * A struct for the {@link TextElement} type.
  */
@@ -701,7 +717,13 @@ export const TextStruct: Describe<TextElement> = element('Text', {
       if (typeof value === 'string') {
         return string();
       }
-      return typedUnion([BoldStruct, ItalicStruct, LinkStruct, IconStruct]);
+      return typedUnion([
+        BoldStruct,
+        ItalicStruct,
+        LinkStruct,
+        IconStruct,
+        SkeletonStruct,
+      ]);
     }),
   ]),
   alignment: optional(
@@ -797,6 +819,7 @@ export const BannerStruct: Describe<BannerElement> = element('Banner', {
     ButtonStruct,
     BoldStruct,
     ItalicStruct,
+    SkeletonStruct,
   ]),
   title: string(),
   severity: union([
@@ -818,6 +841,7 @@ export const RowStruct: Describe<RowElement> = element('Row', {
     TextStruct,
     ValueStruct,
     LinkStruct,
+    SkeletonStruct,
   ]),
   variant: optional(
     nullUnion([literal('default'), literal('warning'), literal('critical')]),
@@ -863,6 +887,7 @@ export const BoxChildStruct = typedUnion([
   SectionStruct,
   AvatarStruct,
   BannerStruct,
+  SkeletonStruct,
 ]);
 
 /**
@@ -932,6 +957,7 @@ export const JSXElementStruct: Describe<JSXElement> = typedUnion([
   SectionStruct,
   AvatarStruct,
   BannerStruct,
+  SkeletonStruct,
 ]);
 
 /**
