diff --git a/src/assets/stylesheets/avatar-selector.scss b/src/assets/stylesheets/avatar-selector.scss index 3485ea3de016e7bc7f895a4232fa9136dd1e04f1..21553781a0612dc2d17d3fa2d7a627409a6b8d47 100644 --- a/src/assets/stylesheets/avatar-selector.scss +++ b/src/assets/stylesheets/avatar-selector.scss @@ -1,5 +1,4 @@ @import 'shared'; -@import 'loader'; #selector-root { height: 100%; diff --git a/src/assets/stylesheets/profile.scss b/src/assets/stylesheets/profile.scss index 862d1fc3d7e3ac11d5dcea13158781068ce8426b..ddb561171fbdcadfd5f83845602088b5b7143565 100644 --- a/src/assets/stylesheets/profile.scss +++ b/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 { diff --git a/src/react-components/profile-entry-panel.js b/src/react-components/profile-entry-panel.js index e10f9bc6c6f7e42b112f43dfe5d7dcb83b1f5f50..06e889e4158d05c70b881fc820656b93adedc8ad 100644 --- a/src/react-components/profile-entry-panel.js +++ b/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">