Signup: DSS: Only show previews when images are loaded

client/signup/steps/dss/index.jsx

@@ -14,6 +14,7 @@ import StepWrapper from 'signup/step-wrapper';
 import ThemeHelper from 'lib/themes/helpers';
 import DynamicScreenshotsActions from 'lib/dss/actions';
 import DSSImageStore from 'lib/dss/image-store';
+import ImagePreloader from 'components/image-preloader';
 
 const debug = debugFactory( 'calypso:dss' );
 
@@ -38,6 +39,36 @@ export default React.createClass( {
 		};
 	},
 
+	getInitialState() {
+		return {
+			isLoading: false,
+			renderComplete: false,
+			dssImage: null
+		};
+	},
+
+	componentWillMount() {
+		DSSImageStore.on( 'change', this.updateScreenshot );
+	},
+
+	componentWillUnmount() {
+		DSSImageStore.off( 'change', this.updateScreenshot );
+	},
+
+	updateScreenshot() {
+		const { isLoading, lastKey, imageResultsByKey } = DSSImageStore.get();
+		if ( ! imageResultsByKey[ lastKey ] ) {
+			return this.setState( Object.assign( {}, this.getInitialState(), { isLoading } ) );
+		}
+		const dssImage = imageResultsByKey[ lastKey ];
+		this.setState( { isLoading, dssImage } );
+	},
+
+	dssImageLoaded() {
+		debug( 'image preloading complete' );
+		this.setState( { renderComplete: true } );
+	},
+
 	handleSearch( searchString ) {
 		debug( 'processing search for', searchString );
 		if ( ! searchString ) {
@@ -50,6 +81,18 @@ export default React.createClass( {
 		DynamicScreenshotsActions.fetchDSSImageFor( searchString );
 	},
 
+	renderImageLoader() {
+		debug( 'preloading image', this.state.dssImage.url );
+		const placeholder = <div>…</div>;
+		return (
+			<ImagePreloader
+				className="dss-theme-selection__image-preloader"
+				onLoad={ this.dssImageLoaded }
+				src={ this.state.dssImage.url }
+				placeholder={ placeholder } />
+		);
+	},
+
 	renderContent() {
 		return (
 			<div>
@@ -71,6 +114,7 @@ export default React.createClass( {
 									themeName={ theme }
 									themeSlug={ ThemeHelper.getSlugFromName( theme ) }
 									themeRepoSlug={ 'pub/' + ThemeHelper.getSlugFromName( theme ) }
+									renderComplete={ this.state.renderComplete }
 									{ ...this.props }/>;
 							} ) }
 						</div>
@@ -84,6 +128,7 @@ export default React.createClass( {
 						}
 					} ) }
 				</p>
+				{ this.state.dssImage ? this.renderImageLoader() : '' }
 			</div>
 		);
 	},

client/signup/steps/dss/screenshot.jsx

@@ -33,15 +33,15 @@ export default React.createClass( {
 	propTypes: {
 		screenshotUrl: React.PropTypes.string.isRequired,
 		themeRepoSlug: React.PropTypes.string.isRequired,
-		themeSlug: React.PropTypes.string.isRequired
+		themeSlug: React.PropTypes.string.isRequired,
+		renderComplete: React.PropTypes.bool
 	},
 
 	getInitialState() {
 		return {
 			isLoading: false,
 			markup: '',
 			styles: '',
-			renderComplete: false,
 			dssImage: null
 		};
 	},
@@ -76,23 +76,20 @@ export default React.createClass( {
 		const dssImage = imageResultsByKey[ lastKey ];
 		debug( 'replacing images in ' + this.props.themeRepoSlug + ' screenshot with', dssImage.url );
 		const { markup, styles } = this.getMarkupAndStyles();
-		// Give styles time to render. Note this only happens on first markup
-		// render. Subsequent changes don't flicker unstyled markup.
-		setTimeout( () => this.setState( { renderComplete: true } ), 250 );
 		return this.setState( { dssImage, markup, styles, isLoading } );
 	},
 
 	render() {
 		const containerClassNames = classnames( 'dss-screenshot', {
 			'is-loading': this.state.isLoading,
-			'is-preview-ready': this.state.markup && this.state.styles && this.state.renderComplete
+			'is-preview-ready': this.state.markup && this.state.styles && this.props.renderComplete
 		} );
 
 		if ( this.state.markup && this.state.styles ) {
 			return (
 				<div className={ containerClassNames }>
 					<div className="dss-screenshot__original">
-						<img src={ this.props.screenshotUrl } alt={ this.translate( 'Loading...' ) } />
+						<img src={ this.props.screenshotUrl } alt={ this.translate( 'Loading…' ) } />
 					</div>
 					<div className="dss-screenshot__dynamic">
 						<style dangerouslySetInnerHTML={{ __html: this.state.styles }} />
@@ -107,7 +104,7 @@ export default React.createClass( {
 		return (
 			<div className={ containerClassNames }>
 				<div className="dss-screenshot__original">
-					<img src={ this.props.screenshotUrl } alt={ this.translate( 'Loading...' ) } />
+					<img src={ this.props.screenshotUrl } alt={ this.translate( 'Loading…' ) } />
 				</div>
 			</div>
 		);

client/signup/steps/dss/style.scss

@@ -143,3 +143,7 @@
 	padding: 0 20px;
 	text-align: center;
 }
+
+.dss-theme-selection__image-preloader {
+	display: none;
+}

client/signup/steps/dss/theme-thumbnail.jsx

@@ -51,7 +51,9 @@ export default React.createClass( {
 				<Screenshot
 					themeSlug={ this.props.themeSlug }
 					themeRepoSlug={ this.props.themeRepoSlug }
-					screenshotUrl={ this.getThumbnailUrl() } />
+					screenshotUrl={ this.getThumbnailUrl() }
+					renderComplete={ this.props.renderComplete }
+				/>
 				<span className="dss-theme-thumbnail__name">{ this.props.themeName }</span>
 			</div>
 		);