Showing and Dismissing loading Toast in clientAction function in Remix / React Router

Component.tsx

// Cara simple Showing and Dismissing loading Toast 
// di clientAction function in Remix / React Router

// Toast library: https://react-hot-toast.com/docs/toast

function runFormValidation(formData) {
  //...
}

export async function action({ request, params }: ActionFunctionArgs) {
   const formData = await request.formData();
   
   // some server-side form validation maybe
   runFormValidation(formData);
   
   return json({ somdata })
}

export async function clientAction({ request, serverAction}: ClientActionFunctionArgs) {
  
  const formData = await request.clone().formData();

  // some client-side form validation maybe
  runFormValidation(formData);
  
  // start loading after form validation passed
  toast.loading('Processing...' , {
    duration: Infinity,
  });

  return await serverAction<typeof action>().finally(() => {
    // dismiss when the server-side action finish 
    toast.dismiss();
  });
}