diff --git a/native/chat/relationship-prompt.react.js b/native/chat/relationship-prompt.react.js
--- a/native/chat/relationship-prompt.react.js
+++ b/native/chat/relationship-prompt.react.js
@@ -9,7 +9,7 @@
 import { userRelationshipStatus } from 'lib/types/relationship-types.js';
 import type { UserInfo } from 'lib/types/user-types.js';
 
-import Button from '../components/button.react.js';
+import LoadableButton from '../components/loadable-button.react.js';
 import { useStyles } from '../themes/colors.js';
 import { unknownErrorAlertDetails } from '../utils/alert-messages.js';
 import Alert from '../utils/alert.js';
@@ -34,6 +34,12 @@
     const {
       otherUserInfo,
       callbacks: { blockUser, unblockUser, friendUser, unfriendUser },
+      loadingState: {
+        isLoadingBlockUser,
+        isLoadingUnblockUser,
+        isLoadingFriendUser,
+        isLoadingUnfriendUser,
+      },
     } = useRelationshipPrompt(
       threadInfo,
       onErrorCallback,
@@ -41,6 +47,16 @@
     );
     const styles = useStyles(unboundStyles);
 
+    const greenButtonStyles = React.useMemo(
+      () => [styles.button, styles.greenButton],
+      [styles.button, styles.greenButton],
+    );
+
+    const redButtonStyles = React.useMemo(
+      () => [styles.button, styles.redButton],
+      [styles.button, styles.redButton],
+    );
+
     if (
       !otherUserInfo ||
       !otherUserInfo.username ||
@@ -54,10 +70,14 @@
     ) {
       return (
         <View style={styles.container}>
-          <Button style={[styles.button, styles.redButton]} onPress={blockUser}>
+          <LoadableButton
+            style={redButtonStyles}
+            onPress={blockUser}
+            isLoading={isLoadingBlockUser}
+          >
             <Icon name="user-shield" size={12} color="white" />
-            <Text style={styles.buttonText}>Block User</Text>
-          </Button>
+            <Text style={styles.buttonText}>Block user</Text>
+          </LoadableButton>
         </View>
       );
     }
@@ -70,13 +90,14 @@
     ) {
       return (
         <View style={styles.container}>
-          <Button
-            style={[styles.button, styles.greenButton]}
+          <LoadableButton
+            style={greenButtonStyles}
             onPress={unblockUser}
+            isLoading={isLoadingUnblockUser}
           >
             <Icon name="user-shield" size={12} color="white" />
-            <Text style={styles.buttonText}>Unblock User</Text>
-          </Button>
+            <Text style={styles.buttonText}>Unblock user</Text>
+          </LoadableButton>
         </View>
       );
     }
@@ -87,20 +108,22 @@
     ) {
       return (
         <View style={styles.container}>
-          <Button
-            style={[styles.button, styles.greenButton]}
+          <LoadableButton
+            style={greenButtonStyles}
             onPress={friendUser}
+            isLoading={isLoadingFriendUser}
           >
             <Icon name="user-plus" size={12} color="white" />
-            <Text style={styles.buttonText}>Accept Friend Request</Text>
-          </Button>
-          <Button
-            style={[styles.button, styles.redButton]}
+            <Text style={styles.buttonText}>Accept friend request</Text>
+          </LoadableButton>
+          <LoadableButton
+            style={redButtonStyles}
             onPress={unfriendUser}
+            isLoading={isLoadingUnfriendUser}
           >
             <Icon name="user-slash" size={12} color="white" />
-            <Text style={styles.buttonText}>Reject Friend Request</Text>
-          </Button>
+            <Text style={styles.buttonText}>Reject friend request</Text>
+          </LoadableButton>
         </View>
       );
     }
@@ -110,30 +133,36 @@
     ) {
       return (
         <View style={styles.container}>
-          <Button
-            style={[styles.button, styles.redButton]}
+          <LoadableButton
+            style={redButtonStyles}
             onPress={unfriendUser}
+            isLoading={isLoadingUnfriendUser}
           >
             <Icon name="user-minus" size={12} color="white" />
-            <Text style={styles.buttonText}>Withdraw Friend Request</Text>
-          </Button>
+            <Text style={styles.buttonText}>Withdraw friend request</Text>
+          </LoadableButton>
         </View>
       );
     }
 
     return (
       <View style={styles.container}>
-        <Button
-          style={[styles.button, styles.greenButton]}
+        <LoadableButton
+          style={greenButtonStyles}
           onPress={friendUser}
+          isLoading={isLoadingFriendUser}
         >
           <Icon name="user-plus" size={12} color="white" />
-          <Text style={styles.buttonText}>Add Friend</Text>
-        </Button>
-        <Button style={[styles.button, styles.redButton]} onPress={blockUser}>
+          <Text style={styles.buttonText}>Add friend</Text>
+        </LoadableButton>
+        <LoadableButton
+          style={redButtonStyles}
+          onPress={blockUser}
+          isLoading={isLoadingBlockUser}
+        >
           <Icon name="user-shield" size={12} color="white" />
-          <Text style={styles.buttonText}>Block User</Text>
-        </Button>
+          <Text style={styles.buttonText}>Block user</Text>
+        </LoadableButton>
       </View>
     );
   },
@@ -152,6 +181,7 @@
     flex: 1,
     flexDirection: 'row',
     justifyContent: 'center',
+    alignItems: 'center',
     marginHorizontal: 5,
   },
   greenButton: {