Datatables - on page load, table layout does not l

There's a problem with datatables.js - when the page loads, the css with pagination is slightly delayed, so the whole data shows very quickly initally before it shows the css with pagination.

The same problem shows on this fiddle, when reloading the page you can see that it blinks, showing first the table without pagination, then with pagination (but the effect is very fast on this fiddle especially on chrome; on firefox it's slower and more noticable (for me), but on my application it is very noticable and bad looking.
Datatables example

I have tried to order styles and scripts, also trying to put things in the footer (currently it's all in the header) but it doesn't seem to matter. I also found another fiddle with datatables which shows the same thing on page load: ( some other datatables example ). Is it a bug?

Here are scripts and styles involved:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"  type="text/css" rel="stylesheet">

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.15/js/dataTables.bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script src="{{ base_url }}application/assets/js/datatablejs.js" type="text/javascript"></script>

As per the comment:

CSS:

#list {
    display: none;
}

JS:

$('#list').DataTable({
    "columns": [ 
        { 
            "width": "45%" 
        }, 
        null, 
        null
    ],
    "initComplete": function(){ 
        $("#list").show(); 
    }
});

Working JSFidlle here. Hope that helps.