pending-link.js

function useIsPendingPathname(to) {
  let { location } = useTransition();
  let { pathname } = useResolvedPath(to);
  return location?.pathname === pathname;
}

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

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

  return isSlow;
}

function PendingLink({ to, style, ...props }) {
  let isSlow = useIsSlowTransition(300);
  let isPending = useIsPendingPathname(to);

  return (
    <Link
      style={{ ...style, opacity: isPending && isSlow ? 0.33 : 1 }}
      to={to}
      {...props}
    />
  );
}