How can a route's component determine if it's loader is loading?

[MoSattler]

In many cases I can use useNavigation, e.g. after a form on the same route was submitted. But in some cases useNavigation does not work, e.g. if the loader is called after a fetcher has submitted a form elsewhere.

Stackblitz for illustrating the issue: Stackblitz

[Erij-Maherzia-BEN-BRAHIM]

@MoSattler when you use fetcher you can use fetcher.state , the state could be loading, submitting or idle

[MoSattler]

Hey @Erij-Maherzia-BEN-BRAHIM,

Check out the file in stackblitz:

import { json } from "@remix-run/node";
import { Form, useLoaderData, useNavigation } from "@remix-run/react";
import { useEffect, useState } from "react";

let loaderCalls = 0;

export async function loader() {
  loaderCalls = loaderCalls + 1;

  return json({ loaderCalls });
}

export function action() {
  return null;
}

export default function ParentChildGrandchildIndex() {
  let data = useLoaderData<typeof loader>();
  const navigation = useNavigation();

  return (
    <div>
      <h1>parent.child.tsx</h1>
      {navigation.state === "loading" ? (
        "LOADING..."
      ) : (
        <>
          <Form method="post">
            <button type="submit">Submit</button>
          </Form>
          <p>
            Child's <b>loader</b> was called: <b>{data.loaderCalls} times</b>
          </p>
        </>
      )}
    </div>
  );
}

there is no fetcher, so this is not the solution.

[Erij-Maherzia-BEN-BRAHIM]

@MoSattler but you have it inside the parent file, you can simply do it this way 👇🏻

const fetcher = useFetcher()
const isLoading = fetcher.state !== "idle"

[MoSattler]

But I need it in the child file

[MoSattler]

The best way of doing this was shared in discord by @brophdawg11.

useFetchers().find(f => f.state === "loading" && f.formData != null)