Avoid unnecessary use of useAction solely for action status

[edproton]

Currently, there's a reliance on useAction to solely retrieve the status of an action. This approach leads to a situation where the toast is displayed prematurely, before the action is completed, necessitating the need to await the action.

Is there an alternative method to obtain the action status without resorting to useAction?

I attempted to use action.result.data.failure, but encountered the issue of the promise still being in progress.

Any insights or suggestions on a more efficient approach would be greatly appreciated.

'use client'
...
import { useForm } from 'react-hook-form'
import { useAction } from 'next-safe-action/hooks'
import { loginUser } from '@/app/(auth)/login/actions'
import { FormSchema, schema } from '@/app/(auth)/login/schema'
...

export default function LoginForm() {
  const { toast } = useToast()
  const action = useAction(loginUser) // Avoid doing this, I just use this to the SubmitButton load indicator
  const form = useForm<FormSchema>({
    resolver: zodResolver(schema),
    defaultValues: {
      email: '',
      password: '',
    },
  })

  const onSubmit = form.handleSubmit(async (data) => {
    const result = await loginUser(data)

    // It was easir to use action.result.data.failure
    // I can be something wrong
    if (result?.data?.failure) {
      toast({
        title: 'Failed to login',
        description: result.data?.failure,
        variant: 'destructive',
      })

      return
    }

    toast({
      title: 'Successfully logged in!',
    })
  })

  return (
    <Form {...form}>
      <form onSubmit={onSubmit}>
        <div className="grid gap-4">
          <FormField
            control={form.control}
            name="email"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Email</FormLabel>
                <FormControl>
                  <Input placeholder="m@example.com" {...field} />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />
          <FormField
            control={form.control}
            name="password"
            render={({ field }) => (
              <FormItem>
                <div className="flex items-center">
                  <FormLabel>Password</FormLabel>
                  <Link
                    href="#"
                    className="ml-auto inline-block text-sm underline"
                  >
                    Forgot your password?
                  </Link>
                </div>
                <FormControl>
                  <Input type="password" placeholder="••••••••" {...field} />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />
          <SubmitButton {...action}>Login</SubmitButton>
        </div>
      </form>
    </Form>
  )
}


// SubmitButton
...
import { HookActionStatus } from 'next-safe-action/hooks'
import { isExecuting } from 'next-safe-action/status'
...

interface SubmitButtonProps {
  status: HookActionStatus
  children: ReactNode
}

export default function SubmitButton({ status, children }: SubmitButtonProps) {
  let isPending = isExecuting(status)

  const renderPending = () => {
    return (
      <>
        <ReloadIcon className="mr-2 h-4 w-4 animate-spin" />
        Please wait
      </>
    )
  }

  return (
    <Button type="submit" disabled={isPending} className="w-full">
      {isPending ? renderPending() : children}
    </Button>
  )
}

// Action

'use server'

import { redirect } from 'next/navigation'
import { action } from '@/lib/safe-action'
import { schema } from './schema'

export const loginUser = action(schema, async ({ email, password }) => {

  // ...
  const { error } = await databaseThing()
  if (error !== null) {
    console.log('error', error.message)
    return { failure: error.message }
  }

  redirect('/')
})

Thanks in advance for your assistance. It's possible that I might be overlooking something, so any additional guidance or insights would be greatly appreciated.