useNavigation is not "loading" while clientLoader promise is pending

[davidbielik]

I'm using React Router as a...

framework

Reproduction

https://stackblitz.com/edit/github-ngbzslv2?file=app%2Froutes%2Fhome.tsx

import type { Route } from "./+types/home";

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


import { useNavigation } from 'react-router';

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

    return <div>Loading: {isLoading ? 'true' : 'false'} (should be 'true')</div>
}

1. Client loader is pending (check the console for logs)

#13318

System Info

System:
    OS: macOS 14.4.1
    CPU: (8) x64 Apple M1 Pro
    Memory: 23.95 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.12.0 - /usr/local/bin/node
    Yarn: 1.22.19 - ~/.yarn/bin/yarn
    npm: 8.10.0 - ~/.npm-global/bin/npm
    bun: 1.1.12 - ~/.bun/bin/bun
  Browsers:
    Chrome: 134.0.6998.166
    Safari: 17.4.1
    Safari Technology Preview: 17.4
  npmPackages:
    @react-router/dev: ^7.4.1 => 7.4.1 
    @react-router/fs-routes: ^7.4.1 => 7.4.1 
    @react-router/node: ^7.4.1 => 7.4.1 
    @react-router/serve: ^7.4.1 => 7.4.1 
    react-router: ^7.4.1 => 7.4.1 
    vite: ^5.4.11 => 5.4.16

Used Package Manager

yarn

Expected Behavior

const navigation = useNavigation();
const isLoading = Boolean(navigation.location) || navigation.state === 'loading';

isLoading should be true

Actual Behavior

isLoading is false