diff --git a/web/avatars/edit-user-avatar.css b/web/avatars/edit-user-avatar.css --- a/web/avatars/edit-user-avatar.css +++ b/web/avatars/edit-user-avatar.css @@ -6,7 +6,3 @@ justify-content: center; align-items: center; } - -.editAvatarLoadingSpinner { - position: absolute; -} diff --git a/web/avatars/edit-user-avatar.react.js b/web/avatars/edit-user-avatar.react.js --- a/web/avatars/edit-user-avatar.react.js +++ b/web/avatars/edit-user-avatar.react.js @@ -8,9 +8,6 @@ import EditUserAvatarMenu from './edit-user-avatar-menu.react.js'; import css from './edit-user-avatar.css'; import UserAvatar from './user-avatar.react.js'; -import LoadingIndicator from '../loading-indicator.react.js'; - -const loadingSpinner = <LoadingIndicator status="loading" size="large" />; type Props = { +userID: ?string, @@ -26,10 +23,11 @@ return ( <div className={css.editUserAvatarContainer}> - <div className={css.editAvatarLoadingSpinner}> - {userAvatarSaveInProgress ? loadingSpinner : null} - </div> - <UserAvatar userID={userID} size="profile" /> + <UserAvatar + userID={userID} + size="profile" + showSpinner={userAvatarSaveInProgress} + /> {!userAvatarSaveInProgress ? <EditUserAvatarMenu /> : null} </div> ); diff --git a/web/avatars/user-avatar.react.js b/web/avatars/user-avatar.react.js --- a/web/avatars/user-avatar.react.js +++ b/web/avatars/user-avatar.react.js @@ -13,10 +13,11 @@ type Props = { +userID: ?string, +size: 'micro' | 'small' | 'large' | 'profile', + +showSpinner?: boolean, }; function UserAvatar(props: Props): React.Node { - const { userID, size } = props; + const { userID, size, showSpinner } = props; const userInfo = useSelector(state => userID ? state.userStore.userInfos[userID] : null, @@ -25,7 +26,13 @@ const resolvedUserAvatar = useENSResolvedAvatar(avatarInfo, userInfo); - return <Avatar size={size} avatarInfo={resolvedUserAvatar} />; + return ( + <Avatar + size={size} + avatarInfo={resolvedUserAvatar} + showSpinner={showSpinner} + /> + ); } export default UserAvatar;