I'm trying to show a loading bar whenever the page is still loading (whether accessing directly or after clicking a link), but I useNavigation() always has an idle state. It's never loading.

Basically I have a loader, which fetches some data and in my component (root.tsx) I'm doing this:

const data = useLoaderData<typeof loader>();
const navigation = useNavigation();
console.log('state: ', navigation.state) // this is always idle

What can be the problem here?