The page doesn't have the stylings (Gatsby, styled-component) when first launched

When I first launch the page it doesn’t show the stylings, but if I go to another page and return to the first, it shows well

I am using styled components, and I’m initializing the whole thing in gatsby-browser.js and gatsby-ssr.js

---- gatsby-browser.js/gatsby-ssr.js:

import React from "react"
import Layout from "./src/components/Layout"
import { GlobalStyles, globalTheme } from "./src/globals/globalStyles"
import { ThemeProvider } from "styled-components"
import GlobalContextProvider from "./src/globals/globalContextProvider"

export const wrapRootElement = ({ element }) => {
  return (
    <ThemeProvider theme={globalTheme}>
      <GlobalStyles />
      <GlobalContextProvider>
        <Layout>{element}</Layout>
      </GlobalContextProvider>
    </ThemeProvider>
  )
}

The first page would be About Us, so the pages index.js and about.js are literally the same

In the next image, on the left is the page as it shows for the first launch, on the right, as it shows when navigating to another page and returning to the first one

The site name is: https://dainty-smakager-18ee0d.netlify.app/

The GitHub address is: https://github.com/rafaelsoteldosilva/serenity-gb-without-model

hi there, does this work correctly locally? that might be the best way to approach troubleshooting this.

can you check and confirm?

Yes, it works perfectly locally, and it builds too

Hey @rafael.soteldo,

One of our users has faced this issue before and they narrowed it down to styled components being an issue. They have since locked the version 5.3.3 of that library and are not having any issues.