resetForm: true and useSpinDelay race condition

[halljus]

Summary

Given a Remix route for editing an entity, after a successful submission where we include submission.reply({ resetForm: true }) in the response, the form will SOMETIMES update to the new values (and reset to dirty: false) and sometimes not. In the event where it fails to reset, the end result is the form values have reverted to their original pre-submission values and the form remains dirty.

We're using the useSpinDelay hook to avoid a "flash of pending UI" situation where we only show pending UI (disabled form inputs, different button text, etc.) if the action takes a sufficiently long amount of time - else it appears instant. We "delay" giving Conform lastResult until we are no longer showing this pending UI with lastResult: !shouldShowPending ? lastResult : null.

The issue only occurs when the submission is fast. If the submission is sufficiently slow enough to warrant showing pending UI, the form resets properly.

Reproduction

Here's a minimal reproduction of how a given route is structured (Remix + useSpinDelay + Conform + Zod):

https://stackblitz.com/edit/remix-run-remix-rrccbe?file=app%2Froutes%2F_index.tsx

Closing thoughts

For now, removing useSpinDelay is our workaround. But it would be cool if we could keep it for a subjectively better UX. Is this a bug in Conform, or do you see a way to better combine the two technologies? Thanks. 🙏

[halljus]

Updated title and description after making troubleshooting progress and narrowing down the problem.

[edmundhung]

The issue you see is because shouldShowPending is always false and so it is passing the lastResult to the useForm hook immediately without waiting for the loader to finish. When you submit again, it does the same thing so it reset to your previous submitted value.

I think the behavior make sense for spin-delay to just skip showing the spinner (i.e. making the boolean true) if it's done quick enough. But it doesn't seems to fit the situation here in which we must pass the lastResult at the right time... 🤔