Как отобразить прогресс / пожалуйста, подождите компонент типа, ожидая длинного запроса POST

Question

Я создаю веб-приложение, которое включает в себя некоторые функции, выполнение которых может занять несколько секунд, например импорт 2000+ сущностей после нажатия на ссылку.

Одна из таких функций - сначала пользователь выбирает файл CSV, загружает его на сервер, а затем перебирает его построчно, чтобы создать связанные сущности и сохранить их в базе данных.

Вот пример того, как выглядит страница JSP:

1007 * JSP *

<form method="POST" enctype="multipart/form-data" action="<c:url value="/import/importFormulary" /> " class="form-style-7">
            <ul>
                <li>
                    <label> File : </label>
                    <input type="file" name="file" accept=".csv"/>
                </li>
            </ul>
            <input type="submit" value="Upload and Import" />
            <input type="reset" value="Reset" />
        </form>       

Я бы хотел, чтобы отправка этой формы вызывала наложение на странице. Примерно так было бы ДЕЙСТВИТЕЛЬНО приятно: http://tobiasahlin.com/spinkit/

Я понимаю, что сообщение "ожидание локального хоста" означает, что контроллер выполняет свою работу в фоновом режиме, что означает, что страница, на которой находится эта форма, технически больше не активна. Зная этот факт, я изо всех сил пытаюсь понять, как реализовать это. У меня есть место в моем приложении, где я делаю AJAX-запрос каждую секунду, чтобы обновить содержимое таблицы, и у меня есть ощущение, что это направление, которое нужно исследовать, чтобы достичь желаемого результата, но я вижу пример того, как сделано было бы очень полезно.

Как показать вращающийся кружок: подождите, пожалуйста, на текущей странице, ожидая, пока базовый контроллер завершит обработку?

Answer 1

Я решил что-то вроде этого, любезно предоставил шрифт:

<a th:href = "@{'/export/formularyAdd/' + ${facility.id}}" class="btn btn-outline-info eBtn" 
    title="Export Formulary Add Messages" onclick="showPleaseWait()">

Написал эту функцию во включенном файле JS:

function showPleaseWait()
{
    $('.modal').modal('show');
}

<div class="modal fade bd-example-modal-lg" data-backdrop="static" data-keyboard="false" tabindex="-1">
    <div class="modal-dialog modal-sm">
        <div class="modal-content" style="width: 200px;">
            <span class="fa fa-spinner fa-spin fa-5x fa-fw" style="width: 200px;"></span>
            <p class="please-wait-message">Please wait</p>
        </div>
    </div>
</div>

На моей странице следующий импорт:

<link rel="stylesheet" th:href="@{/webjars/font-awesome/4.7.0/css/font-awesome.min.css}"/>

И, наконец, этот импорт Maven:

<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>font-awesome</artifactId>
    <version>4.7.0</version>
</dependency>

Это позволяет контроллеру делать свое дело и отображать счетчик хода выполнения до тех пор, пока страница не будет перенаправлена.