your recipe card header background

    Pending Link

    0

    0

    Jose Romero

    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

    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}
        />
      );
    }
    Codiga Logo
    Codiga Hub
    • Rulesets
    • Explore
    • Cookbooks
    • Playground
    soc-2 icon

    We are SOC-2 Compliance Certified

    G2 high performer medal

    Codiga – All rights reserved 2022.