From 7dde2a05ce322806a42ee74eb6941adf142e6150 Mon Sep 17 00:00:00 2001
From: Jordan Eldredge <jordan@jordaneldredge.com>
Date: Sun, 2 Dec 2018 20:20:30 -0800
Subject: [PATCH] Don't animate the overlay on page load

---
 src/App.js             |  5 +++--
 src/Overlay.js         | 12 ++++++++----
 src/redux/selectors.js |  4 ++++
 3 files changed, 15 insertions(+), 6 deletions(-)

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