Button with transition

Jose Romero

The code defines a function called filename() that takes two arguments: transition and text. transition is a object that holds information about the transition between two states. In this case, the two states are "submitting" and "loading." If the transition is in the "submitting" state, the function returns "Saving." If the transition is in the "loading" state, the function returns "Saved!" The final state is "Go." This function creates a button that uses the text "Go" as the text when it is clicked.

Library: remix

Shortcut: remix.button.transition

import { useTransition } from "remix";

function filename() {
  const transition = useTransition();
  const text =
    transition.state === "submitting"
      ? "Saving"
      : transition.state === "loading"
      ? "Saved!"
      : "Go";
  return <button type="submit">{text}</button>;
}