remix-utils - npm Package Compare versions

Comparing version 5.0.1 to 5.1.0

browser/react/use-global-pending-state.d.ts

 /**
+ * This is a helper hook that returns the state of every fetcher active on
+ * the app and combine it with the state of the global transition.
+ * @example
+ * let states = useGlobalTransitionStates();
+ * if (state.includes("loading")) {
+ *   // The app is loading.
+ * }
+ * if (state.includes("submitting")) {
+ *   // The app is submitting.
+ * }
+ * // The app is idle
+ */
+export declare function useGlobalTransitionStates(): ("idle" | "submitting" | "loading")[];
+/**
  * Let you know if the app is pending some request, either global transition
@@ -7,1 +21,13 @@ * or some fetcher transition.
 export declare function useGlobalPendingState(): "idle" | "pending";
+/**
+ * Let you know if the app is submitting some request, either global transition
+ * or some fetcher transition.
+ * @returns "idle" | "submitting"
+ */
+export declare function useGlobalSubmittingState(): "idle" | "submitting";
+/**
+ * Let you know if the app is loading some request, either global transition
+ * or some fetcher transition.
+ * @returns "idle" | "loading"
+ */
+export declare function useGlobalLoadingState(): "idle" | "loading";

browser/react/use-global-pending-state.js

 import { useTransition, useFetchers } from "@remix-run/react";
 import { useMemo } from "react";
 /**
- * Let you know if the app is pending some request, either global transition
- * or some fetcher transition.
- * @returns "idle" | "pending"
+ * This is a helper hook that returns the state of every fetcher active on
+ * the app and combine it with the state of the global transition.
+ * @example
+ * let states = useGlobalTransitionStates();
+ * if (state.includes("loading")) {
+ *   // The app is loading.
+ * }
+ * if (state.includes("submitting")) {
+ *   // The app is submitting.
+ * }
+ * // The app is idle
  */
-export function useGlobalPendingState() {
+export function useGlobalTransitionStates() {
     let transition = useTransition();
@@ -13,15 +21,41 @@ let fetchers = useFetchers();
      * This gets the state of every fetcher active on the app and combine it with
-     * the state of the global transition (Link and Form), then use them to
-     * determine if the app is idle or if it's loading.
-     * Here we consider both loading and submitting as loading.
+     * the state of the global transition (Link and Form).
      */
-    return useMemo(function getGlobalState() {
-        let states = [
-            transition.state,
-            ...fetchers.map((fetcher) => fetcher.state),
-        ];
-        if (states.every((state) => state === "idle"))
-            return "idle";
-        return "pending";
+    return useMemo(function getGlobalTransitionStates() {
+        return [transition.state, ...fetchers.map((fetcher) => fetcher.state)];
     }, [transition.state, fetchers]);
 }
+/**
+ * Let you know if the app is pending some request, either global transition
+ * or some fetcher transition.
+ * @returns "idle" | "pending"
+ */
+export function useGlobalPendingState() {
+    let isSubmitting = useGlobalSubmittingState() === "submitting";
+    let isLoading = useGlobalLoadingState() === "loading";
+    if (isLoading || isSubmitting)
+        return "pending";
+    return "idle";
+}
+/**
+ * Let you know if the app is submitting some request, either global transition
+ * or some fetcher transition.
+ * @returns "idle" | "submitting"
+ */
+export function useGlobalSubmittingState() {
+    let states = useGlobalTransitionStates();
+    if (states.includes("submitting"))
+        return "submitting";
+    return "idle";
+}
+/**
+ * Let you know if the app is loading some request, either global transition
+ * or some fetcher transition.
+ * @returns "idle" | "loading"
+ */
+export function useGlobalLoadingState() {
+    let states = useGlobalTransitionStates();
+    if (states.includes("loading"))
+        return "loading";
+    return "idle";
+}

build/react/use-global-pending-state.d.ts

 /**
+ * This is a helper hook that returns the state of every fetcher active on
+ * the app and combine it with the state of the global transition.
+ * @example
+ * let states = useGlobalTransitionStates();
+ * if (state.includes("loading")) {
+ *   // The app is loading.
+ * }
+ * if (state.includes("submitting")) {
+ *   // The app is submitting.
+ * }
+ * // The app is idle
+ */
+export declare function useGlobalTransitionStates(): ("idle" | "submitting" | "loading")[];
+/**
  * Let you know if the app is pending some request, either global transition
@@ -7,1 +21,13 @@ * or some fetcher transition.
 export declare function useGlobalPendingState(): "idle" | "pending";
+/**
+ * Let you know if the app is submitting some request, either global transition
+ * or some fetcher transition.
+ * @returns "idle" | "submitting"
+ */
+export declare function useGlobalSubmittingState(): "idle" | "submitting";
+/**
+ * Let you know if the app is loading some request, either global transition
+ * or some fetcher transition.
+ * @returns "idle" | "loading"
+ */
+export declare function useGlobalLoadingState(): "idle" | "loading";

build/react/use-global-pending-state.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useGlobalPendingState = void 0;
+exports.useGlobalLoadingState = exports.useGlobalSubmittingState = exports.useGlobalPendingState = exports.useGlobalTransitionStates = void 0;
 const react_1 = require("@remix-run/react");
 const react_2 = require("react");
 /**
- * Let you know if the app is pending some request, either global transition
- * or some fetcher transition.
- * @returns "idle" | "pending"
+ * This is a helper hook that returns the state of every fetcher active on
+ * the app and combine it with the state of the global transition.
+ * @example
+ * let states = useGlobalTransitionStates();
+ * if (state.includes("loading")) {
+ *   // The app is loading.
+ * }
+ * if (state.includes("submitting")) {
+ *   // The app is submitting.
+ * }
+ * // The app is idle
  */
-function useGlobalPendingState() {
+function useGlobalTransitionStates() {
     let transition = (0, react_1.useTransition)();
@@ -16,16 +24,45 @@ let fetchers = (0, react_1.useFetchers)();
      * This gets the state of every fetcher active on the app and combine it with
-     * the state of the global transition (Link and Form), then use them to
-     * determine if the app is idle or if it's loading.
-     * Here we consider both loading and submitting as loading.
+     * the state of the global transition (Link and Form).
      */
-    return (0, react_2.useMemo)(function getGlobalState() {
-        let states = [
-            transition.state,
-            ...fetchers.map((fetcher) => fetcher.state),
-        ];
-        if (states.every((state) => state === "idle"))
-            return "idle";
-        return "pending";
+    return (0, react_2.useMemo)(function getGlobalTransitionStates() {
+        return [transition.state, ...fetchers.map((fetcher) => fetcher.state)];
     }, [transition.state, fetchers]);
 }
+exports.useGlobalTransitionStates = useGlobalTransitionStates;
+/**
+ * Let you know if the app is pending some request, either global transition
+ * or some fetcher transition.
+ * @returns "idle" | "pending"
+ */
+function useGlobalPendingState() {
+    let isSubmitting = useGlobalSubmittingState() === "submitting";
+    let isLoading = useGlobalLoadingState() === "loading";
+    if (isLoading || isSubmitting)
+        return "pending";
+    return "idle";
+}
 exports.useGlobalPendingState = useGlobalPendingState;
+/**
+ * Let you know if the app is submitting some request, either global transition
+ * or some fetcher transition.
+ * @returns "idle" | "submitting"
+ */
+function useGlobalSubmittingState() {
+    let states = useGlobalTransitionStates();
+    if (states.includes("submitting"))
+        return "submitting";
+    return "idle";
+}
+exports.useGlobalSubmittingState = useGlobalSubmittingState;
+/**
+ * Let you know if the app is loading some request, either global transition
+ * or some fetcher transition.
+ * @returns "idle" | "loading"
+ */
+function useGlobalLoadingState() {
+    let states = useGlobalTransitionStates();
+    if (states.includes("loading"))
+        return "loading";
+    return "idle";
+}
+exports.useGlobalLoadingState = useGlobalLoadingState;

package.json

 {
   "name": "remix-utils",
-  "version": "5.0.1",
+  "version": "5.1.0",
   "license": "MIT",
@@ -5,0 +5,0 @@ "engines": {

README.md

@@ -532,2 +532,28 @@ # Remix Utils
 
+### useGlobalTransitionStates
+
+This hook lets you know if the value of `transition.state` and every `fetcher.state` in the app.
+
+```ts
+import { useGlobalTransitionStates } from "remix-utils";
+
+export function GlobalPendingUI() {
+  let states = useGlobalTransitionStates();
+
+  if (state.includes("loading")) {
+    // The app is loading.
+  }
+
+  if (state.includes("submitting")) {
+    // The app is submitting.
+  }
+
+  // The app is idle
+}
+```
+
+The return value of `useGlobalTransitionStates` is either `"idle"` or `"pending"`.
+
+> **Note** This is used by the hooks below to determine if the app is loading, submitting or both (pending).
+
 ### useGlobalPendingState
@@ -550,2 +576,40 @@
 
+> **Note**: This hook combines the `useGlobalSubmittingState` and `useGlobalLoadingState` hooks to determine if the app is pending.
+
+> **Note**: The `pending` state is a combination of the `loading` and `submitting` states introduced by this hook.
+
+### useGlobalSubmittingState
+
+This hook lets you know if the global transition or if one of any active fetchers is submitting.
+
+```ts
+import { useGlobalSubmittingState } from "remix-utils";
+
+export function GlobalPendingUI() {
+  let globalState = useGlobalSubmittingState();
+
+  if (globalState === "idle") return null;
+  return <Spinner />;
+}
+```
+
+The return value of `useGlobalSubmittingState` is either `"idle"` or `"submitting"`.
+
+### useGlobalLoadingState
+
+This hook lets you know if the global transition or if one of any active fetchers is loading.
+
+```ts
+import { useGlobalLoadingState } from "remix-utils";
+
+export function GlobalPendingUI() {
+  let globalState = useGlobalLoadingState();
+
+  if (globalState === "idle") return null;
+  return <Spinner />;
+}
+```
+
+The return value of `useGlobalLoadingState` is either `"idle"` or `"loading"`.
+
 ### useHydrated
@@ -552,0 +616,0 @@

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

216468

2.76%

Lines of code

4659

2.71%

Number of lines in readme file

1321

5.09%

No dependency changes