Bug: pending attribute from useFormStatus is stuck as "true" when form action takes longer than ~5s to resolve about react

[Santiago-j-s]

https://codesandbox.io/p/sandbox/competent-chatelet-8qvvnm?file=%2Fapp%2Fpage.tsx%3A3%2C43

I have an interesting observation (I'm not sure if it's the same bug but it seems related) with useFormStatus and server actions:

• If a component only has the useFormStatus hook, it works correctly
• If the component also has an useEffect hook, it does not work. The pending status changes to false almost inmediately

[dev2xl]

I'm facing same issues:

• After triggering the action and pending goes to true, If the component is re-rendered after updating the state the pending status switch to false.
• Pending stuck as true for long taking actions

This is stopping me to use this on production. Please we need some fix asap. Thanks!

[mattcarrollcode]

Thanks for the bug report, I've reproduced the bug in a simpler codesandbox. It looks like right around 5s for a client action is the point when the pending property gets stuck and isn't updated: https://codesandbox.io/s/useformstatus-forked-vsdskv?file=/App.js

@acdlite can you take a look?

[mattcarrollcode]

I updated the CodeSandbox to highlight that issue occurs with a client action that takes 5s but not a action that takes 4s. Its on the experimental channel. In my experimentation it occurs somewhere between 4900ms and 5000ms: https://codesandbox.io/s/useformstatus-forked-vsdskv?file=/App.js