Layout component (in wrapPageElement) rendering delay

Support
, ,
1

Site URL - https://price.broker

As you can see, the Layout component (which includes the Navbar and other components) take a fraction of second to apply to the page.

This is causing an annoying layout shift.

gatsby-browser.js

export const wrapPageElement = ({element, props}) => {
    return <Layout pathname={props.location.pathname}>
        {element}
    </Layout>
}

Any help?

2

Thanks for reaching out! Typically you’ll only want to use the gatsby-browser.js file if necessary, and you may find you’re able to define your Layout component in its own file, and pass down your pathname prop as well as the children prop (as opposed to using wrapPageElement).

You could then add the Layout prop to your page components and use it to wrap the content there - a good example of this is shown here: Part 2: Use and Style React Components | Gatsby.

If you do find the gatsby-browser necessary for your Layout component, you’ll also want to ensure you have a matching API call in the gatsby-ssr file.

1 Like