JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/r/bs-3.3.5/jqc-1.11.3,dt-1.10.9,r-1.0.7/datatables.min.css">
<script src="https://cdn.datatables.net/r/bs-3.3.5/jqc-1.11.3,dt-1.10.9,r-1.0.7/datatables.min.js"></script>
<div class="container">
    <div id="wait"class="text-center">
        <h1>Loading in progress, please wait, ...</h1>
    </div>
    <div id="table-div-wait" _style="display: none;" style="visibility:hidden">
        <table id="table-test" class="table-recap table nowrap" width="100%">
            <thead>
                <tr>
                    <th>Col1</th><th>Col2</th><th>Col3</th><th>Col4</th><th>Col5</th>
                </tr>
            </thead>

            <tbody>
                <tr><td>Val 1</td><td>Val 2</td><td>Val 3</td><td>Val 4</td><td>Val 5</td></tr>
            </tbody>
        </table>
    </div>
</div>

JavaScript

$(document).ready(function() {
    var oTable = $('.table-recap').DataTable( {
        "processing": true,
        "autoWidth": true,
        "initComplete": function(settings, json) {
            $('#wait').hide();
            //$('#table-div-wait').show(); // does not work with style="display: none;"
            $('#table-div-wait').css({"visibility":"visible"});
        },
        "pagingType": "full_numbers",
        "dom": "<'row'<'col-sm-6'l><'col-sm-6'f>>" + "<'row'<'col-sm-12'tr>>" + "<'row'<'col-sm-5'i><'col-sm-7'p>>"
    } );
});