How to create a Download while the page is not all processed after the return of AJAX?

Question

Hello.

I have a code that queries the database (when loading the page) to fill a table (This is done via AJAX).

I created a div that contains a gif from a Download and it displays as AJAX fills the page. And then it disappears when all the rows in the table are filled.

The problem that happens is that the Oader disappears, but I look at the console, and the data of the page was not completely filled. Only the table rows were displayed.

If I, for example, change a row of the table, the change cannot be executed because the page has not been fully loaded.

My situation and the following: I would like the Oader to disappear only when the TODA page finishes loading.

If below the code used.

$(document).ready(function() {

  // AO CARREGAR A PÁGINA, CHAMAR A FUNÇÃO QUE PREENCHE AS EMPRESAS

  $(function() {
    preencher_empresas();

  });

  function preencher_empresas() {

    $("div#loading").html("<img src='_imagens/load.gif' width='100px'>");

    $.ajax({
      //dataType: "json",
      type: "POST",
      url: "banco/banco-vision/pagina-cadastrar-empresas/preencher-empresas.php",
      cache: false,

    }).done(function(data) {

      $.each($.parseJSON(data), function(chave, emp) {
        $("div#loading").html("<img src='_imagens/load.gif' width='100px'>");
        //CRIANDO AS LINHAS COM OS TD DA TABELA QUE SÃO O RESULTADO NA CONSULTA AO BANCO 

        $('<tr>', {
          id: emp.codigo
        }).appendTo('#registros-empresas-cadastradas');
        $('<td>', {
          html: emp.COD
        }).appendTo('tr#' + emp.codigo);
        $('<td>', {
          html: emp.EMPRESA
        }).appendTo('tr#' + emp.codigo);
        $('<td>', {
          html: emp.TRIBUTACAO
        }).appendTo('tr#' + emp.codigo);
        barra_progresso = $('<td>').appendTo('tr#' + emp.codigo);
        $(barra_progresso).addClass("info-progress");
        td_botao_alterar = $('<td>', {
          style: "text-align:center"
        }).appendTo('tr#' + emp.codigo);

        a_botao_alterar = $('<a>', {
          href: "#",
          html: "Alterar"
        }).appendTo(td_botao_alterar);
        $(a_botao_alterar).addClass("btn btn-md btn-success");
        $(a_botao_alterar).attr('data-toggle', 'modal');
        $(a_botao_alterar).attr('data-target', '#modal-alterar-empresas');

        //Criando div progresso
        div_progress = $('<div>', {
          style: "margin-top:2px; margin-bottom:2px ;background:black;"
        }).appendTo(barra_progresso);
        $(div_progress).addClass("progress progress-striped");

        //Criando div progresso 2
        div_progress_2 = $('<div>').appendTo(div_progress);
        $(div_progress_2).addClass("div-progress2 progress-bar progress-bar-success");
        $(div_progress_2).addClass("_" + emp.COD);
        $(div_progress_2).attr("role", "progressbar");

        progressBar(emp.COD);


      });

      $("div#loading").hide();




      /*
      $('#registros-empresas-cadastradas').html(empresas);
      */

    }).fail(function() {
      alert('Falha na listagem dos usuários');

    }).always(function() {

    });

  }

  function progressBar(empresa_cod) {


    $.ajax({
      url: "banco/banco-vision/pagina-cadastrar-empresas/conta-concluidos.php",
      type: "post",
      data: {
        empresa_cod: empresa_cod
      },
      cache: false

    }).done(function(return_emp) {

      var contador_progresso = $.parseJSON(return_emp);

      console.log(contador_progresso);

      if (contador_progresso.vazio == false) {
        $("._" + empresa_cod).css("width", contador_progresso.concluidos.toFixed(2) + "%");
        $("._" + empresa_cod).html(contador_progresso.concluidos.toFixed(2) + "%");
      } else {
        $("div._" + empresa_cod).removeClass("progress-bar-success");
        $("div._" + empresa_cod).addClass("progress-bar-primary");
        $("._" + empresa_cod).css("width", "100%");
        $("._" + empresa_cod).html("Não Possui");
      }


    }).fail(function() {
      console.log("Erro ao preencher a barra de progresso");

    }).always(function() {


    });


  }


});

<!-- CÓDIGO DE PREENCHIMENTO DA TABELA E DO LOADER -->

<div id="loading" style="position: absolute;top: 0px;left: 0px;z-index: 100;"></div>

<div class="col-lg-8 col-lg-offset-2" id="listagem-empresas">

  <table class="table table-bordered table-condensed table-hover" id="resultado-empresas-cadastradas">

    <thead class="">
      <tr>
        <th>COD</th>
        <th>EMPRESAS</th>
        <th>TRIBUTAÇÃO</th>
        <th>PROGRESSO</th>
        <th>ALTERAR</th>
      </tr>
    </thead>

    <tbody id="registros-empresas-cadastradas">



    </tbody>

  </table>

</div>

<div class="col-lg-8 col-lg-offset-2" id="incluir-nova-empresas">
  <button type="button" class="btn btn-md btn-primary" id="incluir-empresa" href="#" data-toggle="modal" data-target="#modal-incluir-empresas"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> INCLUIR NOVA EMPRESA</button>
</div>

BELOW AN IMAGE OF THE LOADER APPEARING BEFORE THE LINES ARE FILLED

BELOW AN IMAGE OF THE PAGE AFTER THE TABLE APPEARS (BUT BEFORE LOADING ALL)