From 70c7e35e5cbc7dd43f1b5faa02c26bfbff327825 Mon Sep 17 00:00:00 2001
From: David Drazic <david@timechaser.org>
Date: Tue, 17 Dec 2024 16:14:47 +0100
Subject: [PATCH] feat(snaps): Add loading variant to Snap UI button (#28997)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## **Description**
This PR enables loading button variant for Snaps UI.

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

#### Notes
- Targets Snaps release integration PR:
https://github.com/MetaMask/metamask-extension/pull/29275

## **Related issues**
Fixes: https://github.com/MetaMask/snaps/issues/2694

## **Related PR dependencies**
Snaps monorepo: https://github.com/MetaMask/snaps/pull/2930

## **Manual testing steps**
1. Create some example Snap for testing and add Snap UI Button with
`loading` variant.
Example:
```TypeScript
<Button variant="loading">Loading button</Button>
```

## **Screenshots/Recordings**
### **Before**
Loading button variant was not available before.

### **After**

https://github.com/user-attachments/assets/5afea22c-1951-4475-a908-aa5b97eafb6b


## **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.
---
 .../snaps/snap-ui-button/snap-ui-button.tsx    | 18 ++++++++++++++++--
 .../snap-ui-footer-button.tsx                  | 14 ++++++++++++--
 .../snap-ui-renderer/components/button.ts      |  1 +
 3 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/ui/components/app/snaps/snap-ui-button/snap-ui-button.tsx b/ui/components/app/snaps/snap-ui-button/snap-ui-button.tsx
index d4703e9dfaa3..49f1de8fbee1 100644
--- a/ui/components/app/snaps/snap-ui-button/snap-ui-button.tsx
+++ b/ui/components/app/snaps/snap-ui-button/snap-ui-button.tsx
@@ -1,7 +1,12 @@
 import React, { FunctionComponent, MouseEvent as ReactMouseEvent } from 'react';
 import classnames from 'classnames';
 import { ButtonType, UserInputEventType } from '@metamask/snaps-sdk';
-import { ButtonLinkProps, Text } from '../../../component-library';
+import {
+  ButtonLinkProps,
+  Icon,
+  IconName,
+  Text,
+} from '../../../component-library';
 import {
   FontWeight,
   TextColor,
@@ -11,6 +16,7 @@ import { useSnapInterfaceContext } from '../../../../contexts/snaps';
 export type SnapUIButtonProps = {
   name?: string;
   textVariant: ButtonLinkProps<'button'>['variant'];
+  loading?: boolean;
 };
 
 const COLORS = {
@@ -27,6 +33,7 @@ export const SnapUIButton: FunctionComponent<
   type = ButtonType.Button,
   variant = 'primary',
   disabled = false,
+  loading = false,
   className = '',
   textVariant,
   ...props
@@ -63,7 +70,14 @@ export const SnapUIButton: FunctionComponent<
       variant={textVariant}
       {...props}
     >
-      {children}
+      {loading ? (
+        <Icon
+          name={IconName.Loading}
+          style={{ animation: 'spin 1.2s linear infinite' }}
+        />
+      ) : (
+        children
+      )}
     </Text>
   );
 };
diff --git a/ui/components/app/snaps/snap-ui-footer-button/snap-ui-footer-button.tsx b/ui/components/app/snaps/snap-ui-footer-button/snap-ui-footer-button.tsx
index 240024bb673a..ff3f530ae1e7 100644
--- a/ui/components/app/snaps/snap-ui-footer-button/snap-ui-footer-button.tsx
+++ b/ui/components/app/snaps/snap-ui-footer-button/snap-ui-footer-button.tsx
@@ -10,6 +10,8 @@ import {
   Button,
   ButtonProps,
   ButtonSize,
+  Icon,
+  IconName,
   IconSize,
 } from '../../../component-library';
 import {
@@ -35,6 +37,7 @@ export const SnapUIFooterButton: FunctionComponent<
   name,
   children,
   disabled = false,
+  loading = false,
   isSnapAction = false,
   type,
   variant = ButtonVariant.Primary,
@@ -85,10 +88,17 @@ export const SnapUIFooterButton: FunctionComponent<
         flexDirection: FlexDirection.Row,
       }}
     >
-      {isSnapAction && !hideSnapBranding && (
+      {isSnapAction && !hideSnapBranding && !loading && (
         <SnapIcon snapId={snapId} avatarSize={IconSize.Sm} marginRight={2} />
       )}
-      {children}
+      {loading ? (
+        <Icon
+          name={IconName.Loading}
+          style={{ animation: 'spin 1.2s linear infinite' }}
+        />
+      ) : (
+        children
+      )}
     </Button>
   );
 };
diff --git a/ui/components/app/snaps/snap-ui-renderer/components/button.ts b/ui/components/app/snaps/snap-ui-renderer/components/button.ts
index c136b92b5dd3..4b0cdb808e79 100644
--- a/ui/components/app/snaps/snap-ui-renderer/components/button.ts
+++ b/ui/components/app/snaps/snap-ui-renderer/components/button.ts
@@ -16,6 +16,7 @@ export const button: UIComponentFactory<ButtonElement> = ({
     variant: element.props.variant,
     name: element.props.name,
     disabled: element.props.disabled,
+    loading: element.props.loading,
     textVariant:
       element.props.size === 'sm' ? TextVariant.bodySm : TextVariant.bodyMd,
   },