Skip to content
This repository has been archived by the owner on Oct 22, 2023. It is now read-only.

Commit

Permalink
Smoother transition when newtab image is slow
Browse files Browse the repository at this point in the history
  • Loading branch information
Josiah Keller committed Feb 7, 2017
1 parent e4b8830 commit 97aeb3c
Show file tree
Hide file tree
Showing 2 changed files with 59 additions and 8 deletions.
41 changes: 41 additions & 0 deletions js/about/newtab.js
Original file line number Diff line number Diff line change
Expand Up @@ -25,13 +25,17 @@ const ipc = window.chrome.ipcRenderer
require('../../less/about/newtab.less')
require('../../node_modules/font-awesome/css/font-awesome.css')

const IMAGE_SLOW_THRESHOLD = 25

class NewTabPage extends React.Component {
constructor () {
super()
this.state = {
showSiteRemovalNotification: false,
backgroundImage: this.randomBackgroundImage,
imageLoadFailed: false,
imageLoadCompleted: false,
imageLoadSlow: false,
updatedStamp: undefined,
showEmptyPage: true
}
Expand All @@ -53,6 +57,10 @@ class NewTabPage extends React.Component {
})
})
}
componentDidMount () {
this.slowBackgroundTimeout = setTimeout(this.slowBackground.bind(this), IMAGE_SLOW_THRESHOLD)
}

get randomBackgroundImage () {
const image = Object.assign({}, backgrounds[Math.floor(Math.random() * backgrounds.length)])
image.style = {backgroundImage: 'url(' + image.source + ')'}
Expand Down Expand Up @@ -216,6 +224,30 @@ class NewTabPage extends React.Component {
: this.fallbackImage
})
}
/**
* Displays background image once it loads
*/
onImageLoadCompleted () {
this.setState({
imageLoadCompleted: true
})
clearTimeout(this.slowBackgroundTimeout)
}
/**
* If background image is taking a long time to load, makes it fade in
*/
slowBackground () {
this.setState({
imageLoadSlow: true
})
}
/**
* Helper for background className
*/
get backgroundClassName () {
return 'backgroundContainer' +
(this.state.imageLoadCompleted ? (this.state.imageLoadSlow ? ' backgroundLoadedSlow' : ' backgroundLoaded') : '')
}

render () {
// don't render if user prefers an empty page
Expand All @@ -236,6 +268,15 @@ class NewTabPage extends React.Component {
const gridLayout = this.gridLayout

return <div className='dynamicBackground'>
<div className={this.backgroundClassName} style={this.state.backgroundImage.style}>
{
this.state.backgroundImage
? <img src={this.state.backgroundImage.source}
onLoad={this.onImageLoadCompleted.bind(this)}
onError={this.onImageLoadFailed.bind(this)} />
: null
}
</div>
<div className='gradient' />
<div className='content'>
<main>
Expand Down
26 changes: 18 additions & 8 deletions less/about/newtab.less
Original file line number Diff line number Diff line change
Expand Up @@ -20,12 +20,6 @@ body {
background: #fff;
}

body, .dynamicBackground {
opacity: 0;
animation: fadeIn 200ms;
animation-fill-mode: forwards;
}

.copyrightNotice {
visibility: hidden !important;
-webkit-user-select: none;
Expand All @@ -50,14 +44,30 @@ ul {
}

.dynamicBackground {
display: flex;
flex: 1;
}

.backgroundContainer {
background-position: top center;
background-repeat: no-repeat;
background-size: cover;
display: flex;
flex: 1;
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
opacity: 0;
> img {
display: none;
}
&.backgroundLoaded {
opacity: 1;
}
&.backgroundLoadedSlow {
animation: fadeIn 200ms;
animation-fill-mode: forwards;
}
}

.gradient {
Expand Down

0 comments on commit 97aeb3c

Please sign in to comment.