Sometimes, I have a large tables to display ~20K rows and 17 columns. It will take ~30 seconds for the responsive to show the "green +". During the waiting time, everything locks up.

I wish there was a built in responsive waiting property I can use.

I just use the default rendering and would like to add the "loading gif" at the beginning and ending of responsive. I have a loading.gif which works well on the custom buttons.

Would you let me know what the easiest way to accomplish it?

Thanks

Here is the responsive default reddering.

        responsive: {
            details: {
                display: $.fn.dataTable.Responsive.display.modal( {
                    header: function ( row ) {
                        var data = row.data();
                        return 'Details for '+data[1];
                    }
                } ),
                renderer: $.fn.dataTable.Responsive.renderer.tableAll()
            }
        },

I show and hide the the loading gif at the custom buttons and it works well. I want to know how I can implement the same to the responsive renderer just for the setting above..

$('#loading').show();
$('#loading').hide();