Server action promise timing and toasts

[oneillsp96]

I'm building a new project in Next 14 with the app router, and have been absolutely loving it so far. I am running into a few small issues with forms and am hoping to find some guidance.

Our designers want to show a toast when form submits are pending, complete, or errored. Our in-house design system is based on Chakra + react-hook-form, and we were hoping to use promise-based toasts: https://v2.chakra-ui.com/docs/components/toast#promise-based-toast

However when I await for the result of a server action, I am finding that the promise is resolving before the data cache is invalidated and refetched. This results in my loading toast disappearing, and the success toast showing, but then a delay of multiple seconds before the new data is shown. Ideally I would want to show the loading state until the invalidation and refetching is complete. So my first foundational question is:

• is it expected that the server action promise is resolved before invalidation+refetching is complete?

If that’s the case, it makes it very difficult to show the toasts correctly using Chakra’s promise-based toast system

And since our design system has react-hook-form baked in, we don’t have a great way to support useActionState at the moment. Even if we could, we’d still need to write some crazy useEffect to manage showing the various toasts based on the isPending property.