Ember Loading Template with Liquid Fire

Question

I have been doing a lot of tinkering with this and can't seem to get it working. I am looking to show my loading template while waiting for my model promise to return.

My understanding is, by default, if I have app/templates/loading.hbs, this template will be rendered across all routes. However, even with that template in place whenever I switch between routes the old route remains displayed until the model returns, at which point my liquid fire transition occurs and you're taken to the next route.

I have tried various version of creating nested loading templates for each route, tried creating subroutes for each route for the loading template, and have even messed with the beforeModel/afterModel methods that are available but I am making no progress. This is the last hurdle I want to cross before launching and am perplexed as to why I can't get it working. Here is a bunch of my code I feel is relevant.

Note: I am using Ember CLI and Liquid Fire. My data is also being returned to the model from am Ember Service for the time being.

Router

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

app/template/loading.hbs

<div class="content-container">
    <h1>Ish be loading</h1>
</div>

Slowest Model Route

export default Ember.Route.extend({
    activate() {
        this._super();
        $("html,body").animate({scrollTop:0},"fast");
        $("body").addClass('movies');
    },
    deactivate() {
        $("body").removeClass('movies');
    },
    model() {
        const movies = this.get('movies');
        return movies.getMoviesInAlphOrder();
    },
    afterModel: function() {
        $(document).attr('title', 'Slasher Obscura - Movie Database');
    },
    movies: Ember.inject.service()
});

app.js

App = Ember.Application.extend({
    modulePrefix: config.modulePrefix,
    podModulePrefix: config.podModulePrefix,
    Resolver,
    ...
});
loadInitializers(App, config.modulePrefix);

Service Methods

sortReviewsByDateDesc(arr) {
        return arr.slice().sort(function (a, b) {
            return a.review.date > b.review.date ? -1 : 1;
        });
    },
    getSetAmountOfMovies(num, arr) {
        const movieList = arr ? null : this.getMovies();
        const trimmedList = arr ? arr.slice(0, num) : movieList.slice(0, num);        
        return trimmedList;
    },
    setFirstReviewToFeatured(arr) {
        arr[0].isFeatured = true;
        return arr;
    },
    getLatestReviews(num) {
        const movieList = this.getMovies();
        const reviewList = movieList.filterBy('review');
        const indexList = this.sortReviewsByDateDesc(reviewList);
        const latestList = this.getSetAmountOfMovies(num, indexList);
        return this.setFirstReviewToFeatured(latestList);
    },
    getMoviesInAlphOrder() {
        const movieList = this.getMovies();
        let lowerCaseA, lowerCaseB;
        return movieList.sort(function(a, b) {
            lowerCaseA = a.title.toLocaleLowerCase();
            lowerCaseB = b.title.toLocaleLowerCase();
            return lowerCaseA.localeCompare(lowerCaseB);
        });
    },
getMovies() {
        return [{
            id: 1,
            title: '303 Fear Faith Revenge',
            year: "1999",
            imdb: "tt0219682",
            youtube: "iFV1qaUWemA"
        }
...
]

I have read the docs on Ember's site along with various other Google resources and can't seem to figure out why my loading template isn't rendering at all. Any help would be awesome! Thanks!

Answer 1

Loading templates trigger when your model hook returns a promise that takes a long time to resolve, however, your model hook is not returning a promise.

model() {
  const movies = this.get('movies');

  return movies.getMoviesInAlphOrder();
}

getMoviesInAlphOrder is returning a synchronous array. After talking with you further, it turns out that you've pre-filled this array client side with 540 items, so the issue here is that the loading template not only doesn't have a promise to wait for, but even if it did it would resolve immediately anyway.

Your time delay is very likely a performance issue stemming from rendering a long list of items. There are several Ember addons to help with this including one of my own: https://github.com/runspired/smoke-and-mirrors

Alternatively/ In addition you may want to consider "chunking" your array into smaller bits and render it 25-50 at a time, or setup some pagination.