Simple loading spinner for long requests with turbolinks and bootstrap modal

loading_spinner.coffee

@PageSpinner =
  spin: (ms=500)->
    @spinner = setTimeout( (=> @add_spinner()), ms)
    $(document).on 'page:change', =>
      @remove_spinner()
  spinner_html: '
    <div class="modal hide fade" id="page-spinner">
      <div class="modal-head card-title">Please Wait...</div>
      <div class="modal-body card-body">
        <i class="icon-spinner icon-spin icon-2x"></i>
        &emsp;Loading...
      </div>
    </div>
  '
  spinner: null
  add_spinner: ->
    $('body').append(@spinner_html)
    $('body div#page-spinner').modal()
  remove_spinner: ->
    clearTimeout(@spinner)
    $('div#page-spinner').modal('hide')
    $('div#page-spinner').on 'hidden', ->
      $(this).remove()

$(document).on 'page:fetch', ->
  PageSpinner.spin()

loading_spinner.js

this.PageSpinner = {
  spin: function(ms) {
    var _this = this;
    if (ms == null) {
      ms = 500;
    }
    this.spinner = setTimeout((function() {
      return _this.add_spinner();
    }), ms);
    return $(document).on('page:change', function() {
      return _this.remove_spinner();
    });
  },
  spinner_html: '\
    <div class="modal hide fade" id="page-spinner">\
      <div class="modal-head card-title">Please Wait...</div>\
      <div class="modal-body card-body">\
        <i class="icon-spinner icon-spin icon-2x"></i>\
        &emsp;Loading...\
      </div>\
    </div>\
  ',
  spinner: null,
  add_spinner: function() {
    $('body').append(this.spinner_html);
    return $('body div#page-spinner').modal();
  },
  remove_spinner: function() {
    clearTimeout(this.spinner);
    $('div#page-spinner').modal('hide');
    return $('div#page-spinner').on('hidden', function() {
      return $(this).remove();
    });
  }
};

$(document).on('page:fetch', function() {
  return PageSpinner.spin();
});

Thanks