add loading states to buttons

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 && (

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>

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

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>

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, {});