diff --git a/src/App.js b/src/App.js index 463ea03b..bbd67944 100644 --- a/src/App.js +++ b/src/App.js @@ -35,7 +35,7 @@ class App extends React.Component { } /> {!this._sizeIsSet() || this.props.selectedSkinHash == null || ( - + )} @@ -45,7 +45,8 @@ class App extends React.Component { } const mapStateToProps = state => ({ - selectedSkinHash: Selectors.getSelectedSkinHash(state) + selectedSkinHash: Selectors.getSelectedSkinHash(state), + overlayShouldAnimate: Selectors.overlayShouldAnimate(state) }); export default connect(mapStateToProps)(App); diff --git a/src/Overlay.js b/src/Overlay.js index 69506e31..d9af7ce3 100644 --- a/src/Overlay.js +++ b/src/Overlay.js @@ -17,11 +17,15 @@ class Overlay extends React.Component { componentDidMount() { window.document.addEventListener("keydown", this._handleKeyDown); // TODO: This is technically a race condition, since we could unmount before this fires. - requestAnimationFrame(() => { - // This does not seem to work the first time. - // This should _not_ work on page load + if (this.props.shouldAnimate) { + setTimeout(() => { + // This does not seem to work the first time. + // This should _not_ work on page load + document.body.classList.add("overlay-open"); + }, 0); + } else { document.body.classList.add("overlay-open"); - }); + } } componentWillUnmount() { diff --git a/src/redux/selectors.js b/src/redux/selectors.js index 810d6618..54aed78a 100644 --- a/src/redux/selectors.js +++ b/src/redux/selectors.js @@ -9,6 +9,10 @@ export function getSelectedSkinPosition(state) { return state.selectedSkinPosition; } +export function overlayShouldAnimate(state) { + return getSelectedSkinPosition(state) != null; +} + export function getSelectedSkinUrl(state) { const hash = getSelectedSkinHash(state); return hash == null ? null : Utils.screenshotUrlFromHash(hash);