Button with transition

Jose Romero

This code creates a button that will submit the form when it is clicked. The code first uses the useTransition() function to determine the transition between the 'submitting' and 'loading' states. The SubmitButton() function then sets the text of the button to either "Saving..." or "Saved!", depending on the state of the transition.

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