From 0bf79d623ea42946c98d010677b878a64cf740e0 Mon Sep 17 00:00:00 2001
From: Atul Madhugiri <atulm@berkeley.edu>
Date: Wed, 21 Jun 2023 18:21:02 -0400
Subject: [PATCH] [web] Add `showSpinner` prop to `Avatar` component

Summary:
Add `showSpinner?: boolean` prop to the `Avatar` component and display `LoadingIndicator` over `Avatar` if set to `true`.

---

Depends on D8283

Test Plan:
Looks as expected:
{F600886}

Reviewers: ashoat, ginsu, rohan

Reviewed By: rohan

Subscribers: tomek

Differential Revision: https://phab.comm.dev/D8285
---
 web/avatars/avatar.css                        | 11 +++++++
 web/avatars/avatar.react.js                   | 31 +++++++++++++++++--
 .../emoji-avatar-selection-modal.react.js     |  6 +++-
 3 files changed, 45 insertions(+), 3 deletions(-)

diff --git a/web/avatars/avatar.css b/web/avatars/avatar.css
index 86ba383a1f..27ca9ccbea 100644
--- a/web/avatars/avatar.css
+++ b/web/avatars/avatar.css
@@ -1,3 +1,14 @@
+.avatarContainer {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.editAvatarLoadingSpinner {
+  position: absolute;
+}
+
 .emojiContainer {
   display: flex;
   align-items: center;
diff --git a/web/avatars/avatar.react.js b/web/avatars/avatar.react.js
index 108f9ade19..507be4ed57 100644
--- a/web/avatars/avatar.react.js
+++ b/web/avatars/avatar.react.js
@@ -6,14 +6,16 @@ import * as React from 'react';
 import type { ResolvedClientAvatar } from 'lib/types/avatar-types.js';
 
 import css from './avatar.css';
+import LoadingIndicator from '../loading-indicator.react.js';
 
 type Props = {
   +avatarInfo: ResolvedClientAvatar,
   +size: 'micro' | 'small' | 'large' | 'profile',
+  +showSpinner?: boolean,
 };
 
 function Avatar(props: Props): React.Node {
-  const { avatarInfo, size } = props;
+  const { avatarInfo, size, showSpinner } = props;
 
   const containerSizeClassName = classnames({
     [css.imgContainer]: avatarInfo.type === 'image',
@@ -63,7 +65,32 @@ function Avatar(props: Props): React.Node {
     emojiSizeClassName,
   ]);
 
-  return avatar;
+  let loadingIndicatorSize;
+  if (size === 'micro') {
+    loadingIndicatorSize = 'small';
+  } else if (size === 'small') {
+    loadingIndicatorSize = 'small';
+  } else if (size === 'large') {
+    loadingIndicatorSize = 'medium';
+  } else {
+    loadingIndicatorSize = 'large';
+  }
+
+  const loadingIndicator = React.useMemo(
+    () => (
+      <div className={css.editAvatarLoadingSpinner}>
+        <LoadingIndicator status="loading" size={loadingIndicatorSize} />
+      </div>
+    ),
+    [loadingIndicatorSize],
+  );
+
+  return (
+    <div className={css.avatarContainer}>
+      {showSpinner ? loadingIndicator : null}
+      {avatar}
+    </div>
+  );
 }
 
 export default Avatar;
diff --git a/web/avatars/emoji-avatar-selection-modal.react.js b/web/avatars/emoji-avatar-selection-modal.react.js
index 68d4292a8e..567294c76c 100644
--- a/web/avatars/emoji-avatar-selection-modal.react.js
+++ b/web/avatars/emoji-avatar-selection-modal.react.js
@@ -114,7 +114,11 @@ function EmojiAvatarSelectionModal(): React.Node {
     <Modal name="Emoji avatar selection" size="large" onClose={popModal}>
       <div className={css.modalBody}>
         <div className={css.avatarContainer}>
-          <Avatar avatarInfo={pendingEmojiAvatar} size="profile" />
+          <Avatar
+            avatarInfo={pendingEmojiAvatar}
+            size="profile"
+            showSpinner={userAvatarSaveInProgress}
+          />
         </div>
         <div className={css.emojiPickerContainer}>
           <Picker data={data} theme="dark" onEmojiSelect={onEmojiSelect} />