diff --git a/native/community-settings/tag-farcaster-channel/tag-channel-button.react.js b/native/community-settings/tag-farcaster-channel/tag-channel-button.react.js
--- a/native/community-settings/tag-farcaster-channel/tag-channel-button.react.js
+++ b/native/community-settings/tag-farcaster-channel/tag-channel-button.react.js
@@ -4,7 +4,7 @@
import { useNavigation } from '@react-navigation/native';
import invariant from 'invariant';
import * as React from 'react';
-import { Text, View, Platform } from 'react-native';
+import { Text, View, Platform, ActivityIndicator } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import {
@@ -12,6 +12,7 @@
useCreateOrUpdateFarcasterChannelTag,
} from 'lib/actions/community-actions.js';
import { NeynarClientContext } from 'lib/components/neynar-client-provider.react.js';
+import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
import type { NeynarChannel } from 'lib/types/farcaster-types.js';
import type { SetState } from 'lib/types/hook-types.js';
import { useCurrentUserFID } from 'lib/utils/farcaster-utils.js';
@@ -20,7 +21,10 @@
import Button from '../../components/button.react.js';
import { TagFarcasterChannelByNameRouteName } from '../../navigation/route-names.js';
import { useSelector } from '../../redux/redux-utils.js';
-import { useStyles } from '../../themes/colors.js';
+import { useStyles, useColors } from '../../themes/colors.js';
+
+const createOrUpdateFarcasterChannelTagStatusSelector =
+ createLoadingStatusSelector(createOrUpdateFarcasterChannelTagActionTypes);
type Props = {
+communityID: string,
@@ -32,6 +36,7 @@
const { navigate } = useNavigation();
+ const colors = useColors();
const styles = useStyles(unboundStyles);
const fid = useCurrentUserFID();
@@ -150,11 +155,33 @@
showActionSheetWithOptions,
]);
+ const createOrUpdateFarcasterChannelTagStatus = useSelector(
+ createOrUpdateFarcasterChannelTagStatusSelector,
+ );
+ const isLoadingCreateOrUpdateFarcasterChannelTag =
+ createOrUpdateFarcasterChannelTagStatus === 'loading';
+
+ const buttonContent = React.useMemo(() => {
+ if (isLoadingCreateOrUpdateFarcasterChannelTag) {
+ return (
+
+ );
+ }
+
+ return Tag channel;
+ }, [
+ colors.panelForegroundLabel,
+ isLoadingCreateOrUpdateFarcasterChannelTag,
+ styles.buttonText,
+ ]);
+
return (
-