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;
}