Module Hook/Use Global Navigation State

This hook allows you to read the value of transition.state, every fetcher.state in the app, and revalidator.state.

import { useGlobalNavigationState } from "remix-utils/use-global-navigation-state";

export function GlobalPendingUI() {
	let states = useGlobalNavigationState();

	if (state.includes("loading")) {
		// The app is loading.
	}

	if (state.includes("submitting")) {
		// The app is submitting.
	}

	// The app is idle
}
Copy

The return value of useGlobalNavigationState can be "idle", "loading" or "submitting"

---

This hook lets you know if the global navigation, if one of any active fetchers is either loading or submitting, or if the revalidator is running.

import { useGlobalPendingState } from "remix-utils/use-global-navigation-state";

export function GlobalPendingUI() {
  let globalState = useGlobalPendingState();

  if (globalState === "idle") return null;
  return <Spinner />;
}
Copy

The return value of useGlobalPendingState is either "idle" or "pending".

---

This hook lets you know if the global transition or if one of any active fetchers is submitting.

import { useGlobalSubmittingState } from "remix-utils/use-global-navigation-state";

export function GlobalPendingUI() {
  let globalState = useGlobalSubmittingState();

  if (globalState === "idle") return null;
  return <Spinner />;
}
Copy

The return value of useGlobalSubmittingState is either "idle" or "submitting".

---

This hook lets you know if the global transition, if one of any active fetchers is loading, or if the revalidator is running

import { useGlobalLoadingState } from "remix-utils/use-global-navigation-state";

export function GlobalPendingUI() {
  let globalState = useGlobalLoadingState();

  if (globalState === "idle") return null;
  return <Spinner />;
}
Copy

The return value of useGlobalLoadingState is either "idle" or "loading".