Smoother transition when newtab image is slow

Fixes #5309

js/about/newtab.js

@@ -26,12 +26,16 @@ 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,
       imageLoadFailed: false,
+      imageLoadCompleted: false,
+      imageLoadSlow: false,
       updatedStamp: undefined,
       showEmptyPage: true,
       showImages: false,
@@ -61,6 +65,7 @@ class NewTabPage extends React.Component {
       })
     })
   }
+
   get showImages () {
     return this.state.showImages && !!this.state.backgroundImage
   }
@@ -227,6 +232,34 @@ 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') : '')
+  }
+
+  componentDidMount () {
+    this.slowBackgroundTimeout = setTimeout(this.slowBackground.bind(this), IMAGE_SLOW_THRESHOLD)
+  }
 
   render () {
     // don't render if user prefers an empty page
@@ -249,12 +282,17 @@ class NewTabPage extends React.Component {
       backgroundProps.style = this.state.backgroundImage.style
       gradientClassName = 'bgGradient'
     }
-    return <div className='dynamicBackground' {...backgroundProps}>
-      {
-        this.showImages
-          ? <img src={this.state.backgroundImage.source} onError={this.onImageLoadFailed.bind(this)} data-test-id='backgroundImage' />
-          : null
-      }
+    return <div className='dynamicBackground'>
+      <div className={this.backgroundClassName} {...backgroundProps}>
+        {
+          this.showImages
+            ? <img src={this.state.backgroundImage.source}
+              onLoad={this.onImageLoadCompleted.bind(this)}
+              onError={this.onImageLoadFailed.bind(this)}
+              data-test-id='backgroundImage' />
+            : null
+        }
+      </div>
       <div className={gradientClassName} />
       <div className='content'>
         <main>

less/about/newtab.less

@@ -20,7 +20,7 @@ body {
   background: #fff;
 }
 
-body, .dynamicBackground, bgGradient {
+bgGradient {
   opacity: 0;
   animation: fadeIn 200ms;
   animation-fill-mode: forwards;
@@ -45,14 +45,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 {