useAwaitedLoaderData()

[Mxs2019]

Problem

I've been using remix to build some "app-like" user interfaces. A common pattern is a tab bar across the top and then below that is a bunch of child routes. For each of these child routes I'm using defer so that the tab switches instantly and I show a loading spinner while the content is loading. This works well but is verbose to write.

Solution

One idea to making this easier would be a new hook - useAwaitedLoaderData(). This hook would basically work the same as useLoaderData() but is meant to work with defered data. It throws a suspense boundary until all the promises have settled and then you can use the data. This would mean you don't need to wrap you code in the loading + async components and instead can just use data like it has been awaited.

Here is an example of putting it together

const loader = () => {
     const asyncData = AsyncFunction()
    return defer({ asyncData })
}

const route = () => {
    const { asyncData } = useAwaitedLoaderData<typeof loader>()

   return <div>{asyncData}</div>
}

useAwaitedLoaderData would handle the types correctly. This assumes that there is a suspense boundary further up the stack. One idea could be to support a loading prop in an <Outlet /> to make this a little bit easier since that's often where you want to put the loading state.