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 ( - ); }