我试图创建一个删除功能，其中它将显示一个loading state使用useMutate的tanstackquery，但问题是，当我删除按钮，它不显示加载状态，即使我改变网络速度。

的数据

const ButtonAction = ({ id }: ButtonActionProps) => {
  const router = useRouter();

  const { mutate: deletePost, isLoading } = useMutation({
    mutationFn: () => {
      return axios.delete(`/api/posts/${id}`);
    },
    onError: (error) => {
      console.error(error);
    },

    onSuccess: () => {
      router.push("/");
      router.refresh();
    },
  });

  

  return (
    <div>
      <Link href="/edit/1" className="btn mr-2">
        {" "}
        <Pencil /> Edit
      </Link>
      <button onClick={() => deletePost()} className="btn btn-error">
        {" "}
        {isLoading && (
          <span className="loading loading-spinner loaddeing-xs"></span>
        )}
        {isLoading ? (
          "Loading..."
        ) : (
          <>
            <Trash />
            Delete
          </>
        )}
      </button>
    </div>
  );
};

export default ButtonAction;

字符串