Как установить экран загрузки для формы, которая требует времени на обработку в Django?

У меня есть следующее представление (с некоторым кодом, удаленным для простоты):

def add_entry(request, num):
    form = ModelForm1()
    form2 = Form2()
    if request.method == 'POST':
        form = ModelForm1(request.POST)
        form2 = Form2(request.POST)
        if form.is_valid() and form2.is_valid():
            text = form2.cleaned_data['text']
            database_dict = process_data(text)
            # Some code here that dictates how data is saved from the dictionary....
            entry.save()
            return redirect('entries', num)
    return render(request, 'app/add_entry.html', {"form": form, "form2": form2})

В основном, это представление содержит форму, которая принимает текстовый ввод. Этот текстовый ввод обрабатывается функцией, которая возвращает словарь значений. Эти значения затем сохраняются в базе данных, и эта база данных выводится в шаблон "entries.html".

В зависимости от количества текста в форме, его обработка может занять довольно много времени, и это время тратится на экран ввода формы. Я хотел бы добавить промежуточный "загрузочный" экран, на который пользователь попадает во время обработки формы, который затем перенаправляет на entires.html после завершения обработки, но я не могу найти, как это сделать. Добавление редиректа без оператора "return" сразу после обработки данных, похоже, ничего не дает, а добавление "return" все портит.

Как мне это сделать?

Вот один из подходов, использующий загрузчик Bootstrap 5, следуя рекомендациям Луиса в комментариях. Добавьте весь приведенный ниже код в Add_entry.html

Шаг 1: Добавить html-элемент, содержащий загрузчик

Убедитесь, что style="display: none;"

<div id="loadingModal" style="display: none;">
    <button class="btn btn-primary" type="button" disabled>
      <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
      Loading...
    </button>
</div>

Шаг 2: Добавьте js-функцию для отображения загрузчика при отправке формы

<script>

function openLoader() {
    document.getElementById("loadingModal").style.display = "block";
  }

</script>

Шаг 3: Назначьте js функцию на onsubmit= в элементе формы

<form method="POST" onsubmit="openLoader()">
    {% csrf_token %}
    ...form contents here...
</form>

Когда форма успешно отправлена, появится модальное окно загрузки, а затем исчезнет, когда редирект сработает, как вы указали.

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