How to display processing spinner/gif with bootbox modal dialog

I was using boot box for modal popup and able to display modal popup. When user click on Generate Returns button I am using callback function and trying to display spinner. I am using ajax to save data from the modalpopup. Here I was not able to display spinner icon to user some thing is processing. Here is my code

bootbox.dialog({
    message: data,
    size:"large",
    title: "<font color=red>Product Returns Log</font>",
    buttons: {
        success: {
            label: "Generate Returns",
            className: "btn-success",
             callback: function() {                         
             var input_data = jQuery("#returns_dialog_form").serialize();
              var textarea_val = jQuery("#retunrs_log").val();
                if(textarea_val == '') {
                    bootbox.alert("<font color=red>Please enter the log details</font>");
                    jQuery("#retunrs_log").focus();
                    return false;
                }
                else {
                      savelog_generate_returns(ids_string,textarea_val);
                    }
              } 
        },
        cancelbutton: {
            label: "Cancel",
            className: "btn-warning"
            
        }

    }
});   

In this function savelog_generate_returns(), I was trying to display spinner. But it was dispalying after completion of the process.

function savelog_generate_returns(order_ids,log_detail) {
bootbox.dialog({
title: 'A custom dialog with init',
    message: '<p><i class="fa fa-spin fa-spinner"></i> Loading...</p>'
});
    jQuery.ajax({
    async: false,
    type: 'POST',
    data: {order_ids:order_ids,log_detail:log_detail},
    url: "<?php echo BASE_URL;?>generate_returns/test",
    success: function(valid_result)
        {
            if(valid_result == 1)
            {
                returns_type_Table.draw();  
            }
        }
   });
}

But this part was displaying after execution of the function.

`bootbox.dialog({
    title: 'A custom dialog with init',
        message: '<p><i class="fa fa-spin fa-spinner"></i> Loading...</p>'
    });`

I would like to display spinner icon when user click on the Generate Returns button .Please guide me where I am doing wrong? Any help would be greatly appreciated..

Assuming you're using the most recent version of Bootbox, there is an onShow or onShown option you'll want to leverage. Something like this:

function savelog_generate_returns(order_ids,log_detail) {
    bootbox.dialog({
        title: 'A custom dialog with init',
        message: '<p><i class="fa fa-spin fa-spinner"></i> Loading...</p>',
        onShown: function() {
            jQuery.ajax({
                async: false,
                type: 'POST',
                data: { order_ids : order_ids, log_detail : log_detail },
                url: "<?php echo BASE_URL;?>generate_returns/test",
                success: function(valid_result) {
                    if(valid_result == 1) {
                        returns_type_Table.draw();  
                    }
                }
            });
        }
    });
}

This will delay the AJAX call until the dialog has completed the show.bs.modal or shown.bs.modal event (depending on which handler you used). Otherwise, you're basically in a race to see whether the dialog displays before the AJAX call completes.

If you're using an older version of Bootbox, you can accomplish more or less the same thing by using the bootbox.init() function:

function savelog_generate_returns(order_ids,log_detail) {
    bootbox.dialog({
        title: 'A custom dialog with init',
        message: '<p><i class="fa fa-spin fa-spinner"></i> Loading...</p>'
    })
    .init(function() {
        jQuery.ajax({
            async: false,
            type: 'POST',
            data: { order_ids : order_ids, log_detail : log_detail },
            url: "<?php echo BASE_URL;?>generate_returns/test",
            success: function(valid_result) {
                if(valid_result == 1) {
                    returns_type_Table.draw();  
                }
            }
        });
    });
}

As a side note, using async: false in your AJAX options is generally a bad idea, unless you have a really good and defensible reason for setting that.