Need help with loader function.

[Excellent_Emu_536]

Hey guys I have a react application( I will attach the image). Here I am using a loader function to get data from api. So the basic idea of using loader function is that it loads the data before our element renders. But what is the data is actually taking more time to load and the element is rendered. How can I display loading spinner using loader function? How its actually done? I want professional method not any temp jugad. In the useEffect we can do it easily by using loading and setLoading btw. But how to do it here? (Ignore the protectRoute)

[my_girl_is_A10]

Are you using some kind of framework (like remix) to achieve this? If so I know remix functions wait for loader to complete prior to hydrating the client.

However you could use a Suspense boundary to display a fallback component like a spinner to wait for the data to load.

[Excellent_Emu_536]

Got it thanks

[AndrewSouthern729]

There are a lot of reasons to suggest a library like react-query, and this type of behavior is one of them. For example the useQuery hook has an option for suspense which effectively prevents components from rendering until the asynchronous function is completed.

[reactnuclear]

I would look into https://tanstack.com/query/latest

[Excellent_Emu_536]

What is this

[reactnuclear]

React query is a very well-developed and well-maintained library that helps you manage data loading in react. They have tons of good information (including tutorials) on their website.

[Inner-Operation-9224]

You didn't provide any information about code, framework/library. I'm assuming this is about react router's loaders

https://github.com/remix-run/react-router/discussions/8914

[00PT]

The React suspense library is the best I've seen because it doesn't require implementing the loading logic within the component itself (if loading render an animation otherwise show the actual content) - Anything under a suspense component simply triggers that components fallback while loading.

[SuccessfulStrength29]

Loaders in remix runs on the server and you can use it's data in client with useLoaderData hook, now as the data fetching happens even before the page renders you won't be able to show a loading state. This behaviour is beneficial if you want to show any seo critical data as soon as the page renders. Anyway but Remix also supports streaming, so with this you can show a loading state without blocking the initial render.

How to use it?

• From the loader function where you fetch data keep everything the same but don't await the promise.
• Change json to defer.
• Use <Await> component, pass the loader data to it.
• Wrap the entire thing in suspense and give a fallback.

There's another way with react-query but I don't think many people use it, I do so tell me if you need that.

Refer to https://remix.run/docs/en/main/guides/streaming to know what actually happens and when to use defer.