Код до отправки http запроса выполняется после получения ответа

Делаю sp.textContent = 'Состояние: В работе';

После этого делаю запрос на сервер, по задумке пока я жду ответ от сервера должно быть состояние "в работе"

function startParse() {

    sp = document.getElementById('status');
    sp.textContent = 'Состояние: В работе';
    arrayOfCheck = []
    let checkboxes = document.getElementsByClassName('check');
    for (i = 0; i < checkboxes.length; i++) {
        if (checkboxes[i].checked) {
            arrayOfCheck.push(checkboxes[i].value);
        }
    }
    let forms = document.getElementsByClassName('form1');
    let dataArrs = [];
    dataArrs[0] = forms[0].value;
    dataArrs[1] = forms[1].value;
    dataArrs[2] = forms[2].value;
    dataArrs[3] = forms[3].value;
    dataArrs[4] = document.getElementsByClassName('formYear')[0].value;
    const xhr = new XMLHttpRequest();
    xhr.open('POST', '/toParse', false);
    const data = new FormData();
    data.append('dataArrs0', dataArrs[0]);
    data.append('dataArrs1', dataArrs[1]); 
    data.append('dataArrs2', dataArrs[2]);  
    data.append('dataArrs3', dataArrs[3]);  
    data.append('dataArrs4', dataArrs[4]);
    xhr.send(data);
    obj = JSON.parse(xhr.responseText);
    mainArray = obj['result'];
    resultList = [];
    for (i = 0; i < mainArray.length; i++) {
        for (j = 0; j < mainArray[i].length; j++) {
            resultList.push(mainArray[i][j]);
        }
    }
    resultArea = document.getElementsByClassName('result')[0]
    for (i = 0; i < resultList.length; i++) {
        console.log(resultList[i]);
        resultArea.innerHTML += '<a href=' + resultList[i] + ' target="_blank">' + resultList[i].slice(0,75) + '</a>\n';
        resultArea.innerHTML += '<br>';
    }
}

При этом если смотреть код элемента, то textContent меняется, а отображение изменения происходит только после получения ответа.