I thought of creating a spinner which is displayed while the page is being loaded with Turbolinks. Here is my Coffeescript:
startSpinner = ->
console.log "started fetching"
$('html').append('<div id="spinner" class="whirly"></div>')
stopSpinner = ->
$('#spinner').remove()
console.log "stopped fetching"
$(document).on("page:fetch", startSpinner());
$(document).on("page:receive", stopSpinner());
The spinner seems to show correctly if I set a breakpoint into stopSpinner (before it removes the spinner), but it is never visible otherwise. What am I missing? Are page:fetch and page:receive the wrong calls?
FYI I took the spinner from http://css-spinners.com/#/spinner/whirly/.
startSpinner() is a function call, not a function reference. jQuery's on wants a function reference as its second argument so you should be saying:
$(document).on("page:fetch", startSpinner)
$(document).on("page:receive", stopSpinner)
to bind the functions to those events. Your code:
$(document).on("page:fetch", startSpinner());
$(document).on("page:receive", stopSpinner());
is trying to bind the startSpinner and stopSpinner return values to those events and that does nothing useful.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments