How to fix "delay" when loading the datatable?

Question

When loading the page containing the data into the datatable the following failure occurs: first all data is loaded into the datatable and is visible to the user; after a few seconds this data is displayed in the correct way (grouped by 5 records per page). The following images show the problem that is occurring.

Image 1: When the page is loaded all data from the datatable is displayed (this is a failure).

Image 2: After a few seconds the datatable data is displayed in the correct way.

.

Doubt: How to correct the delay when loading the data?

Javascript File to Configure the datatable: I entered the variable deferLoading and assigns the value 0, but the error has not been corrected.

$(document).ready(function () {
    var titulo = $('.page-title').text();



    var table = $('.dataTable').DataTable({
        language: {
            processing:     "Traitement en cours...",
            search:         "Pesquisar :",
            lengthMenu:     "Visualizar&nbsp _MENU_ &nbspregistros",
            info:           "Mostrando _START_ à _END_ de _TOTAL_ registros",
            infoEmpty:      "",
            infoFiltered:   "(Filtrados de _MAX_ registros ao total)",
            infoPostFix:    "",
            loadingRecords: "Chargement en cours...",
            zeroRecords:    "Aucun élément à afficher",
            emptyTable:     "Não há registros com as informações.",
            paginate: {
                first:      "Primeira",
                previous:   "Anterior",
                next:       "Próxima",
                last:       "Última"
            },

            aria: {
                sortAscending:  ": activer pour trier la colonne par ordre croissant",
                sortDescending: ": activer pour trier la colonne par ordre décroissant"
            }
        },
        info: false,
        lengthMenu: [[5, 10, 25, -1], [5, 10, 25, "All"]],
        dom: '<"top"B>rt<"row"><"col-md-12"><"col-md-4"fl><"col-md-3"i><"col-md-5"p>',
        searching: false,
        deferLoading: 0,





      buttons: [
            {
                extend: 'print',
                text: '<i class="fa fa-print" aria-hidden="true"></i>',
                title: titulo,
                titleAttr: 'Imprimir',
                exportOptions: {
                    columns: ':visible'
                } 
            },

            {
                extend: 'copy',
                text: '<i class="fa fa-files-o" aria-hidden="true"></i>',
                title: titulo,
                titleAttr: 'Copiar',
                exportOptions: {
                    columns: ':visible'
                } 
            }, 
            {
                extend: 'excel',
               text: '<i class="fa fa-file-excel-o" aria-hidden="true"></i>',
                title: titulo,
                titleAttr: 'Excel',
                exportOptions: {
                    columns: ':visible'
                } 
            },
            {
                extend: 'pdf',
                text: '<i class="fa fa-file-pdf-o" aria-hidden="true"></i>',
                title: titulo,
                titleAttr: 'PDF',
                exportOptions: {
                    columns: ':visible'
                } 
            },
            {
                extend: 'colvis',
                text: '<i class="fa fa-eye" aria-hidden="true"></i>',
                title: titulo,
                titleAttr: 'Visibilidade das colunas',
                exportOptions: {
                    columns: ':visible'
                }
            } 
        ]  

    // table.buttons().container().appendTo( '#teste22' );
}); 




});

References of datatable libraries:

    <!--Inicio da biblioteca DataTables-->
     <script src="{{asset('js/datatables/dataTables.buttons.min.js')}}"></script>
     <script src="{{asset('js/datatables/buttons.flash.min.js')}}"></script>
     <script src="{{asset('js/datatables/jszip.min.js')}}"></script>
     <script src="{{asset('js/datatables/pdfmake.min.js')}}"></script>
     <script src="{{asset('js/datatables/vfs_fonts.js')}}"></script>
     <script src="{{asset('js/datatables/buttons.html5.min.js')}}"></script>
     <script src="{{asset('js/datatables/buttons.print.min.js')}}"></script>
     <script src="{{asset('js/datatables/buttons.colVis.min.js')}}"></script>
  <!--Fim da biblioteca DataTables -->  
     <script  src="{{asset('js/app-js.js')}}"></script>
     <script  src="{{asset('js/pages-js/projeto/projeto-index.js')}}"></script>

Code of the html page containing the datatable:

<div class="box-body">      
  <div class="row row-lg">
  <div class="col-md-12">
      <!-- Example Basic -->
      <div class="example-wrap">
          <div class="example table-responsive" >
          @if(empty($projetos))
                <div>Você não tem nenhum projeto cadastrado.</div>
          @else
                            <table id="userTable" class="table table-hover table-bordered table-striped table-responsive toggle-arrow-tiny dataTable">
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>Nome</th>
                                        <th>Tipo de Processo</th>
                                        <th>Data de Inicio</th>
                                        <th>Data de Fim</th>
                                        <th class="text-center"></th>
                                    </tr>
                                </thead>
                                <tbody id="bodyUsers">
                                @foreach($projetos as $projeto)
                                    <tr>
                                        <td>{{$projeto->id}}</td>
                                        <td>{{$projeto->nome_projeto}}</td>
                                        <td>{{$projeto->tipo_processo}}</td>
                                        <td>{{$projeto->dt_inicio}}</td>
                                        <td>{{$projeto->dt_fim}}</td> 

                                        <td class="text-center">
                                        @if($permissoesPerfil->update == 1)
                                            <a class="btn btn-xs btn-icon btn-primary btn-round waves-effect waves-light waves-round"
                                               title="Editar" href="{{URL::to('/projetos/edita', $projeto->id)}}">
                                               <i class="fa fa-pencil" aria-hidden="true"></i>
                                            </a>
                                        @endif
                                        &nbsp
                                        @if($permissoesPerfil->view == 1)
                                            <a class="btn btn-xs btn-icon btn-success btn-round waves-effect waves-light waves-round btnView "
                                                data-target="#exampleModalSuccess" data-toggle="modal" title="Visualizar"
                                                data-id="{{$projeto->id}}" data-processo="{{$projeto->tipo_processo}}" data-nome="{{$projeto->nome_projeto}}"
                                                data-datainicio="{{$projeto->dt_inicio}}" data-datafim="{{$projeto->dt_fim}}">
                                                <i class="fa fa-search" aria-hidden="true"></i>
                                            </a>
                                        @endif
                                        &nbsp
                                        @if($permissoesPerfil->delete == 1)
                                            <a data-target="#modalExclusao" data-toggle="modal" id="btnExcluir" data-id="{{$projeto->id}}" data-nome="{{$projeto->nome_projeto}}"
                                               class="btn btn-xs btn-icon btn-danger btn-round waves-effect waves-light waves-round" title="Excluir">
                                               <i class="fa fa-trash-o" aria-hidden="true"></i>
                                            </a>
                                        @endif
                                        </td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- End Panel Form Elements -->