Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Signup: DSS: Show loading overlay during image preloading #1256

Merged
merged 6 commits into from
Dec 4, 2015
Merged

Signup: DSS: Show loading overlay during image preloading #1256

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
eb6f4e9
Signup: DSS: Show loading overlay during image preloading
sirbrillig Dec 4, 2015
85f31ae
Signup: DSS: Fix indentation in scss
sirbrillig Dec 4, 2015
4cc9708
Signup: DSS: Don't perform a search for fewer than 3 characters
sirbrillig Dec 4, 2015
ddbab39
Signup: DSS: Remove image preloader when image has loaded
sirbrillig Dec 4, 2015
cd4f71c
Signup: DSS: Increase debounce timeout on search field
sirbrillig Dec 4, 2015
fcbbc76
Signup: DSS: show dynamic screenshot during image loading
sirbrillig Dec 4, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 13 additions & 5 deletions client/signup/steps/dss/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand All @@ -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() {
Expand All @@ -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 );
Expand All @@ -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 (
Expand All @@ -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 }
/>
Expand Down
16 changes: 14 additions & 2 deletions client/signup/steps/dss/screenshot.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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});}`;
},
Expand All @@ -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 ) {
Expand Down
16 changes: 8 additions & 8 deletions client/signup/steps/dss/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down