How to show page loading between pages
I'm not sure if all Rails applications behave the same or if it's just in my application settings. For my application, when the page loads (like the moment the link is clicked until the content responds from the server), there is no indication that the page will load. On a shared website, when the page is loading, a spinning wheel will appear in place of the icon to indicate that the page is loading. I am using Rails 4.0.0 on Heroku .
source to share
Rails uses turbolinks by default.
Please take a look at turbolinks and how it works. It basically replaces the page body instead of a new request, so you don't see the loading indication in the browser.
If you want to see your page loading, you can disable turbolinks by removing it from application.js, or use a gem like this one: https://github.com/caarlos0/nprogress-rails to show the actual page loading.
I highly recommend that you keep the turboprop and go with the second option I gave you.
source to share
From Turbolinks , something like?
$document.on('page:fetch', function() {
// show spinner
});
$document.on('page:change', function() {
// hide spinner
});
Update for Turbolinks 5
For Turbolinks 5 :
$document.on('turbolinks:click', function() {
// show spinner
});
$document.on('turbolinks:load', function() {
// hide spinner
});
If you are using jQuery and your spinner is in div.spinner
, you can show and hide it with
$(document).on("turbolinks:click", function(){
$(".spinner").show();
});
$(document).on("turbolinks:load", function(){
$(".spinner").hide();
});
source to share
Those sites are what we call one page apps most of the time. These sites use a lot of AJAX based content loading mechanisms and this thing has to do with the programming interface and a little bit with the software.
If you really want to achieve this functionality, you can use AngularJS, BackboneJS and other frameworks that support standalone web applications.
When fetching another form server of the page, all your HTML, CSS and JS will disappear and the new content will be fetched and rendered. This way you cannot show the loading page until you are using AJAX based pages.
source to share