From e3d507db72f3e7d4d41cfbb36faff38acfe0af9c Mon Sep 17 00:00:00 2001
From: Jorrin <jorrinkievit@hotmail.com>
Date: Sun, 21 Apr 2024 18:58:55 +0200
Subject: [PATCH] add loading states to buttons

---
 apps/expo/src/app/sync/login.tsx              |  6 ++++-
 apps/expo/src/app/sync/register/confirm.tsx   |  6 ++++-
 .../components/account/AccountInformation.tsx |  8 ++++---
 .../components/account/DeleteAccountAlert.tsx |  7 +++++-
 apps/expo/src/components/ui/Button.tsx        | 23 +++++++++++++++++--
 5 files changed, 42 insertions(+), 8 deletions(-)

diff --git a/apps/expo/src/app/sync/login.tsx b/apps/expo/src/app/sync/login.tsx
index b267169..1c8847b 100644
--- a/apps/expo/src/app/sync/login.tsx
+++ b/apps/expo/src/app/sync/login.tsx
@@ -96,7 +96,11 @@ export default function Page() {
           flexDirection="column"
           gap="$4"
         >
-          <MWButton type="purple" onPress={() => mutation.mutate()}>
+          <MWButton
+            type="purple"
+            onPress={() => mutation.mutate()}
+            isLoading={mutation.isPending}
+          >
             Login
           </MWButton>
           {mutation.isError && (
diff --git a/apps/expo/src/app/sync/register/confirm.tsx b/apps/expo/src/app/sync/register/confirm.tsx
index 3cc45c9..a589129 100644
--- a/apps/expo/src/app/sync/register/confirm.tsx
+++ b/apps/expo/src/app/sync/register/confirm.tsx
@@ -95,7 +95,11 @@ export default function Page() {
             </Paragraph>
           )}
 
-          <MWButton type="purple" onPress={() => mutation.mutate()}>
+          <MWButton
+            type="purple"
+            onPress={() => mutation.mutate()}
+            isLoading={mutation.isPending}
+          >
             Create account
           </MWButton>
         </MWCard.Footer>
diff --git a/apps/expo/src/components/account/AccountInformation.tsx b/apps/expo/src/components/account/AccountInformation.tsx
index f298e42..413c5b4 100644
--- a/apps/expo/src/components/account/AccountInformation.tsx
+++ b/apps/expo/src/components/account/AccountInformation.tsx
@@ -94,14 +94,15 @@ export function AccountInformation() {
                 <MWInput
                   type="authentication"
                   value={decryptedName}
-                  minWidth={"80%"}
-                  maxWidth={"80%"}
+                  alignSelf="flex-start"
+                  width="$14"
                 />
 
                 <MWButton
                   type="danger"
-                  width={"50%"}
                   onPress={() => logoutMutation.mutate()}
+                  alignSelf="flex-start"
+                  isLoading={logoutMutation.isPending}
                 >
                   Logout
                 </MWButton>
@@ -133,6 +134,7 @@ export function AccountInformation() {
                 {!device.current && (
                   <MWButton
                     type="danger"
+                    isLoading={removeSessionMutation.isPending}
                     onPress={() => removeSessionMutation.mutate(device.id)}
                   >
                     Remove
diff --git a/apps/expo/src/components/account/DeleteAccountAlert.tsx b/apps/expo/src/components/account/DeleteAccountAlert.tsx
index 19f827c..a7d2fb3 100644
--- a/apps/expo/src/components/account/DeleteAccountAlert.tsx
+++ b/apps/expo/src/components/account/DeleteAccountAlert.tsx
@@ -75,7 +75,12 @@ export function DeleteAccountAlert() {
                 asChild
                 onPress={() => deleteAccountMutation.mutate()}
               >
-                <MWButton type="purple">I am sure</MWButton>
+                <MWButton
+                  type="purple"
+                  isLoading={deleteAccountMutation.isPending}
+                >
+                  I am sure
+                </MWButton>
               </AlertDialog.Action>
             </XStack>
           </YStack>
diff --git a/apps/expo/src/components/ui/Button.tsx b/apps/expo/src/components/ui/Button.tsx
index 9aa2cbf..7dda293 100644
--- a/apps/expo/src/components/ui/Button.tsx
+++ b/apps/expo/src/components/ui/Button.tsx
@@ -1,6 +1,6 @@
-import { Button, styled } from "tamagui";
+import { Button, Spinner, styled, withStaticProperties } from "tamagui";
 
-export const MWButton = styled(Button, {
+const MWButtonFrame = styled(Button, {
   variants: {
     type: {
       primary: {
@@ -71,3 +71,22 @@ export const MWButton = styled(Button, {
     },
   } as const,
 });
+
+const ButtonComponent = MWButtonFrame.styleable<{
+  isLoading?: boolean;
+}>(function Button(props, ref) {
+  const spinnerColor =
+    // @ts-expect-error this is a hack to get the color from the variant
+    MWButtonFrame.staticConfig.variants?.type?.[props.type!]?.color as string;
+  return (
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+    <MWButtonFrame {...props} ref={ref}>
+      {props.isLoading && (
+        <Spinner size="small" color={spinnerColor ?? "white"} />
+      )}
+      {props.children}
+    </MWButtonFrame>
+  );
+});
+
+export const MWButton = withStaticProperties(ButtonComponent, {});