How do you add custom loaders

[aquibbaig]

Hey, So for me it's difficult to know when your content is loading on clicking those links, so what is the easiest way to implement "wait" on page delay caused due to navigation or data fetching. Thanks!

[aquibbaig]

I used some plugins such as gatsby-plugin-nprogress but no luck. React suspense would not work because you're just rendering page components.

[nibtime]

Hi @aquibbaig

if I get it right, you need to connect state from Gatsby Browser (e.g. onRouteUpdateDelayed) with some custom loading component (React) that you like to place anywhere in a React Layout component? This isn't possible, mutating document and some global state in Gatsby Browser APIs it is (that's how the nprogress plugin does it too).

I found a way to tap into Gatsby Browser state from React by using a zustand store. Works great for me, with Redux devtools for Gatsby Browser events and all, but I have never seen that anybody else uses this pattern. So I don't know if it is cutting edge or just a really bad idea 😄.

I posted sort of a PoC in an issue on how you would do that. For your use case, you would compose a state hook that tells you the truth about delayed updates and then use this state hook like any other hook in a React component. I posted a sample component, that directly animates serviceWorkerUpdateReady (the state from Gatsby Browser) combined with a timeout. This would usually not be possible because you have no access to this serviceWorkerUpdateReady state in your React components. It is a really simple and dull pattern that actually does nothing except exposing Gatsby Browser for the React parts of your app. Enabling the use of idiomatic React design with functional components that involve events from Gatsby Browser is the intention I had with this. This should be a much better natural fit for Suspense than document mutation hacks. I haven't tried it out with Suspense yet though.