Fade in Webamp

package.json

@@ -5,6 +5,7 @@
   "dependencies": {
     "algoliasearch": "^3.30.0",
     "async": "^2.6.0",
+    "classnames": "^2.2.6",
     "dominant-color": "^0.0.1",
     "glob": "^7.1.3",
     "image-average-color": "^1.0.0",

src/App.css

@@ -74,6 +74,16 @@ body.overlay-open .overlay {
   margin: 10px;
   color: white;
 }
+
 #focused-skin .metadata a {
   color: white;
 }
+
+#focused-skin .focused-preview {
+  -webkit-transition: opacity 400ms ease-in-out;
+  -moz-transition: opacity 400ms ease-in-out;
+  -ms-transition: opacity 400ms ease-in-out;
+}
+#focused-skin .focused-preview.loaded {
+  opacity: 0;
+}

src/FocusedSkin.js

@@ -1,4 +1,5 @@
 import React from "react";
+import ReactDOM from "react-dom";
 import { connect } from "react-redux";
 import WebampComponent from "./WebampComponent";
 import * as Utils from "./utils";
@@ -19,7 +20,17 @@ class FocusedSkin extends React.Component {
         height: this.props.initialHeight
       };
     }
+    this._imgWrapper = document.createElement("div");
+    this._imgWrapper.style.zIndex = "10002";
+    this._imgWrapper.style.position = "fixed";
+    this._imgWrapper.style.top = 0;
+    document.body.appendChild(this._imgWrapper);
   }
+
+  componentWillUnmount() {
+    document.body.removeChild(this._imgWrapper);
+  }
+
   componentDidMount() {
     setTimeout(() => {
       // TODO: Observe DOM and recenter
@@ -38,7 +49,7 @@ class FocusedSkin extends React.Component {
     };
   }
   render() {
-    return (
+    return ReactDOM.createPortal(
       <div
         id="focused-skin"
         style={{
@@ -63,7 +74,8 @@ class FocusedSkin extends React.Component {
           </div>
           <a href={Utils.skinUrlFromHash(this.props.hash)}>Download</a>
         </div>
-      </div>
+      </div>,
+      this._imgWrapper
     );
   }
 }

src/WebampComponent.js

@@ -1,5 +1,7 @@
 import React from "react";
+import ReactDOM from "react-dom";
 import { connect } from "react-redux";
+import classnames from "classnames";
 import * as ActionCreators from "./redux/actionCreators";
 
 class WebampComponent extends React.Component {
@@ -42,7 +44,7 @@ class WebampComponent extends React.Component {
         }
       ],
       hotkeys: true,
-      zIndex: 99999
+      zIndex: 1001
     });
 
     // TODO: Technically we should unsubscribe this on unmount
@@ -50,27 +52,31 @@ class WebampComponent extends React.Component {
 
     setTimeout(async () => {
       await this._webamp.renderWhenReady(this._ref);
+      this.setState({ loading: false });
     }, 400);
     if (this._unmounted === true) {
       return;
     }
-    // this.setState({ loading: false });
   }
 
   render() {
+    const { loading } = this.state;
     return (
-      <div
-        style={{ width: "100%", height: "100%" }}
-        ref={node => (this._ref = node)}
-      >
+      <div style={{ width: "100%", height: "100%" }}>
+        <div
+          ref={node => (this._ref = node)}
+          style={{ position: "absolute", width: "100%", height: "100%" }}
+        />
         <img
+          className={classnames("focused-preview", { loaded: !loading })}
           style={{
             width: "100%",
             height: "100%",
             // Webamp measure the scrollHeight of the container. Making this a
             // block element ensures the parent element's scrollHeight is not
             // expanded.
-            display: "block"
+            display: "block",
+            zIndex: 1
           }}
           src={this.props.screenshotUrl}
         />

src/redux/epics.js

@@ -12,7 +12,7 @@ const urlChangedEpic = actions =>
 
       if (action.location.pathname.startsWith("/skin/")) {
         const segments = action.location.pathname.split("/");
-        return { type: "SELECTED_SKIN", hash: segments[2] };
+        return of({ type: "SELECTED_SKIN", hash: segments[2] });
       }
       if (query == null) {
         return empty();

yarn.lock

@@ -1929,6 +1929,10 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
+classnames@^2.2.6:
+  version "2.2.6"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
+
 clean-css@4.1.x:
   version "4.1.9"
   resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.1.9.tgz#35cee8ae7687a49b98034f70de00c4edd3826301"