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
@@ -2,6 +2,9 @@
position: relative;
height: 112px;
width: 112px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
}
.editAvatarBadge {
@@ -24,3 +27,7 @@
.editAvatarBadge:hover {
filter: brightness(0.8);
}
+
+.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
@@ -1,20 +1,34 @@
// @flow
+import invariant from 'invariant';
import * as React from 'react';
+import { EditUserAvatarContext } from 'lib/components/base-edit-user-avatar-provider.react.js';
+
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 =