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,
@@ -54,10 +60,14 @@
     ) {
       return (
         <View style={styles.container}>
-          <Button style={[styles.button, styles.redButton]} onPress={blockUser}>
+          <LoadableButton
+            style={[styles.button, styles.redButton]}
+            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 +80,14 @@
     ) {
       return (
         <View style={styles.container}>
-          <Button
+          <LoadableButton
             style={[styles.button, styles.greenButton]}
             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 +98,22 @@
     ) {
       return (
         <View style={styles.container}>
-          <Button
+          <LoadableButton
             style={[styles.button, styles.greenButton]}
             onPress={friendUser}
+            isLoading={isLoadingFriendUser}
           >
             <Icon name="user-plus" size={12} color="white" />
-            <Text style={styles.buttonText}>Accept Friend Request</Text>
-          </Button>
-          <Button
+            <Text style={styles.buttonText}>Accept friend request</Text>
+          </LoadableButton>
+          <LoadableButton
             style={[styles.button, styles.redButton]}
             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 +123,36 @@
     ) {
       return (
         <View style={styles.container}>
-          <Button
+          <LoadableButton
             style={[styles.button, styles.redButton]}
             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
+        <LoadableButton
           style={[styles.button, styles.greenButton]}
           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={[styles.button, styles.redButton]}
+          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 +171,7 @@
     flex: 1,
     flexDirection: 'row',
     justifyContent: 'center',
+    alignItems: 'center',
     marginHorizontal: 5,
   },
   greenButton: {
@@ -160,6 +180,13 @@
   redButton: {
     backgroundColor: 'vibrantRedButton',
   },
+  buttonContentContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  buttonLoading: {
+    opacity: 0,
+  },
   buttonText: {
     fontSize: 11,
     color: 'white',
@@ -167,6 +194,9 @@
     textAlign: 'center',
     marginLeft: 5,
   },
+  loadingSpinner: {
+    position: 'absolute',
+  },
 };
 
 export default RelationshipPrompt;