Skip to content

Commit

Permalink
[web] Remove LoadingIndicator from EditUserAvatar
Browse files Browse the repository at this point in the history
Summary:
In D8285 we introduced a `showSpinner` prop to the `Avatar` component. In this diff we remove the `LoadingIndicator` from `EditUserAvatar` component and instead pass `showSpinner` down to `Avatar` to take advantage of that.

This deduplicates redundant spinner code. Now that we have a "toggleable" spinner in `Avatar`, components derived from it can use that spinner "for free."

---

Depends on D8285

Test Plan:
Things continue to look as expected:

{F600929}

Reviewers: ashoat, ginsu, rohan

Reviewed By: rohan

Subscribers: tomek

Differential Revision: https://phab.comm.dev/D8286
  • Loading branch information
atulsmadhugiri committed Jun 23, 2023
1 parent 0bf79d6 commit ce4888d
Show file tree
Hide file tree
Showing 3 changed files with 14 additions and 13 deletions.
4 changes: 0 additions & 4 deletions web/avatars/edit-user-avatar.css
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,3 @@
justify-content: center;
align-items: center;
}

.editAvatarLoadingSpinner {
position: absolute;
}
12 changes: 5 additions & 7 deletions web/avatars/edit-user-avatar.react.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,6 @@ import { EditUserAvatarContext } from 'lib/components/base-edit-user-avatar-prov
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,
Expand All @@ -26,10 +23,11 @@ function EditUserAvatar(props: Props): React.Node {

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>
);
Expand Down
11 changes: 9 additions & 2 deletions web/avatars/user-avatar.react.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,11 @@ import { useSelector } from '../redux/redux-utils.js';
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,
Expand All @@ -25,7 +26,13 @@ function UserAvatar(props: Props): React.Node {

const resolvedUserAvatar = useENSResolvedAvatar(avatarInfo, userInfo);

return <Avatar size={size} avatarInfo={resolvedUserAvatar} />;
return (
<Avatar
size={size}
avatarInfo={resolvedUserAvatar}
showSpinner={showSpinner}
/>
);
}

export default UserAvatar;

0 comments on commit ce4888d

Please sign in to comment.