Ember data blocking initial page load

Ember Data
1

I have a page that loads data in the application route. The data are markers I place on a map, that is always shown on the page, even when I navigate to another route.

Unfortunately, ember won’t start rendering any portion of the app until the api call resolves, which provides a terrible UX and page load time. Ideally, it would render the map, and when the data promise resolves it would show the markers on the map.

How would you suggest I work around the issue? Is it possible to make an ember-data request not block the rendering of the template?

2

I think you could follow the following approach: How to resolve a promise within a template?

Basically, this is using ObjectProxy to proxy the promise from Ember Data.

3

I’ve tried using DS.PromiseObject, but unfortunately, this is still blocking the view rendering because Ember waits until all model promise fullfills before proceeding:

model: function(params) {
    return DS.PromiseObject.create({
       promise: this.store.findQuery('place', params)
    });
},

I am currently using a workaround of rendering the places template inside parent loading route, which is already some progress, as the initial page load seems much better (the places template renders while the data is loading).

export default Ember.Route.extend({
  renderTemplate: function() {
    this.render('places', {});
  }
});