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,9 +1,12 @@
 // @flow
 
 import * as React from 'react';
-import { View, Text, TouchableOpacity } from 'react-native';
+import { View, Text, TouchableOpacity, ActivityIndicator } from 'react-native';
 import { ScrollView } from 'react-native-gesture-handler';
 
+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 {
   type UserSurfacedPermissionOption,
   type UserSurfacedPermission,
@@ -17,6 +20,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 = {
@@ -31,6 +35,10 @@
   +route: NavigationRoute<'CreateRolesScreen'>,
 };
 
+const createRolesLoadingStatusSelector = createLoadingStatusSelector(
+  modifyCommunityRoleActionTypes,
+);
+
 function CreateRolesScreen(props: CreateRolesScreenProps): React.Node {
   const {
     threadInfo,
@@ -39,6 +47,10 @@
     rolePermissions: defaultRolePermissions,
   } = props.route.params;
 
+  const createRolesLoadingStatus: LoadingStatus = useSelector(
+    createRolesLoadingStatusSelector,
+  );
+
   const [customRoleName, setCustomRoleName] =
     React.useState<string>(defaultRoleName);
   const [selectedPermissions, setSelectedPermissions] = React.useState<
@@ -135,9 +147,26 @@
     () =>
       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 (
@@ -217,6 +246,9 @@
     backgroundColor: 'panelForeground',
     marginTop: 10,
   },
+  activityIndicator: {
+    paddingRight: 15,
+  },
 };
 
 export default CreateRolesScreen;