improve the animation/rendering of onboarding v2

[kjozwiak]

Description

When initially launching Brave for the first time, you'll notice that the brave://welcome screen is black for a few ms before the animations start and the screen loads. You can somewhat see the issue if you load brave://welcome in a new tab but it's a lot more noticeable when launching with a new profile for the first time. Seems like the duration is a bit longer compared to when loading via new tab so it's a lot more noticeable. We should try smoothing this out.

Just a quick note that I'm on a pretty powerful machine running a AMD Ryzen 9 5950X, 32 GB RAM and a dedicated RTX 3080 GPU so I shouldn't be having any issues with rendering/related to HW acceleration.

Steps to Reproduce

1. launch brave (using 1.48.13 Chromium: 108.0.5359.62 in this case)
2. should see brave://welcome (if not, you can directly go into the onboarding experience by loading brave://welcome

Actual result:

New.Tab.-.Brave.2022-11-28.14-21-30.mp4

Expected result:

Animation/Rendering should be a lot smoother compared to what we have now. The user shouldn't see any flickers. Assuming users with slower machines might experience what I'm experience even more.

Reproduces how often:

100% reproducible using the STR/Cases outlined above.

Brave version (brave://version info)

Brave | 1.48.13 Chromium: 108.0.5359.62 (Official Build) nightly (64-bit)
-- | --
Revision | 041930a89a990cfab0315a2d9f20d6429a4a67cf-refs/branch-heads/5359@{#938}
OS | Windows 11 Version 22H2 (Build 22621.819)

Version/Channel Information:

• Can you reproduce this issue with the current release? No (currently in 1.47.x)
• Can you reproduce this issue with the beta channel? Yes
• Can you reproduce this issue with the nightly channel? Yes

Other Additional Information:

• Does the issue resolve itself when disabling Brave Shields? N/A
• Does the issue resolve itself when disabling Brave Rewards? N/A
• Is the issue reproducible on the latest version of Chrome? N/A

Miscellaneous Information:

[kjozwiak]

The above requires 1.47.131 or higher for 1.47.x verification 👍

[btlechowski]

Verification passed on

Brave	1.47.132 Chromium: 108.0.5359.128 (Official Build) beta (64-bit)
Revision	1cd27afdb8e5d057070c0961e04c490d2aca1aa0-refs/branch-heads/5359@{#1185}
OS	Ubuntu 18.04 LTS

Verified the test plan from the description
Verified animation is smother even on slow machine

I can still see a white page flash though. @kjozwiak not sure if this is an issue as the effect is similar to what we have when opening NTP.

[btlechowski]

Added QA/Test-All-Platforms to test on more platforms as this issue can be quite subjective

[GeetaSarvadnya]

Verification PASSED on

Brave | 1.47.149 Chromium: 109.0.5414.46 (Official Build) beta (64-bit)
-- | --
Revision | 6e36b77363ef3febbe792af680fa1367993ddcf0-refs/branch-heads/5414@{#709}
OS | Windows 10 Version 21H2 (Build 19044.2364)

Verified the test plan from the description
Verified animation is smother even on slow machine

[kjozwiak]

Verification passed on

Brave 1.47.132 Chromium: 108.0.5359.128 (Official Build) beta (64-bit)
Revision 1cd27afdb8e5d057070c0961e04c490d2aca1aa0-refs/branch-heads/5359@{#1185}
OS Ubuntu 18.04 LTS
Verified the test plan from the description Verified animation is smother even on slow machine

I can still see a white page flash though. @kjozwiak not sure if this is an issue as the effect is similar to what we have when opening NTP.

@btlechowski hmmm looks looks like the window starts off completely black before it flashes/loads brave://welcome. Assuming that's a slower machine/VM. I don't see that happening on Win & macOS but they're running on real hardware. I'll update my Linux laptop this week and see if it's the same behaviour on real hardware. @srirambv just curious, when you launch a new profile on your machine, do you see a black screen before the browser loads brave://welcome?

BTW, apologies for the late response, catching up on GH mentions 👍

[LaurenWags]

Verified with

Brave | 1.47.167 Chromium: 109.0.5414.80 (Official Build) (x86_64)
-- | --
Revision | 0f69b168d36a06cace4365e9f029fa987afa5633-refs/branch-heads/5414@{#1178}
OS | macOS Version 12.6.2 (Build 21G320)

Compared loading of brave://welcome on 1.47.167 and 1.48.13. The page animation/rendering is smoother on 1.47.x after the fix. On 1.48.x everything kind of pops up where as on 1.47.x they fade in nicer and it's not as jarring.