In gatsby is their is a way to Prevent Layout from reloading along with the page.

[Usama-Malik9]

So, Every time I click on the links in my navbar a new page renders, therefore re-rendering the Layout component inside those pages,
but how do I prevent that form happening? I want the layout component to render once because I have animations on the title and icons.

I used this as well in gatsby-browser.ts file but layout always reloads with the page.

import React from "react";
import CheckerLayout from '../layouts/checker-layout'

export const wrapPageElement=({element,props})=>(
<CheckerLayout {...props}>{element}
)

[violy]

Hi,

You can also use the wrapRootElement function to wrap your whole site at root level (instead of page level).

NB : If some sub components of your global layout depends on page context data, location states, you should also wrap this with a React Context, a redux store or whatever.