Ember Loading Template with Liquid Fire

I have searched previous questions but have yet to have any luck with this issue. I am trying to display my loading template in between routes as the model is loaded. I am using Ember CLI and Liquid Fire as well. My understanding from what I've been reading is by default, if I have app/templates/loading.hbs this should automatically be inserted into my application template outlet in between routes. However, that is not the case in my instance and I'm not finding the what I need to know in the Docs. And since I am not looking for route-specific loading, I am under the impression I can push this to the application level and display the same loading template for all routes.

Here is what I currently have.

Router

Router.map(function() {
  this.route('reviews', function() {
    this.route('index', {path: '/'});
    this.route('review', {path: '/:review_id'});
  });
  this.route('movies');
  this.route('about');
});

templates/loading.hbs

<div class="loading-pane">
    <div class="loading-message">
        Loading stuff, please have a cold beer.
        <div class="spinner"></div>
    </div>
</div>

Example Route (movies.js - the longest load time)

export default Ember.Route.extend({
    activate() {
        this._super();
        window.scrollTo(0, 0);
        $("body").addClass('movies');
    },
    deactivate() {
        $("body").removeClass('movies');
    },
    model() {
        const movies = this.get('movies');
        return movies.getMoviesInAlphOrder();
    },
    movies: Ember.inject.service()
});

Any help with not only solving this issue but helping me understand the loading states would be greatly appreciated. Thank you!