Rails 4 progress bar while deleting remote file with Fog and waiting for controller respond_to

Question

I've seen plenty of Progress bar questions here but none of them help with what I am trying to do. Basically, I have a view and a controller in Rails 4 where the user can delete images associated with a record and then update the images div via jquery once the image has been deleted.

But the deletion is done remotely to a Google storage via Fog which takes a couple of seconds. I simply want to display a progress bar or spinner, or something while the image is being deleted and before the images div gets refreshed to let the users know that the page hasn't hung. I have everything working but the progress bar.

This is what I have:

#images_list

Is the div id that gets refreshed after deleting the image and contains all the images

The controller action:

def delete_image
  EntryImage.destroy
  respond_to do |format|
    format.js # js file that refreshes the images div
  end
end

.js file

$('#images_list').html("<%=j render 'entry/display_images' %>");

All very simple. But how can I load a spinner/progress bar while I am waiting for the controller to call the .js file?

EntryImage.destroy opens a Fog connection, does some renaming and deletes the image. Then when it returns the .js is called and the div is refreshed.

I'm sure this isn't something too hard, but I'm quite new to jquery, etc. Ideally I'd like to do this in a simple 'Railsy' way, using built-in technologies such as Coffeescript, jquery and even bootstrap (since I know it has a progress bar somewhere and we already use bootstrap in the project).

Edit: I should also mention that the progress bar/spinner should be in a modal window in the center of the view to make sure the user sees it even if the page has scrolled because the entry has many images.

Thanks

Edit2: Sorry for posting so much code but I can't figure out why the method suggested in the first answer won't work.
The delete buttons inside the #images_list won't trigger the hidden state for some reason, only the first one (outside the div) works:

<div id='images_toggle_div' style='display: none;'>
  <div class='well' style='overflow: auto;'>
    <a class="delete-btn" href="#">This one works!</a>
    <div class='hidden' id='spinner'>
      <img alt="Ajaxspinner" src="/assets/ajaxSpinner.gif" style="width: 200px;" />
    </div>

    <script>
      $('.delete-btn').click(function(){
        $('#spinner').toggleClass('hidden');
      });
    </script>

    <div id='images_list'>
      <div class='pull-left bordered'>
        <a href="http://rack.supersecret.com/526-3.jpg" target="_blank"><img alt="526 3" class="small_image" src="http://rack.supersecret.com/526-3.jpg?5090659" title="526-3.jpg (314 x 450)" /></a>
        <div class='tiny'>
          <a href="http://www.google.com/search?q=upc 9780767880268" target="_blank">9780767880268</a>
        </div>
        <a class="btn btn-mini btn-danger delete-btn" data-remote="true" href="#" title="Delete this image"><i class="icon-trash icon-white icon-large"></i> Delete</a>
      </div>
      <div class='pull-left bordered'>
        <a href="http://rack.supersecret.com/526-4.jpg" target="_blank"><img alt="526 4" class="small_image" src="http://rack.supersecret.com/526-4.jpg?5090659" title="526-4.jpg (391 x 500)" /></a>
        <div class='tiny'>
          <a href="http://www.google.com/search?q=upc 9780767880268" target="_blank">43396154162</a>
        </div>
        <a class="btn btn-mini btn-danger delete-btn" data-remote="true" href="#" title="Delete this image"><i class="icon-trash icon-white icon-large"></i> Delete</a>
      </div>
    </div>

Answer 1

You could add a spinner thing, like for instance a gif or a font-awesome spinner-icon via jquery triggered by the click, and then in your js-response file, remove it when the images returns.

In your view:

%button#delete-btn Delete image

%img.hidden#spinner{src: "assets/spinner.gif"}
#images_list

:javascript
  $('#delete-btn').click(function(){
    $('#spinner').toggleClass('hidden');
  });

In your .js.erb

$('#spinner').toggleClass('hidden');
$('#images_list').html("<%=j render 'entry/display_images' %>");

This since you only get to the js.erb file once the images returns if I understand correctly. Otherwise I would prefer to have all the object specific DOM-manipulation done in the js.erb file.

CSS:

.hidden {
  display: none;
}

JSFIDDLE: http://jsfiddle.net/b3rgstrom/wr2jz/1/