Is there a hook for when loaders are running or revalidating?

[davidbielik]

When a clientLoader is pending, is there a hook that can be used?

There's a HydrateFallback that renders in place of the Route component, but is there a hook for when the clientLoader is in a pending state?

I tried using the useRevalidator()'s state but it seems to always be idle.

export const clientLoader = async ({
  request,
  serverLoader,
  params,
}: Route.ClientLoaderArgs) => {
     // await some promise, how do update my page component  when this function is pending?
});


export default function Page (props: Route.ComponentProps) {
    return (
         <div>                  👇 
              <Button loading={ ?? }> Click Me </Button> 
         </div>
    );
}

[davidbielik]

I misunderstood the Global Pending Navigation.

Loaders will only run upon URL changes, so in my case I can just use that :)

[sergiodxa]

With useNavigation().state you can know if the app is submitting or loading data, or if it's idle.
Unless you submit or load data with a fetcher, then you need to use fetcher.state, you can also use useFetchers() (note the plural) to get every fetcher and then get if they are loading, submitting or idle.

Finally, if you want to show a disabled or loading state until the app is hydrated, you can use the useHydrated hook from Remix Utils

let isHydrated = useHydrated()
<button disabled={!isHydrated}>Click me</button>