Реализация загрузочного счетчика

Question

Я пытаюсь реализовать загрузочный счетчик в рельсах 5. Спиннер должен появляться и вращаться, когда объект удаляется из табличного представления (также удаляется из базы данных). Действие удаления обрабатывается в файле с именем destroy.js.erb. Проблема в том, что я указал последовательность событий: 1. Показать счетчик 2. Удалить из базы данных 3. Отправить уведомление по электронной почте 4. Скрыть счетчик

Но по какой-то причине, когда я нажимаю удалитьСначала выполняются шаги 2 и 3, а затем 1. Даже при том, что порядок ясен!

Если я удаляю функции удаления и отправки (которые обрабатываются в рельсах), порядок javascript выполняется правильно (например, просто чтобы показать, а затем сразу скрыть счетчик). Но как только между шагами 1 и 4 возникает операция с рельсами, порядок нарушается.

Я уже пробовал несколько вещей, которые не работали:

1. Я попытался запустить операции rails внутри контроллера уничтожения, а затем отобразить destroy.js.erb, чтобы показать и скрыть счетчик (очевидно, не сработало, потому что сначала он всегда запускает ruby)

2. Я пыталсясделать все в файле js.erb, указав указанный выше порядок и используя встроенный ruby ​​для операций ... также не сработало, потому что код ruby ​​всегда выполняется первым.

Любая помощь будет оценена.

Вот код для моего destroy.js.erb:

$("#spinner").show();

$("#internal_request_<%= @request.id %>").remove();

"<%@request.destroy%>";

"<%CancelRequestMailer.cancel_request_email(@current_requester, @recipients, @request).deliver%>";

$("#spinner").hide();

Вот код для application.js

//= require rails-ujs
//= require turbolinks
//= require_tree .
//= require jquery

$( document ).ready(function() {

  // hide spinner
  $("#spinner").hide();
});

Вот html.erb для кнопки

<%= link_to request, :method => :delete, data: {:confirm => "Are you sure?"}, remote: true do %>
  <button type="button" class="btn btn-outline-danger">
    <i class="fas fa-ban fa-fw"></i>
  </button>
<% end %>

Опять ... Все это работает ... Просто порядок неправильный ... Спиннер появляется только тогда, когда все уже сделано(удаление, письмо отправлено ..)

Должно бытьгруша и останься, пока выполняются операции, а потом уходи.

Answer 1

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

Я предпочитаю Блесны Twitter Bootstrap . Есть много уникальных опций, и это очень настраиваемый.