Jquery с возможностью добавления данных при добавлении анимации загрузки на стороне клиента

Question

Я получаю массив с моего сервера в моем интерфейсе. Я использую этот массив для создания строки строк таблицы и вставки строк в таблицу данных. Так как это заняло около 4-5 секунд, я хотел добавить анимацию загрузки. Итак, я просто изменяю отображение блока анимации на блокировку, и после завершения рисования таблицы я оставляю свойство display равным none. По крайней мере, это то, что я пытался выполнить sh

function populateAssignedJobsTable(assignedData) {
    $(".animation-box").css("display","block")
    let rows = ""
    tblStudents.clear().draw()




    for(let item of assignedData){

        rows = rows +  `<tr><td>${item.Number}</td>
                                    <td>${item.Description}</td>
                                    <td>${item.Address}</td>
                                    <td>${item.Subject}</tr>`

    }

    tblStudents.rows.add($(rows)).draw();

    setTimeout(()=>{
        $(".animation-box").css("display","none")
    },3000)



}

Однако окно анимации не отображается до завершения рендеринга таблицы. Он отображается в течение 3 секунд после того, как таблица заканчивает рендеринг, даже если я сохранил строку для отображения блока в верхней части функции.

Странно то, что когда я использую консольный отладчик Google и перебираю код, анимация появляется перед визуализацией таблицы. Похоже, что есть странное асин c поведение, которого я не вижу.