Add loading variant for Snaps UI Button (#2930)

This PR adds loading variant for Snap UI button. This button shows
loading icon with an infinite animation.

Related ticket: #2694
Related extension PR:
MetaMask/metamask-extension#28997

Loading button in action:


https://github.com/user-attachments/assets/a2f15262-dc68-44cb-bbd2-22e288d9d09c

Author: david0xd

packages/examples/packages/browserify-plugin/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "d1js9Y4zJwk7n/e47V5fdMreo1FBtVKl4GtPhfckZrs=",
+    "shasum": "lyy+HECzOFQzuzjyD1nas6GPc4kMt340ChbqQZl7uEo=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/examples/packages/browserify/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "2OhDjaajEbvT1LdHB1G/Jl9NpfRtJxYl87w1c+1eJck=",
+    "shasum": "k7NYoT8jI2E4u785PN5PoruwtjF18KNOSagNY9fS44U=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/snaps-sdk/src/jsx/components/form/Button.test.tsx

@@ -63,4 +63,23 @@ describe('Button', () => {
       key: null,
     });
   });
+
+  it('returns a button element with a variant and loading state', () => {
+    const result = (
+      <Button type="button" variant="primary" loading={true}>
+        foo
+      </Button>
+    );
+
+    expect(result).toStrictEqual({
+      type: 'Button',
+      props: {
+        children: 'foo',
+        type: 'button',
+        variant: 'primary',
+        loading: true,
+      },
+      key: null,
+    });
+  });
 });

packages/snaps-sdk/src/jsx/components/form/Button.ts

@@ -16,6 +16,7 @@ import type { ImageElement } from '../Image';
  * @property variant - The variant of the button, i.e., `'primary'` or
  * `'destructive'`. Defaults to `'primary'`.
  * @property disabled - Whether the button is disabled. Defaults to `false`.
+ * @property loading - Whether the button is loading. Defaults to `false`.
  * @property form - The name of the form component to associate the button with.
  */
 export type ButtonProps = {
@@ -24,6 +25,7 @@ export type ButtonProps = {
   type?: 'button' | 'submit' | undefined;
   variant?: 'primary' | 'destructive' | undefined;
   disabled?: boolean | undefined;
+  loading?: boolean | undefined;
   form?: string | undefined;
 };
 

packages/snaps-sdk/src/jsx/validation.test.tsx

@@ -164,6 +164,9 @@ describe('ButtonStruct', () => {
     <Button type="submit">foo</Button>,
     <Button variant="destructive">foo</Button>,
     <Button disabled={true}>foo</Button>,
+    <Button variant="primary" loading={true}>
+      foo
+    </Button>,
     <Button key="button">foo</Button>,
     <Button>
       <Icon name="wifi" />

packages/snaps-sdk/src/jsx/validation.ts

@@ -245,6 +245,7 @@ export const ButtonStruct: Describe<ButtonElement> = element('Button', {
   type: optional(nullUnion([literal('button'), literal('submit')])),
   variant: optional(nullUnion([literal('primary'), literal('destructive')])),
   disabled: optional(boolean()),
+  loading: optional(boolean()),
   form: optional(string()),
 });