From ce4888d64b5f6931981c501fee68e295d35b5110 Mon Sep 17 00:00:00 2001
From: Atul Madhugiri <atulm@berkeley.edu>
Date: Wed, 21 Jun 2023 18:33:09 -0400
Subject: [PATCH] [web] Remove `LoadingIndicator` from `EditUserAvatar`

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
---
 web/avatars/edit-user-avatar.css      |  4 ----
 web/avatars/edit-user-avatar.react.js | 12 +++++-------
 web/avatars/user-avatar.react.js      | 11 +++++++++--
 3 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/web/avatars/edit-user-avatar.css b/web/avatars/edit-user-avatar.css
index dbfebbe881..9243b45154 100644
--- 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
index e6658a3955..13bbe64382 100644
--- a/web/avatars/edit-user-avatar.react.js
+++ b/web/avatars/edit-user-avatar.react.js
@@ -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,
@@ -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>
   );
diff --git a/web/avatars/user-avatar.react.js b/web/avatars/user-avatar.react.js
index 94cfa9dc59..59ac3d7ccd 100644
--- a/web/avatars/user-avatar.react.js
+++ b/web/avatars/user-avatar.react.js
@@ -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,
@@ -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;