move avatar selector loader outside iframe

src/assets/stylesheets/avatar-selector.scss

 @import 'shared';
-@import 'loader';
 
 #selector-root {
   height: 100%;

src/assets/stylesheets/profile.scss

@@ -9,11 +9,18 @@
   display: flex;
   pointer-events: auto;
 
+  &__avatar-selector-container {
+    flex: 1;
+    position: relative;
+    margin-bottom: 0.5em;
+  }
+
   &__avatar-selector {
     border: none;
     width: 95%;
     height: 100%;
-    margin: 1em 0;
+    z-index: 1;
+    position: relative;
   }
 
   &__form {

src/react-components/profile-entry-panel.js

@@ -92,11 +92,20 @@ class ProfileEntryPanel extends Component {
                 ref={inp => (this.nameInput = inp)}
               />
             </label>
-            <iframe
-              className="profile-entry__avatar-selector"
-              src={`/${this.props.htmlPrefix}avatar-selector.html#avatar_id=${this.state.avatarId}`}
-              ref={ifr => (this.avatarSelector = ifr)}
-            />
+            <div className="profile-entry__avatar-selector-container">
+              <div className="loading-panel">
+                <div className="loader-wrap">
+                  <div className="loader">
+                    <div className="loader-center" />
+                  </div>
+                </div>
+              </div>
+              <iframe
+                className="profile-entry__avatar-selector"
+                src={`/${this.props.htmlPrefix}avatar-selector.html#avatar_id=${this.state.avatarId}`}
+                ref={ifr => (this.avatarSelector = ifr)}
+              />
+            </div>
             <input className="profile-entry__form-submit" type="submit" value={formatMessage({ id: "profile.save" })} />
             <div className="profile-entry__box__links">
               <a target="_blank" rel="noopener noreferrer" href="https://github.com/mozilla/hubs/blob/master/TERMS.md">