diff --git a/src/react-components/hub-create-panel.js b/src/react-components/hub-create-panel.js index fe7863ced2404738625347846141c6722126dd22..0b74d55b2698d51f6688e23e02e871177ecea436 100644 --- a/src/react-components/hub-create-panel.js +++ b/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 => { @@ -83,10 +83,10 @@ class HubCreatePanel extends Component { return new RegExp(HUB_NAME_PATTERN).test(this.state.name) && new RegExp(hubAlphaPattern).test(this.state.name); }; - _preloadImage = async src => { + _preloadImage = async srcset => { const img = new Image(); const imgLoad = new Promise(resolve => img.addEventListener("load", resolve)); - img.srcset = src; + img.srcset = srcset; await imgLoad; }; diff --git a/yarn.lock b/yarn.lock index 58de512e5f541cd1abacd21b389c2a4395b90bce..63079940bac14f9025e01f590ec2de5b7eca9710 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5413,7 +5413,7 @@ neo-async@^2.5.0: "networked-aframe@https://github.com/mozillareality/networked-aframe#mr-social-client/master": version "0.6.1" - resolved "https://github.com/mozillareality/networked-aframe#2b91c905ae5c9b21f98131485eb9207001a942ab" + resolved "https://github.com/mozillareality/networked-aframe#74c00c8c4568c8ac5ffa6ef93f342ce0138684ce" dependencies: easyrtc "1.1.0" express "^4.10.7"