diff --git a/web/avatars/emoji-avatar-selection-modal.css b/web/avatars/emoji-avatar-selection-modal.css --- a/web/avatars/emoji-avatar-selection-modal.css +++ b/web/avatars/emoji-avatar-selection-modal.css @@ -25,3 +25,10 @@ display: flex; flex-direction: column; } + +div.saveAvatarButtonContent { + display: flex; + justify-content: center; + align-items: center; + min-height: 24px; +} diff --git a/web/avatars/emoji-avatar-selection-modal.react.js b/web/avatars/emoji-avatar-selection-modal.react.js --- a/web/avatars/emoji-avatar-selection-modal.react.js +++ b/web/avatars/emoji-avatar-selection-modal.react.js @@ -20,6 +20,7 @@ import Avatar from './avatar.react.js'; import css from './emoji-avatar-selection-modal.css'; import Button, { buttonThemes } from '../components/button.react.js'; +import LoadingIndicator from '../loading-indicator.react.js'; import Modal from '../modals/modal.react.js'; import ColorSelector from '../modals/threads/color-selector.react.js'; import { useSelector } from '../redux/redux-utils.js'; @@ -30,7 +31,7 @@ const editUserAvatarContext = React.useContext(EditUserAvatarContext); invariant(editUserAvatarContext, 'editUserAvatarContext should be set'); - const { setUserAvatar } = editUserAvatarContext; + const { setUserAvatar, userAvatarSaveInProgress } = editUserAvatarContext; const currentUserInfo = useSelector(state => state.currentUserInfo); const currentUserAvatar: ClientAvatar = getAvatarForUser(currentUserInfo); @@ -69,6 +70,13 @@ [pendingEmojiAvatar, setUserAvatar], ); + let saveButtonContent; + if (userAvatarSaveInProgress) { + saveButtonContent = ; + } else { + saveButtonContent = 'Save Avatar'; + } + return (
@@ -89,8 +97,11 @@ variant="filled" buttonColor={buttonThemes.standard} onClick={onSaveAvatar} + disabled={userAvatarSaveInProgress} > - Save Avatar +
+ {saveButtonContent} +
diff --git a/web/sidebar/community-creation/community-creation-modal.react.js b/web/sidebar/community-creation/community-creation-modal.react.js --- a/web/sidebar/community-creation/community-creation-modal.react.js +++ b/web/sidebar/community-creation/community-creation-modal.react.js @@ -193,6 +193,7 @@ buttonColor={ errorMessage ? buttonThemes.danger : buttonThemes.standard } + disabled={createNewCommunityLoadingStatus === 'loading'} >
{buttonContent}