loading spinner for Brave News shows square outline sometimes

[LaurenWags]

Description

Sometimes the loading spinner for Brave News displays a square outline. Seems to depend on background color of the NTP and possibly the fade/blur as you scroll on Brave News?

Steps to Reproduce

1. Reliably get into a situation where the loading spinner displays (ex. no error message in Brave News when wifi is off #35153)
2. Look at the loading spinner on a variety of NTP backgrounds (and scroll positions on the page)

Actual result:

Sometimes the square outline is visible:

Example	Example

Expected result:

No square outline visible

Reproduces how often:

easily

Brave version (brave://version info)

1.62.x, 1.63.x

Version/Channel Information:

• Can you reproduce this issue with the current release? no
• Can you reproduce this issue with the beta channel? yes, 1.62.x
• Can you reproduce this issue with the nightly channel? yes 1.63.x

Other Additional Information:

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

Miscellaneous Information:

cc @brave/qa-team @fallaciousreasoning

[stephendonner]

Now that I see the square, I can't unsee it 😉

[AyushNigam11]

Need to conditional styling and CSS adjustments

[AyushNigam11]

Need to conditional styling and CSS adjustments

do*

[kjozwiak]

The above requires 1.62.138 or higher for 1.62.x verification 👍

[stephendonner]

Verification PASSED using

Brave | 1.62.144 Chromium: 120.0.6099.217 (Official Build) beta (x86_64)
-- | --
Revision | 75de8d953f6a5686e425d46d7f0dc9284dc1c064
OS | macOS Version 11.7.10 (Build 20G1427)

Confirmed via visual inspection that the square background is no more

example	example