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.

background.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. 🤷‍♀️