CODEWITHSUNDEEP
ember.jsember-cli
Grapho
Grapho

Reputation: 1654

Ember JS: Trigger Loading Substate for slow loading templates

According to the Ember docs on loading substates you can optionally create a loading route and/or loading template for Promises that might take a long time to process.

I have a situation where I am rendering a large template using lots of components and the rendering time is over 2 seconds on average.

I am sure there is a solution to the slow render time, but while I work on it, I would like to see if I can call the loading template to display while the slow template is loading.

Is there a way to do this?

I have a trivial loading page all set up (just a simple message with some animated css) and saved in my templates root folder (so it could potentially be used everywhere when needed).

Ember should automatically display this loading template- just by virtue of it being there- but again, by default, it is only when a Promise is being loaded, and not a template.

So is there a workaround (i.e hack) to get this to work?

Upvotes: 0

Views: 916

Answers (1)

Matthew Blancarte
Matthew Blancarte

Reputation: 8301

I think you may be leading yourself off-course here with the loading substate.

My best guess at this point is that you need to address your {{view Ember.Select}} helpers within that template. These are terribly slow to render. I ran into this problem recently when rendering a few thousand options across 15-20 selects on a page.

Unfortunately, the DOM is usually the bottleneck of big SPAs, and you'll probably need to get creative if you want that snappy async feel everywhere in your app.

Try to reduce the number of options that are rendered, and you will speed things up. Or, you could try another form library... Or, roll your own.

Update::

If I were you, I would consider adding a method to the ArrayController that dynamically creates and slowly loads the options in chunks. Here's some pseudo-code:

App.CollectionController = Ember.ArrayController.extend({
  generatedOptions: null,
  generateOptions: function () {},
  destroyOptions: function () {
    this.set('generatedOptions', null);
  }
});

App.CollectionRoute = Ember.Route.extend({
  setupController: function (controller, model) {
    controller.generateOptions(); //slowly render
  },
  willTransition: function () {
    this.controllerFor('controller').destroyOptions(); //destroy so that when we return it will need to generate again
  }
});

{{#each generatedOptions}}
  {{partial 'collection_form'}}
{{else}}
  <p>loading, for kicks</p>
{{/else}}

Upvotes: 1

Related Questions