Smoother transition when newtab image loads slowly

[josiah-keller]

Fixes #5309

When opening a new tab, the background image can load slowly, especially if it's not cached, giving a rough appearance (especially for new users). Previously, the entire newtab page contents were faded in on page load, which doesn't help if the image takes awhile to load - you can still see the image progressively rendering as it loads.

Now, the image is hidden until it loads, while the rest of the newtab page is displayed immediately with no fade for immediate interaction. Once the image loads, it fades in.

• Submitted a ticket for my issue if one did not already exist.
• Used Github auto-closing keywords in the commit message.
• Added/updated tests for this change (for new code or code which already has tests).
• Ran git rebase -i to squash commits (if needed).

Test Plan:

1. Clear browser cache
2. Open a new tab
3. Note that UI elements are interactive right away, while image fades in once it loads.

[luixxiul]

CI passed: https://travis-ci.org/brave/browser-laptop/builds/190475667

[bsclifton]

@josiah-keller sorry it's taken me so long to get to this ☹️ Would you mind giving this a rebase? I think we'll have cycles to pull it in soon 😄

[josiah-keller]

@bsclifton Is there any point in that? Won't the newtab page be changing to deal with the memory issue anyway? Seems more logical to close this to me.

[bsclifton]

@josiah-keller you're right- the image for the new tab page is currently disabled (as of tonite). We will be re-enabling it as soon as we fix the memory issue (which should be soon- next few weeks). We can just hold off until then- I think this is a great change though 😄

[josiah-keller]

@bsclifton I noticed #6965 was put in the 0.13.3 milestone so I went ahead and did a rebase.

[bsclifton]

Will be ready for re-review after #7160 is accepted

[bsclifton]

Hey there 😄 Sorry it's taken so long for me to dig in and review this ☹️

I spent a good amount of time with this PR and the changes are sometimes noticeable, but other times the flash of white still hits you

I wanted to ask (if you're still up for it) if you'd be able to try an approach where (if images are set to true) the body is black (instead of white). And only after the image finishes loading, it would start the animation transition to fade in. This is similar to the behavior I've seen on sites such as Google Hangouts:
https://hangouts.google.com/

Let me know what you think 😄

[josiah-keller]

@bsclifton I've noticed that too, and in those cases the correct class for the animation still gets applied. I assumed it was just bad animation performance on my machine. I'm fine with doing whatever changes you think are best, but won't this just give a flash of black instead? Or am I misunderstanding you?

[bsclifton]

@josiah-keller I think if you give it a shot, you'll notice the black (fading into lighter colors) seems to be a lot nicer. I tried a reloading a bunch on the https://hangouts.google.com URL and it is very easy on the eyes

Going forward, now that backgrounds can be disabled, we can likely update the code to make the default color configurable. At the moment, it's hardcoded to white (and I'm proposing hardcoding to black).

Here's an an open issue relating to that (in case you're interested): #7159

[josiah-keller]

@bsclifton Got around to changing the background, and it does indeed look better.

[bsclifton]

@josiah-keller! The black fade in (which looks great!) makes the blinking even more obvious. I did some more digging in and here's what I've found.

The white flash is something present because of the webview. This tag is inserted by Brave when a new tab is opened which ends up creating a webcontents Chromium object. This is what seems to have a default color of white.

The issue has been reported in Electron with electron/electron#5175. We're likely going to need a Muon fix for this to look correct ☹️

[bsclifton]

Given the show stopper documented above (needing to have a Muon fix), I'm going to close this PR. Thanks for digging in @josiah-keller - I'll make sure to share the findings above in the original issue