From 4dac6c984b8ab5a19463d9a34033da7d9ed03abe Mon Sep 17 00:00:00 2001
From: Josiah Keller <josiah@josiahkeller.com>
Date: Mon, 9 Jan 2017 20:18:08 -0500
Subject: [PATCH] Smoother transition when newtab image is slow

Fixes #5309
---
 js/about/newtab.js     | 34 ++++++++++++++++++++++++++++------
 less/about/newtab.less | 20 +++++++++++++++++---
 2 files changed, 45 insertions(+), 9 deletions(-)

diff --git a/js/about/newtab.js b/js/about/newtab.js
index 3ce36aa432e..1b5236b4b83 100644
--- a/js/about/newtab.js
+++ b/js/about/newtab.js
@@ -32,6 +32,7 @@ class NewTabPage extends React.Component {
     this.state = {
       showSiteRemovalNotification: false,
       imageLoadFailed: false,
+      imageLoadCompleted: false,
       updatedStamp: undefined,
       showEmptyPage: true,
       showImages: false,
@@ -61,6 +62,7 @@ class NewTabPage extends React.Component {
       })
     })
   }
+
   get showImages () {
     return this.state.showImages && !!this.state.backgroundImage
   }
@@ -227,6 +229,21 @@ class NewTabPage extends React.Component {
         : this.fallbackImage
     })
   }
+  /**
+   * Displays background image once it loads
+   */
+  onImageLoadCompleted () {
+    this.setState({
+      imageLoadCompleted: true
+    })
+  }
+  /**
+   * Helper for background className
+   */
+  get backgroundClassName () {
+    return 'backgroundContainer' +
+      (this.state.imageLoadCompleted ? ' backgroundLoaded' : '')
+  }
 
   render () {
     // don't render if user prefers an empty page
@@ -249,12 +266,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>
diff --git a/less/about/newtab.less b/less/about/newtab.less
index a55b80b76d4..592b4318fb6 100644
--- a/less/about/newtab.less
+++ b/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,28 @@ ul {
 }
 
 .dynamicBackground {
+  display: flex;
+  flex: 1;
+  background-color: #000;
+}
+
+.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 {
+    animation: fadeIn 200ms;
+    animation-fill-mode: forwards;
+  }
 }
 
 .gradient {