Добавление представления загрузки во время процесса следующего представления в Django

Я хочу добавить страницу загрузки во время процесса, я пробовал все решения здесь в stackoverflow и различных статьях, но я действительно удивлен, что решения не работают для меня, Прошло 2 дня, и я все еще не нашел решение.

У меня есть две страницы Home и datatable Я хочу добавить страницу загрузки, когда я перенаправляю с главной страницы на страницу datatable. Пожалуйста, любая помощь будет высоко оценена.

вот мой view.py :

def home_view(request):
    context = {}
    context ['form'] = Scraping()
    return render(request,'home.html', context)
def datatable_view(request):
    if request.method =='POST':
        if form.is_valid():
            return render(request,'datatable.html')

Как я уже говорил, ajax вызовы должны работать, я попробовал и это работает. вот код В локальном коде мне пришлось установить функцию TimeOut, потому что ответ быстрый, и я не могу увидеть эффект загрузки.

Html:

<style>
.loader {
  border: 16px solid #f3f3f3; /* Light grey */
  border-top: 16px solid #3498db; /* Blue */
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>

<div class="loader" style="display: none;" id="id_loader"></div>

Событие щелчка мыши: 

function saveProfile() {
            var postData = new FormData();
            let token = localStorage.getItem("token");
            postData.append('profile_id', $("#id_profile_id").val().trim());
            postData.append('user_id', $("#id_user_id").val().trim());
            postData.append('username', $("#id_username").val().trim());
            postData.append('password', $("#id_password").val().trim());
            postData.append('first_name', $("#id_first_name").val().trim());
            postData.append('last_name', $("#id_last_name").val().trim());
            postData.append('phone', $("#id_phone").val().trim());
            postData.append('email', $("#id_email").val().trim());
            postData.append('address', $("#id_address").val().trim());

            $("#id_loader").show()
            setTimeout(function () {
                axios({
                    method: "post",
                    url: "http://192.168.1.249:7001/profile_save/",
                    data: postData,
                    headers: { "Content-Type": "application/json", 'X-CSRFToken': '{{ csrf_token }}', Authorization: `Bearer ${token}`, },
                }).then(function (response) {
                    if (response.data && response.data.code == 1) {
                        $("#id_loader").hide();
                        swal("Successful!", response.data.msg, "success")
                    }
                    else if (response.data.code == 0) {
                        $("#id_loader").hide();
                        swal("Oops!", response.data.msg, "error")
                    }
                })
            }, 2000);
        }
Вернуться на верх