Fade in from screenshot

src/assets/stylesheets/scene-ui.scss

@@ -10,7 +10,15 @@
   position: absolute;
   pointer-events: none;
   color: white;
+}
+
+:local(.whiteOverlay) {
   background-color: rgba(255, 255, 255, 0.2);
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  position: absolute;
 }
 
 :local(.grid) {
@@ -19,6 +27,7 @@
   grid-template-rows: 1fr 3fr 1fr;
   width: 100%;
   height: 100%;
+  background-color: rgba(255, 255, 255, 0.2);
 }
 
 :local(.mainPanel) {
@@ -71,6 +80,26 @@
 
 :local(.attribution) {
   font-size: 1.0em;
-  font-weight: light;
   white-space: wrap;
 }
+
+:local(.screenshot) {
+  position: absolute;
+  width: 110%;
+  height: 110%;
+  top: -40px;
+  left: -40px;
+  img {
+    width: 100%;
+    height: 100%;
+    background-color: black;
+  }
+
+  filter: blur(10px);
+}
+
+:local(.screenshotHidden) {
+  visibility: hidden;
+  opacity: 0;
+  transition: visibility 0s 1s, opacity 1s linear;
+}

src/react-components/scene-ui.js

 import React, { Component } from "react";
 import PropTypes from "prop-types";
-//import classNames from "classnames";
+import classNames from "classnames";
 import { IntlProvider, FormattedMessage, addLocaleData } from "react-intl";
 import en from "react-intl/locale-data/en";
 import styles from "../assets/stylesheets/scene-ui.scss";
@@ -20,10 +20,13 @@ class SceneUI extends Component {
     sceneId: PropTypes.string,
     sceneName: PropTypes.string,
     sceneDescription: PropTypes.string,
-    sceneAttribution: PropTypes.string
+    sceneAttribution: PropTypes.string,
+    sceneScreenshotURL: PropTypes.string
   };
 
-  state = {};
+  state = {
+    screenshotReady: false
+  };
 
   constructor(props) {
     super(props);
@@ -57,25 +60,20 @@ class SceneUI extends Component {
   };
 
   render() {
-    if (!this.props.sceneLoaded || !this.props.sceneId) {
-      return (
-        <IntlProvider locale={lang} messages={messages}>
-          <div className="loading-panel">
-            <div className="loader-wrap">
-              <div className="loader">
-                <div className="loader-center" />
-              </div>
-            </div>
-
-            <img className="loading-panel__logo" src="../assets/images/logo.svg" />
-          </div>
-        </IntlProvider>
-      );
-    }
+    const showScreenshot = !this.props.sceneLoaded || !this.props.sceneId;
 
     return (
       <IntlProvider locale={lang} messages={messages}>
         <div className={styles.ui}>
+          <div
+            className={classNames({
+              [styles.screenshot]: true,
+              [styles.screenshotHidden]: !showScreenshot
+            })}
+          >
+            <img src={this.props.sceneScreenshotURL} onLoad={() => this.setState({ screenshotReady: true })} />
+          </div>
+          <div className={styles.whiteOverlay} />
           <div className={styles.grid}>
             <div className={styles.mainPanel}>
               <a href="/" className={styles.logo}>

src/scene.js

@@ -132,7 +132,8 @@ const onReady = async () => {
   remountUI({
     sceneName: sceneInfo.name,
     sceneDescription: sceneInfo.description,
-    sceneAttribution: sceneInfo.attribution
+    sceneAttribution: sceneInfo.attribution,
+    sceneScreenshotURL: sceneInfo.screenshot_url
   });
 };