optimistically preload all environment thumbnails

src/react-components/hub-create-panel.js

@@ -23,20 +23,20 @@ class HubCreatePanel extends Component {
     this.state = {
       ready: false,
       name: generateHubName(),
-      environmentIndex: Math.floor(Math.random() * props.environments.length)
+      environmentIndex: Math.floor(Math.random() * props.environments.length),
+      // HACK: expand on small screens by default to ensure scene selection possible.
+      // Eventually this could/should be done via media queries.
+      expanded: window.innerWidth < 420
     };
 
-    // HACK: expand on small screens by default to ensure scene selection possible.
-    // Eventually this could/should be done via media queries.
-    if (window.innerWidth < 420) {
-      (async () => {
-        const environmentThumbnail = this._getEnvironmentThumbnail(this.state.environmentIndex);
-        await this._preloadImage(environmentThumbnail.srcset);
-        this.setState({ ready: true, expanded: true });
-      })();
-    } else {
-      this.state.ready = true;
-    }
+    // Optimisticly preload all environment thumbnails
+    (async () => {
+      const environmentThumbnails = props.environments.map((_, i) => this._getEnvironmentThumbnail(i));
+      await Promise.all(
+        environmentThumbnails.map(environmentThumbnail => this._preloadImage(environmentThumbnail.srcset))
+      );
+      this.setState({ ready: true });
+    })();
   }
 
   _getEnvironmentThumbnail = environmentIndex => {