Transition immediately, clear page container

[drewhamlett]

A lot of the perceived speed from an SPA app comes from being able to immediately display a page and fetch results afterwards. TransitionCache is a pretty good solution but it requires the person to have visited the page before.

You can get an extremely good perceived page speed increase by doing something like this

$(document).on('page:fetch', function(event) {
  document.getElementById('main-container').innerHTML = `
    <div class="panel panel-default">
      <div class="panel-body">
        Loading...
      </div>
    </div>
  `
})

I make the loading div look similar to the rest of my website and instantly everyone thought it seemed faster. I'm just wonder if this should be a setting or documented somewhere. Forgive me if this was already brought up before.

[sicks]

With partial replacement you can hook into the events to trigger exit and entrance transitions during the request:

I use this:

$(document).on 'page:fetch', ()->
  $('#dynamic .content').addClass('fadeOut')

$(document).on 'page:change', ()->
  $('#dynamic .content').addClass('fadeIn')
  setTimeout $('#dynamic .content').removeClass('fadeOut fadeIn'), 150

I admit I went through a roundabout journey of research before coming back and realizing how useful the events are.

[Thibaut]

The progress bar already does this to a certain extent, but feel free to send a PR updating the README if you think this is worth documenting.