Signup: DSS: Show loading overlay during image preloading

Automattic · Dec 4, 2015 · 3ec00c8 · 3ec00c8
1 parent 923e00a
commit 3ec00c8
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 7 deletions.
diff --git a/client/signup/steps/dss/index.jsx b/client/signup/steps/dss/index.jsx
@@ -51,13 +51,13 @@ export default React.createClass( {
 
 	componentWillMount() {
 		ThemePreviewStore.on( 'change', this.updateMarkup );
-		DSSImageStore.on( 'change', this.updateScreenshot );
+		DSSImageStore.on( 'change', this.updateScreenshots );
 		this.loadThemePreviews();
 	},
 
 	componentWillUnmount() {
 		ThemePreviewStore.off( 'change', this.updateMarkup );
-		DSSImageStore.off( 'change', this.updateScreenshot );
+		DSSImageStore.off( 'change', this.updateScreenshots );
 	},
 
 	componentWillReceiveProps() {
@@ -73,13 +73,14 @@ export default React.createClass( {
 		this.setState( { markupAndStyles: ThemePreviewStore.get() } );
 	},
 
-	updateScreenshot() {
+	updateScreenshots() {
 		const { isLoading, lastKey, imageResultsByKey } = DSSImageStore.get();
+		// If there is no search currently happening or no results for a current search...
 		if ( ! imageResultsByKey[ lastKey ] ) {
 			return this.setState( { isLoading, renderComplete: false, dssImage: null } );
 		}
 		const dssImage = imageResultsByKey[ lastKey ];
-		this.setState( { isLoading, dssImage } );
+		this.setState( { isLoading, dssImage, renderComplete: false } );
 	},
 
 	dssImageLoaded() {
@@ -100,7 +101,9 @@ export default React.createClass( {
 	},
 
 	renderImageLoader() {
-		debug( 'preloading image', this.state.dssImage.url );
+		if ( ! this.state.renderComplete ) {
+			debug( 'preloading image', this.state.dssImage.url );
+		}
 		const placeholder = <div>…</div>;
 		return (
 			<ImagePreloader

diff --git a/client/signup/steps/dss/screenshot.jsx b/client/signup/steps/dss/screenshot.jsx
@@ -30,6 +30,18 @@ export default React.createClass( {
 		renderComplete: React.PropTypes.bool
 	},
 
+	shouldShowLoadingIndicator() {
+		// If the store is waiting on results, show loading.
+		if ( this.props.isLoading ) {
+			return true;
+		}
+		// If the image is preloading, show loading.
+		if ( this.props.dssImage && ! this.props.renderComplete ) {
+			return true;
+		}
+		return false;
+	},
+
 	getAdditionalStyles( imageUrl ) {
 		return `#theme-${this.props.themeSlug} .hero.with-featured-image{background-image:url(${imageUrl});}`;
 	},
@@ -49,8 +61,8 @@ export default React.createClass( {
 	render() {
 		const { markup, styles } = this.props.markupAndStyles || { markup: null, styles: null };
 		const containerClassNames = classnames( 'dss-screenshot', {
-			'is-loading': this.props.isLoading,
-			'is-preview-ready': markup && styles && this.props.renderComplete
+			'is-loading': this.shouldShowLoadingIndicator(), // show the white overlay
+			'is-preview-ready': markup && styles && this.props.renderComplete // show the dynamic screenshot
 		} );
 
 		if ( markup && styles ) {