SPO: Show loading gif on Page until Datatable has loaded completely and is clickable

Question

I have a Datatable on a Page that takes around 7-10 seconds to load. I have a loader script that initiates a loader gif when the page is first visited, but the loader gif fades out well before all of the datatable is loaded. I cannot figure out why this happens.

Is it possible for the loading gif to display on the screen until the entirety of the datatable is loaded and clickable? Then, once the datatable has fully loaded, the loading gif should disappear. I've included the datatable script as well as the loader script I'm currebntly using that isn't working.

Datatables Code

$(document).ready(function() {  
    loadMyItems();  
});  

function loadMyItems() {  
    var siteUrl = _spPageContextInfo.siteAbsoluteUrl;  
    var oDataUrl = siteUrl + "/_api/web/lists/getbytitle('MyLibrary')/items?$select=ID,Title&$top=5000";  
    $.ajax({  
        url: oDataUrl,  
        type: "GET",  
        dataType: "json",  
        headers: {  
            "accept": "application/json;odata=verbose"  
        },  
        success: mySuccHandler,  
        error: myErrHandler  
    });  
}  

function mySuccHandler(data) {  
    try {  
        var dataTableExample = $('#table_id').DataTable();  
        if (dataTableExample != 'undefined') {  
            dataTableExample.destroy();  
        }  
        dataTableExample = $('#table_id').DataTable({  
         <!-- scrollY: 800, -->  
            "aaData": data.d.results,  
                "iDisplayLength": 100,
            "aoColumns": [{
        "mData": "ID"  
            }, {      
                "mData": "Title"  
            }]  
        });  
    } 
catch (e) {  
        alert(e.message);  
    }  
}  

Loader JS

<script type="text/javascript">
(function($){
// preloader
    $(window).ready(function(){
    $('#preloader').delay(100).fadeOut(1000);
    $('#overlay').delay(400).fadeOut(1000);
})

}(jQuery));
</script>

Loader CSS

.spinner {
                width: 80px;
                height: 80px;
                border: 2px solid #103c6d;
                border-top: solid #EF4931;
                border-left:dotted #ffd300;
                border-bottom: solid #B9CEC5;
                border-radius: 100%;
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                margin: auto;
                animation: spin .4s infinite linear;
}
@keyframes spin {
                from {
                                transform: rotate(0deg);
                }
                to {
                                transform: rotate(360deg);
                }
}
#overlay {
                height: 100%;
                width: 100%;
                background: rgba(0, 0, 0, 1);
                position: absolute;
                text-align: center;
                left: 0;
                top: 0;
                bottom: 0;
                right: 0;
}

Answer 1

DataTables emits events which you can listen for. In particular, you could listen for the draw event which fires when the table is done drawing.

So you could do something like

function mySuccHandler(data) {
    try {
        var dataTableExample = $('#table_id').DataTable();
        if (dataTableExample != 'undefined') {
            dataTableExample.destroy();
        }

        // using one() here instead of on() will ensure
        // that the attempt to remove the loader
        // will only happen after this initial table draw
        $('#table_id').one('draw.dt', function() {
            $('#overlay').fadeOut(1000);
        });

        dataTableExample = $('#table_id').DataTable({  
            <!-- scrollY: 800, -->
            "aaData": data.d.results,
            "iDisplayLength": 100,
            "aoColumns": [{
                "mData": "ID"
            }, {
                "mData": "Title"
            }]  
        });
    }
    catch (e) {
        alert(e.message);
    }  
}