From 6c224d9fe9a2b8d345ac392bf3ff1a4677a6cfe6 Mon Sep 17 00:00:00 2001
From: Jon Tzeng <jon@edge.app>
Date: Mon, 25 Aug 2025 14:57:40 -0700
Subject: [PATCH] Fix button spinner + label on async pending state

---
 .../__snapshots__/Buttons.test.tsx.snap       | 180 ++++--------------
 src/components/buttons/EdgeButton.tsx         |  25 ++-
 2 files changed, 52 insertions(+), 153 deletions(-)

diff --git a/src/__tests__/components/__snapshots__/Buttons.test.tsx.snap b/src/__tests__/components/__snapshots__/Buttons.test.tsx.snap
index 9e2c246cefc..b1fa5079efa 100644
--- a/src/__tests__/components/__snapshots__/Buttons.test.tsx.snap
+++ b/src/__tests__/components/__snapshots__/Buttons.test.tsx.snap
@@ -4102,17 +4102,9 @@ exports[`Buttons should render spinning buttons 1`] = `
                 "fontSize": 22,
                 "includeFontPadding": false,
               },
-              [
-                {
-                  "includeFontPadding": false,
-                },
-                {
-                  "color": "#FFFFFF",
-                  "fontFamily": "Quicksand-Medium",
-                  "fontSize": 22,
-                },
-                null,
-              ],
+              {
+                "opacity": 0,
+              },
               null,
             ]
           }
@@ -4259,17 +4251,9 @@ exports[`Buttons should render spinning buttons 1`] = `
                 "fontSize": 22,
                 "includeFontPadding": false,
               },
-              [
-                {
-                  "includeFontPadding": false,
-                },
-                {
-                  "color": "#FFFFFF",
-                  "fontFamily": "Quicksand-Regular",
-                  "fontSize": 22,
-                },
-                null,
-              ],
+              {
+                "opacity": 0,
+              },
               null,
             ]
           }
@@ -4386,17 +4370,9 @@ exports[`Buttons should render spinning buttons 1`] = `
                 "fontSize": 22,
                 "includeFontPadding": false,
               },
-              [
-                {
-                  "includeFontPadding": false,
-                },
-                {
-                  "color": "#00f1a2",
-                  "fontFamily": "Quicksand-Regular",
-                  "fontSize": 22,
-                },
-                null,
-              ],
+              {
+                "opacity": 0,
+              },
               null,
             ]
           }
@@ -4543,17 +4519,9 @@ exports[`Buttons should render spinning buttons 1`] = `
                 "fontSize": 22,
                 "includeFontPadding": false,
               },
-              [
-                {
-                  "includeFontPadding": false,
-                },
-                {
-                  "color": "#FFFFFF",
-                  "fontFamily": "Quicksand-Medium",
-                  "fontSize": 22,
-                },
-                null,
-              ],
+              {
+                "opacity": 0,
+              },
               null,
             ]
           }
@@ -4700,17 +4668,9 @@ exports[`Buttons should render spinning buttons 1`] = `
                 "fontSize": 22,
                 "includeFontPadding": false,
               },
-              [
-                {
-                  "includeFontPadding": false,
-                },
-                {
-                  "color": "#FFFFFF",
-                  "fontFamily": "Quicksand-Regular",
-                  "fontSize": 22,
-                },
-                null,
-              ],
+              {
+                "opacity": 0,
+              },
               null,
             ]
           }
@@ -4827,17 +4787,9 @@ exports[`Buttons should render spinning buttons 1`] = `
                 "fontSize": 22,
                 "includeFontPadding": false,
               },
-              [
-                {
-                  "includeFontPadding": false,
-                },
-                {
-                  "color": "#00f1a2",
-                  "fontFamily": "Quicksand-Regular",
-                  "fontSize": 22,
-                },
-                null,
-              ],
+              {
+                "opacity": 0,
+              },
               null,
             ]
           }
@@ -6041,19 +5993,9 @@ exports[`Buttons should render with child icons 1`] = `
                 "fontSize": 22,
                 "includeFontPadding": false,
               },
-              [
-                {
-                  "includeFontPadding": false,
-                },
-                {
-                  "color": "#FFFFFF",
-                  "fontFamily": "Quicksand-Medium",
-                  "fontSize": 22,
-                },
-                {
-                  "marginLeft": 11,
-                },
-              ],
+              {
+                "opacity": 0,
+              },
               null,
             ]
           }
@@ -6238,19 +6180,9 @@ exports[`Buttons should render with child icons 1`] = `
                 "fontSize": 22,
                 "includeFontPadding": false,
               },
-              [
-                {
-                  "includeFontPadding": false,
-                },
-                {
-                  "color": "#FFFFFF",
-                  "fontFamily": "Quicksand-Regular",
-                  "fontSize": 22,
-                },
-                {
-                  "marginLeft": 11,
-                },
-              ],
+              {
+                "opacity": 0,
+              },
               null,
             ]
           }
@@ -6405,19 +6337,9 @@ exports[`Buttons should render with child icons 1`] = `
                 "fontSize": 22,
                 "includeFontPadding": false,
               },
-              [
-                {
-                  "includeFontPadding": false,
-                },
-                {
-                  "color": "#00f1a2",
-                  "fontFamily": "Quicksand-Regular",
-                  "fontSize": 22,
-                },
-                {
-                  "marginLeft": 11,
-                },
-              ],
+              {
+                "opacity": 0,
+              },
               null,
             ]
           }
@@ -6602,19 +6524,9 @@ exports[`Buttons should render with child icons 1`] = `
                 "fontSize": 22,
                 "includeFontPadding": false,
               },
-              [
-                {
-                  "includeFontPadding": false,
-                },
-                {
-                  "color": "#FFFFFF",
-                  "fontFamily": "Quicksand-Medium",
-                  "fontSize": 22,
-                },
-                {
-                  "marginLeft": 11,
-                },
-              ],
+              {
+                "opacity": 0,
+              },
               null,
             ]
           }
@@ -6799,19 +6711,9 @@ exports[`Buttons should render with child icons 1`] = `
                 "fontSize": 22,
                 "includeFontPadding": false,
               },
-              [
-                {
-                  "includeFontPadding": false,
-                },
-                {
-                  "color": "#FFFFFF",
-                  "fontFamily": "Quicksand-Regular",
-                  "fontSize": 22,
-                },
-                {
-                  "marginLeft": 11,
-                },
-              ],
+              {
+                "opacity": 0,
+              },
               null,
             ]
           }
@@ -6966,19 +6868,9 @@ exports[`Buttons should render with child icons 1`] = `
                 "fontSize": 22,
                 "includeFontPadding": false,
               },
-              [
-                {
-                  "includeFontPadding": false,
-                },
-                {
-                  "color": "#00f1a2",
-                  "fontFamily": "Quicksand-Regular",
-                  "fontSize": 22,
-                },
-                {
-                  "marginLeft": 11,
-                },
-              ],
+              {
+                "opacity": 0,
+              },
               null,
             ]
           }
diff --git a/src/components/buttons/EdgeButton.tsx b/src/components/buttons/EdgeButton.tsx
index 28eea4034ff..42e58693866 100644
--- a/src/components/buttons/EdgeButton.tsx
+++ b/src/components/buttons/EdgeButton.tsx
@@ -160,15 +160,19 @@ export function EdgeButton(props: Props): React.ReactElement | null {
         )}
         {label == null ? null : (
           <EdgeText
-            style={[
-              styles.labelBase,
-              type === 'primary'
-                ? styles.labelPrimary
-                : type === 'secondary'
-                ? styles.labelSecondary
-                : styles.labelTertiary,
-              children == null ? null : styles.labelWithIcon
-            ]}
+            style={
+              spinner || pending
+                ? styles.labelInvisible
+                : [
+                    styles.labelBase,
+                    type === 'primary'
+                      ? styles.labelPrimary
+                      : type === 'secondary'
+                      ? styles.labelSecondary
+                      : styles.labelTertiary,
+                    children == null ? null : styles.labelWithIcon
+                  ]
+            }
             numberOfLines={1}
             adjustsFontSizeToFit
             minimumFontScale={0.65}
@@ -281,6 +285,9 @@ const getStyles = cacheStyles((theme: Theme) => {
       fontFamily: theme.escapeButtonFont,
       fontSize: theme.rem(theme.escapeButtonFontSizeRem)
     },
+    labelInvisible: {
+      opacity: 0
+    },
     spinnerOverlay: {
       ...StyleSheet.absoluteFillObject,
       alignItems: 'center',