Загрузчик страниц при получении данных из базы данных PostgreSQL в Django

Я использую Django с базой данных PostgreSQL для создания сайта для ввода и просмотра данных. На странице просмотра данных есть несколько таблиц, которые заполняются данными из базы данных. Я пытаюсь реализовать загрузчик страниц, который будет отображаться до тех пор, пока данные не будут извлечены из базы данных и веб-страница не будет полностью загружена. На данный момент загрузчик появляется только после получения данных, а затем лишь кратковременно мигает, пока страница полностью загружается. Как сделать так, чтобы он появлялся с момента первого щелчка на ссылке для перехода на страницу?

Вот мой html:

<div id="page-loader">
    <div class="loader-spinner"></div>
    <p class="loader-message">Loading...</p>
</div>

Мой CSS:

#page-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 300px;
    z-index: 999999;
    background-color: rgba(75, 75, 75, 0.75);
    border-radius: 10px;
}

.loader-spinner {
    width: 50px;
    height: 50px;
    border: 2px solid #FC6620;
    border-radius: 50%;
    border-top: 2px solid #fff;
    animation: spin 1s linear infinite;
    margin: 0;
    z-index: 999999;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.loader-message {
    margin-left: 10px;
    font-size: 24px;
    color: #FC6620;
    z-index: 999999;
}

и мой Javascript:

document.addEventListener('readystatechange', () => {
    document.getElementById("page-loader").style.display = "visible";
})

window.onload = function() {
    document.getElementById("page-loader").style.display = "none";
}

Все работает нормально, кроме моего кода javascript. Я пробовал различные четные слушатели, такие как load и DOMContentLoaded. Ничего не помогло. Любая помощь будет очень признательна!

Вернуться на верх