Hello,

I'm trying to migrate from API routes to server actions. In my case I have a button to delete some stuff and onSuccess display a toast message, in server actions I call revalidatePath() (I'm fetching data from external service - out of next.js) and everything is fine, but my toast appears before revalidation is completed (isPending is still true). Is there an option to wait for the revalidation and display toast after it?

Here's my code:

  const [isPending, startTransition] = useTransition()

  const clickHandler = () => {
    startTransition(async () => {
      const res = await deleteGroup(groupId)
 
      if (!res.ok) {
        errorToast(res.error)
        return
      }

      successToast('Group removed')
    })
  }

server action:

export const deleteGroup = async (groupId: string) => {
  const res = await fetch(`${URL}/${groupId}`, {
    method: 'DELETE',
  })

  if (!res.ok) {
    return {
      ok: false,
      error: 'Failed to delete group. Please try again.',
    }
  }

  revalidateTag('groups')

  return {
    ok: true,
    data: 'Group deleted successfully.',
  }
}