Pending Link

Jose Romero

The code creates a PendingLink element, sets its data-pending attribute to true, and sets its to and children properties to the location of the target and the children of the current document, respectively. The transition property is initialized with the useTransition() function, which sets its state to "loading" and its location to the document's loadedHTML property. If the PendingLink has children, their data-pending attribute is set to true as well.

Library: remix

Shortcut: remix.link.pending

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

function PendingLink({ to, children }) {
  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}
    />
  );
}