Codiga Code Snippet: Pending Link

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

Pending Link

jmromeroeci

Remix JavaScript public recipes

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

0 Comments

Add Comment