How to disable submit button while filepond is uploading

I am using filepond with livewire. It works well. However, I would like to disable the submit button while filepond is uploading documents. Here is the filepond component.

<div
    wire:ignore
    x-data
    x-init="
        FilePond.setOptions({
            allowMultiple: {{ isset($attributes['multiple']) ? 'true' : 'false' }},
            server: {
                process: (fieldName, file, metadata, load, error, progress, abort, transfer, options) => {
                    @this.upload('{{ $attributes['wire:model'] }}', file, load, error, progress)
                },
                revert: (filename, load) => {
                    @this.removeUpload('{{ $attributes['wire:model'] }}',filename, load)
                },
            },
        });
        FilePond.create($refs.input);
    "
>
    <input type="file" x-ref="input" >
</div>

Here is the field.

<x-form.input.filepond wire:model="additionalDocs" multiple/>

Here is the button:

<button wire:loading.attr="disabled" type="submit" class="btn btn-primary">Save</button>

I have tried this:

<div wire:loading wire:target="additionalDocs">

The last one almost works but it will let you submit between files uploading and it flashes on and off. Is there any way to disable the submit while filepond is working on file uploads?