How to detect if clientLoader is still loading or pending?

[davidbielik]

How can I detect when the clientLoader is still pending?

I've tried useNavigation() checking Boolean(navigation.location) || navigation.state === 'loading' - but it still shows as false even though i've never resolved its promise?

export const clientLoader = async ({
  request,
  serverLoader,
  params,
}: Route.ClientLoaderArgs) => {
  await new Promise(() => {}); // never resolves for demo purpose
  return {};
};
clientLoader.hydrate = true as const;


import { useNavigation } from 'react-router';

export default function Page({}: Route.ComponentProps) {
    const navigation = useNavigation();
    const isLoading = Boolean(navigation.location) || navigation.state === 'loading';

    return <div>{isLoading}</div>
}