Add a loading indicator to turbolinks so the user knows when pages are loading.

a_turbolinks_spinner.md

There are 4 parts:

1. the html partial which goes into your layout
2. the scss block to add to your stylesheet
3. the coffeescript to add to your application.coffee
4. the image. The image is not included here, but go here and "Save image": http://aragats.herokuapp.com/assets/ajax-loader.gif - or go here http://www.ajaxload.info/ and generate your own loader image.

turbolinks_spinner.html.slim

#loading-indicator
  #spinner

turbolinks_spinner.js.coffee

window.startSpinner = -> $('#loading-indicator').show()
window.stopSpinner = ->  $('#loading-indicator').hide()

$(document).on 'ready page:load page:restore', stopSpinner
$(document).on "page:fetch", startSpinner

turbolinks_spinner.scss

#loading-indicator {
  position: fixed;
  z-index: 200;
  top: 0px;
  left: 0px;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;

  #spinner {
    position: fixed;
    width: 50px;
    height: 50px;
    left: 50%;
    top: 50%;
    margin-left: -25px;
    margin-top: -25px;
    opacity: 0.8;
    border-radius: 6px;
    background: black url("/assets/ajax-loader.gif") center center no-repeat;
  }
}