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
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
Log in to add a comment