How to use a spinner while loading data?

ioclaudio

Hi,
I'm using datatable to format a long table shown when the page is loaded.
It is necessary to show a spinner because it takes some time for the page to be formed and for the datatables javascript to be downloaded and the css to be applied.
The code that I'm using to configure the table is:

var table = $('#usersTab').DataTable({
    dom: 'Blfrtip',
    buttons: [
        'csv', 'excel', 'pdf', 'print'
    ],
    "scrollX": true,
    "order": [[ 1, "asc" ]],
    language: {
        url: 'https://cdn.datatables.net/plug-ins/1.10.24/i18n/Italian.json',
    },
    orderCellsTop: true,
    fixedHeader: true,
    initComplete: function () {
        console.log('@@@ init complete @@@');
        $("body").removeClass("loading");
    }
});

In this site, in other pages, I'm using the class "loading" to show a loader.

I think that "initComplete" is the right place to close the loader.
The problem is that I don't know when to start the spinner.

When is it best way to activate the spinner?

Thank you

cld

ioclaudio

At the moment I'm using this procedure and it seems to work well:

    $("body").addClass("loading");
    $(document).ready(function() {

        var table = $('#usersTab').DataTable({
            dom: 'Blfrtip',
            ....
            initComplete: function () {
                console.log('@@@ init complete @@@');
                $("body").removeClass("loading");
            }
        });
    }