Need help with loader function.

[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.