How to disable button while form is being created and to prevent duplicate form

I am trying to make it so that a “Submit” button is disabled when submitting and forwarding data from a form. This is to prevent the user from create multiple copies of the form when rapidly clicking the button when the initial data that was inputted is being saved.

One approach I tried was adding a debouncer to the JavaScript function that handles the submit button operations. However if the user continues to click the button after 5 seconds, the duplicate is still created.

I think a better approach would be to disable the button while the data is being submitted and give an indication to the user that the data is in the state of being saved, and after completion, reenable the button.

Here is the javascript code for context:

setupFormIO: function(submissionFunction) {
    var $this = this;
    var submitFunc = submissionFunction;
    var labelText = "Submit";

    if ($this.projectData && !this.readonly) {
        labelText = "Save";
    }
                       
    var submits = FormioUtils.searchComponents($this.template.components,
        {
            "type": "button"
        }
    );

    if (submits) {
        _.each(submits, function (component) {
            component.label = labelText;
            //
            var timer; 
            if (timer) { 
                clearTimeout(timer); 
            }
            //

            if ($this.readonly) {
                $("#" + component.id + " > button").on("click", function(evt) {
                    evt.stopPropagation();
                    location.assign("/project/ProjectHome.aspx");
                    timer = setTimeout(process, 5000); //
                });
           }
     });
}