From eb6f4e926606f8a67aa327adf527aca88ee467c0 Mon Sep 17 00:00:00 2001 From: Payton Swick Date: Thu, 3 Dec 2015 19:08:35 -0500 Subject: [PATCH 1/6] Signup: DSS: Show loading overlay during image preloading --- client/signup/steps/dss/index.jsx | 13 ++++++++----- client/signup/steps/dss/screenshot.jsx | 16 ++++++++++++++-- 2 files changed, 22 insertions(+), 7 deletions(-) diff --git a/client/signup/steps/dss/index.jsx b/client/signup/steps/dss/index.jsx index 3d4215c327855..e9fc79abdfbb3 100644 --- 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 =
…
; return ( Date: Thu, 3 Dec 2015 19:26:08 -0500 Subject: [PATCH 2/6] Signup: DSS: Fix indentation in scss --- client/signup/steps/dss/style.scss | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/client/signup/steps/dss/style.scss b/client/signup/steps/dss/style.scss index 124c0af01d55c..cc7ff0430c0a2 100644 --- 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. From 4cc97081d5841d9361c5a2b39c56b99a5b2c26af Mon Sep 17 00:00:00 2001 From: Payton Swick Date: Thu, 3 Dec 2015 19:35:07 -0500 Subject: [PATCH 3/6] Signup: DSS: Don't perform a search for fewer than 3 characters --- client/signup/steps/dss/index.jsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/client/signup/steps/dss/index.jsx b/client/signup/steps/dss/index.jsx index e9fc79abdfbb3..7ac923ea4c5a4 100644 --- a/client/signup/steps/dss/index.jsx +++ b/client/signup/steps/dss/index.jsx @@ -89,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 ); From ddbab391a136bc7bf988b4b0b7f2f0725fbc5f7c Mon Sep 17 00:00:00 2001 From: Payton Swick Date: Thu, 3 Dec 2015 19:52:25 -0500 Subject: [PATCH 4/6] Signup: DSS: Remove image preloader when image has loaded Prevents edge case where an image does not change even though the search changes, causing the `ImagePreloader` to never call its onLoad handler, resulting in an overlay sticking around forever. --- client/signup/steps/dss/index.jsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/client/signup/steps/dss/index.jsx b/client/signup/steps/dss/index.jsx index 7ac923ea4c5a4..895a7699134fb 100644 --- a/client/signup/steps/dss/index.jsx +++ b/client/signup/steps/dss/index.jsx @@ -104,9 +104,10 @@ export default React.createClass( { }, renderImageLoader() { - if ( ! this.state.renderComplete ) { - debug( 'preloading image', this.state.dssImage.url ); + if ( this.state.renderComplete ) { + return ''; } + debug( 'preloading image', this.state.dssImage.url ); const placeholder =
…
; return ( Date: Fri, 4 Dec 2015 11:17:54 -0500 Subject: [PATCH 5/6] Signup: DSS: Increase debounce timeout on search field --- client/signup/steps/dss/index.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/client/signup/steps/dss/index.jsx b/client/signup/steps/dss/index.jsx index 895a7699134fb..afd83a3bbb59c 100644 --- a/client/signup/steps/dss/index.jsx +++ b/client/signup/steps/dss/index.jsx @@ -126,6 +126,7 @@ export default React.createClass( { From fcbbc768cf2d5da893afd9e0b11825b926a89645 Mon Sep 17 00:00:00 2001 From: Payton Swick Date: Fri, 4 Dec 2015 13:27:23 -0500 Subject: [PATCH 6/6] Signup: DSS: show dynamic screenshot during image loading --- client/signup/steps/dss/screenshot.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/signup/steps/dss/screenshot.jsx b/client/signup/steps/dss/screenshot.jsx index a5193d5cd0d5e..f27de2c783c75 100644 --- a/client/signup/steps/dss/screenshot.jsx +++ b/client/signup/steps/dss/screenshot.jsx @@ -62,7 +62,7 @@ export default React.createClass( { const { markup, styles } = this.props.markupAndStyles || { markup: null, styles: null }; const containerClassNames = classnames( 'dss-screenshot', { 'is-loading': this.shouldShowLoadingIndicator(), // show the white overlay - 'is-preview-ready': markup && styles && this.props.renderComplete // show the dynamic screenshot + 'is-preview-ready': markup && styles && this.props.dssImage // show the dynamic screenshot } ); if ( markup && styles ) {