Merge pull request #1256 from Automattic/fix/dss-overlay-during-preload

Signup: DSS: Show loading overlay during image preloading
Automattic · Dec 4, 2015 · de5df67 · de5df67
2 parents 0410081 + fcbbc76
commit de5df67
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 15 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() {
@@ -88,10 +89,13 @@ export default React.createClass( {
 	},
 
 	handleSearch( searchString ) {
-		debug( 'processing search for', searchString );
 		if ( ! searchString ) {
 			return DynamicScreenshotsActions.resetScreenshots();
 		}
+		if ( searchString.length < 3 ) {
+			return;
+		}
+		debug( 'processing search for', searchString );
 		const { imageResultsByKey } = DSSImageStore.get();
 		if ( imageResultsByKey[ searchString ] ) {
 			return DynamicScreenshotsActions.updateScreenshotsFor( searchString );
@@ -100,6 +104,9 @@ export default React.createClass( {
 	},
 
 	renderImageLoader() {
+		if ( this.state.renderComplete ) {
+			return '';
+		}
 		debug( 'preloading image', this.state.dssImage.url );
 		const placeholder = <div>…</div>;
 		return (
@@ -119,6 +126,7 @@ export default React.createClass( {
 					<SearchCard id="dss-theme-selection__search__field"
 						autoFocus={ true }
 						delaySearch={ true }
+						delayTimeout={ 450 }
 						placeholder={ this.translate( 'e.g., games' ) }
 						onSearch={ this.handleSearch }
 					/>

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.dssImage // show the dynamic screenshot
 		} );
 
 		if ( markup && styles ) {

diff --git a/client/signup/steps/dss/style.scss b/client/signup/steps/dss/style.scss
@@ -53,16 +53,16 @@
 
 // Center themes, regardless of how many columns.
 .dss-theme-selection__screenshots__themes {
-       margin: 0 auto;
-       width: 300px;
+	margin: 0 auto;
+	width: 300px;
 
-       @include breakpoint( ">660px" ) {
-               width: 640px;
-       }
+	@include breakpoint( ">660px" ) {
+		width: 640px;
+	}
 
-       @include breakpoint( ">960px" ) {
-               width: 960px;
-       }
+	@include breakpoint( ">960px" ) {
+		width: 960px;
+	}
 }
 
 // Show the original screenshot image when the screenshot markup is loading.