Page render not waiting on LoaderFunction

[deep dagger]

Apologies in advance if I totally misunderstood the point of loader functions since I'm new to Remix.

Inside routes/index.tsx (my home page) I have a couple external API fetches that are ~100ms each. My understanding of loader functions (inside a route, not a component) is that the render would be delayed until they're complete.

However in this case, the page is rendering before the API calls are completed and returned from the loader, resulting in an application error when trying to loop the suggestions or featured responses:

TypeError: Cannot read properties of undefined (reading 'map')

What am I missing here? Tried to wrap them in a Promise to avoid waterfall calls, but no attempted fixes have prevailed.

[deep dagger]

It's also worth noting I looked at the Remix sample stacks, and none of their routes/index.tsx files are fetching data via a loader function. Just on subsequent routes. So I have a hunch that root.tsx is not triggering the loader in index.tsx on the first page load, but works fine when you refresh the page.

Update: I moved these functions to root.tsx and they load fine as useMatches() in index.tsx - is anyone aware of how to fetch data in index? or is that frowned upon?

[stoic pewter]

Fetching data on index should work as fetching data in any other route