Smoother transition when newtab image is slow

Fixes brave#5309
josiah-keller · Jan 10, 2017 · 6dcbe4e · 6dcbe4e
1 parent 14b3bf7
commit 6dcbe4e
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 14 deletions.
diff --git a/js/about/newtab.js b/js/about/newtab.js
@@ -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
     }
@@ -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 + ')'}
@@ -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
@@ -235,12 +267,16 @@ class NewTabPage extends React.Component {
 
     const gridLayout = this.gridLayout
 
-    return <div className='dynamicBackground' style={this.state.backgroundImage.style}>
-      {
-        this.state.backgroundImage
-          ? <img src={this.state.backgroundImage.source} onError={this.onImageLoadFailed.bind(this)} />
-          : null
-      }
+    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>

diff --git a/less/about/newtab.less b/less/about/newtab.less
@@ -20,12 +20,6 @@ body {
   background: #fff;
 }
 
-body, .dynamicBackground, .gradient {
-  opacity: 0;
-  animation: fadeIn 200ms;
-  animation-fill-mode: forwards;
-}
-
 .copyrightNotice {
   -webkit-user-select: none;
   cursor: default;
@@ -49,14 +43,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 {