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