How do you handle success states?

[daalfox]

I want to show some state on the submit button that indicate submit operation was successful and goes away after a few seconds. The isSubmitSuccessful exists, but it is not temporary. How do you do it? What's the simplest way?

[LeCarbonator]

You would want a temporary alert of some kind that listens to isSubmitSuccessful. Whether you do that through Form Composition, useStore or form.Subscribe is up to you. I'll assume you have it as variable to pass to a component below.

The state would be managed similar to this:

function YourComponent({ isSubmitSuccessful }) {
    const [showSuccess, setShowSuccess] = useState(isSubmitSuccessful);
    
    useEffect(() => {
    if (isSubmitSuccessful) {
      setShowSuccess(true);
      const timer = setTimeout(() => setShowSuccess(false), 3000);
      return () => clearTimeout(timer);
    }
  }, [isSubmitSuccessful]);
  
  // ...
}

[daalfox]

Can we have a temporary success indicator in the form API? seems like a common use case. Maybe also a config option to customize the timeout duration