Pending Link

Jose Romero

The function PendingLink() will create a Link element with the given to and children attributes. If isPending is not null, the Link will have a data-pending attribute that will be set to "true" if the link is pending or "null" if the link is active.

Library: remix

Shortcut: remix.link.pending

import { useTransition, useResolvedPath, Link } from "remix";

function PendingLink({ to, children }: { to: string; children: any }) {
  const transition = useTransition();
  const path = useResolvedPath(to);
  const isPending =
    transition.state === "loading" &&
    transition.location.pathname === path.pathname;
  return (
    <Link
      data-pending={isPending ? "true" : null}
      to={to}
      children={children}
    />
  );
}