diff --git a/native/roles/create-roles-screen.react.js b/native/roles/create-roles-screen.react.js
--- a/native/roles/create-roles-screen.react.js
+++ b/native/roles/create-roles-screen.react.js
@@ -1,8 +1,17 @@
 // @flow
 
 import * as React from 'react';
-import { View, Text, TouchableOpacity, ScrollView } from 'react-native';
-
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  ScrollView,
+  ActivityIndicator,
+} from 'react-native';
+
+import { modifyCommunityRoleActionTypes } from 'lib/actions/thread-actions.js';
+import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
+import type { LoadingStatus } from 'lib/types/loading-types.js';
 import {
   userSurfacedPermissionOptions,
   type UserSurfacedPermissionOption,
@@ -16,6 +25,7 @@
 import SWMansionIcon from '../components/swmansion-icon.react.js';
 import TextInput from '../components/text-input.react.js';
 import type { NavigationRoute } from '../navigation/route-names.js';
+import { useSelector } from '../redux/redux-utils.js';
 import { useStyles } from '../themes/colors.js';
 
 export type CreateRolesScreenParams = {
@@ -30,6 +40,10 @@
   +route: NavigationRoute<'CreateRolesScreen'>,
 };
 
+const createRolesLoadingStatusSelector = createLoadingStatusSelector(
+  modifyCommunityRoleActionTypes,
+);
+
 function CreateRolesScreen(props: CreateRolesScreenProps): React.Node {
   const {
     threadInfo,
@@ -38,6 +52,10 @@
     rolePermissions: defaultRolePermissions,
   } = props.route.params;
 
+  const createRolesLoadingStatus: LoadingStatus = useSelector(
+    createRolesLoadingStatusSelector,
+  );
+
   const [customRoleName, setCustomRoleName] =
     React.useState<string>(defaultRoleName);
   const [selectedPermissions, setSelectedPermissions] = React.useState<
@@ -131,9 +149,26 @@
   React.useEffect(() => {
     props.navigation.setOptions({
       // eslint-disable-next-line react/display-name
-      headerRight: () => <CreateRolesHeaderRightButton route={props.route} />,
+      headerRight: () => {
+        if (createRolesLoadingStatus === 'loading') {
+          return (
+            <ActivityIndicator
+              size="small"
+              color="white"
+              style={styles.activityIndicator}
+            />
+          );
+        }
+
+        return <CreateRolesHeaderRightButton route={props.route} />;
+      },
     });
-  }, [props.navigation, props.route]);
+  }, [
+    createRolesLoadingStatus,
+    props.navigation,
+    styles.activityIndicator,
+    props.route,
+  ]);
 
   return (
     <View>
@@ -212,6 +247,9 @@
     backgroundColor: 'panelForeground',
     marginTop: 10,
   },
+  activityIndicator: {
+    paddingRight: 15,
+  },
 };
 
 export default CreateRolesScreen;