Django - отображение "work-in-progress" после отправки формы до получения результата

У меня есть веб-страница, посвященная ценообразованию в Интернете, где клиент может ввести некоторые данные, затем отправить форму и получить в ответ цену. Как временно отобразить что-то вроде "незавершенного процесса" до того, как будет рассчитан/возвращен окончательный результат (например, цена).

Ниже приведен упрощенный код из моего сайта:

Основной html (post_list.html) (Примечание: я использую htmx для частичного обновления результата страницы)

<html>
    <body>
        <form method="POST" hx-post="{% url 'post_list' %}" hx-target="#num_1" hx-target="#num_2" hx-target="#result">
            {% csrf_token %}
            <div>
            <label>num_1:</label>
            <input type="text" name="num_1" value="" placeholder="Enter value" />
            </div>
            <div>
            <label>num_2:</label>
            <input type="text" name="num_2" value="" placeholder="Enter value" />
            </div>

            <br />
            <div id="num_1">{{ num_1 }}</div>
            <br />
            <div id="num_2">{{ num_2 }}</div>
            <br />
            <div id="result">{{ result }}</div>
            <br>
            <button type="submit">Submit</button>
        </form>
        <script src="https://unpkg.com/htmx.org@1.6.1"></script>
    </body>
</html>

post_list_snippet.html

<html>

    <div>
            <label>first_number:</label>
            <span id="num_1"> {{ num_1 }} </span>
    </div>

    <div>
            <label>second_number:</label>
            <span id="num_2"> {{ num_2 }} </span>
    </div>

    <div>
            <label>calculation_result:</label>
            <span id="result"> {{ result }} </span>
    </div>

</html>

view.py

def post_list(request):
    result = ""
    num1 = ""
    num2 = ""
    if request.method == "POST":
        num1 = request.POST.get('num_1')
        num2 = request.POST.get('num_2')
        result = int(num1) + int(num2)

    if request.headers.get('Hx-Request') == 'true':
        # return only the result to be replaced
        return render(request, 'blog/post_list_snippet.html', {'num_1': num1,'num_2': num2,'result': result})
    else:
        return render(request, 'blog/post_list.html', {'num_1': num1,'num_2': num2,'result': result})

Вот один подход с использованием загрузчика Bootstrap 5. Добавьте весь приведенный ниже код в main.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 onsubmit="openLoader()" method="POST" hx-post="{% url 'post_list' %}" hx-target="#num_1" hx-target="#num_2" hx-target="#result">
    {% csrf_token %}
    ...form contents here...
</form>

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

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