Don't animate the overlay on page load

src/App.js

@@ -35,7 +35,7 @@ class App extends React.Component {
           }
         />
         {!this._sizeIsSet() || this.props.selectedSkinHash == null || (
-          <Overlay>
+          <Overlay shouldAnimate={this.props.overlayShouldAnimate}>
             <FocusedSkin initialHeight={rowHeight} initialWidth={columnWidth} />
           </Overlay>
         )}
@@ -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);

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() {

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);