PageLayout header flashes default background Image before provided background Image

[HaleyWardo]

When providing a background image and refreshing the page, the default background image flashes before rendering the provided backgroundImage.

https://user-images.githubusercontent.com/32574227/128269989-b0068ac8-d835-44da-b1ff-15b83be9ed12.mov

I tried this:

In backgroundCover styles, I remove the background style and added the background color. backgroundColor: theme.palette.primary.main

Then in the inline style I updated it to this.

{
    backgroundImage: backgroundImage
     ? `url(${backgroundImage})`
     : `url(${PageLayoutDefaultHero})`,
}

But no luck. I wonder if there is some lag in ConditionalWrapper and the styles are painting before the inline styles. 🤷‍♀️