Keep parent loading whilst react query in child component is loading

Question

I have a parent component in my react app that makes a call to our api, and the page has a loader whilst its waiting for response. On response, I loop through the data, and I pass each iteration into a child component, that then makes another request based on that data.

Is there a way to keep the parent spinner going, until the child data is loaded?

Currently, it displays the parent, then a split second later, some data attached to the child pops in and its not great for the user.

I am using reactQuery for my api calls.

Answer 1

You can use useIsFetching for that or dive into suspense. But the first one should work just fine for what you describe.