On Remix and Slow Transitions

Use this hook to check if your transition is taking a while and add some progressive enhancment.

When progressively enhancing a Remix app, you can use useTransition to let the user know if a form is being submitted. Here's a handy hook that only returns true if the transition is taking long enough that a loading spinner (or something like that) is really necessary.

import { useTransition } from "@remix-run/react";
import { useState, useEffect } from "react";

export function useIsSlowTransition(ms = 300) {
  let { state } = useTransition();
  let [isSlow, setIsSlow] = useState(false);

  useEffect(() => {
    if (state === "loading") {
      let id = setTimeout(() => setIsSlow(true), ms);
      return () => clearTimeout(id);
    } else {
      setIsSlow(false);
    }
  }, [state, ms]);

  return isSlow;
}