Event to detect finished rendering of list in Ember

Question

I have an Ember application with a long list of items displayed on the page. The content of the list is computed depending on a user query. Sometimes the new list takes a second or two to render. I am trying to display a loading indicator during this rendering process, and what I really need is a handler for when the tag containing the list has finished re-rendering. Is this possible?

<div id="listContainer">
{{#each item in theList}}
  ...
{{/each}}
</ul>

theList: function() {
  // return result of filtering baseList with the query
}.property('baseList', 'query')

actions: {
  someHandler: function() {
    // how can I catch when the #listContainer is finished rerendering?
  }
}

score 0 · Answer 1 · answered Apr 07 '15 at 17:32

The {{each}} helper can have an {{else}} (guide) clause that can be used when the collection does not have any items to iterate. You can do something similar to the following:

<div id="listContainer">
{{#each item in theList}}
   <!-- do something with item here -->
{{else}}
    Loading...
{{/each}}
</ul>

OR

you could have a property in your controller that acts as a flag to "is loading", something like this:

[...]
theListIsLoading: false,
theList: function() {
  var query = this.get('query'),
      baseList = this.get('baseList'),
      filtered = [];

  this.set('theListIsLoading', true);
  filtered = baseList.filter(function(listItem) { /* your filter goes here */ });
  this.set('theListIsLoading', false);

  return filtered;
}.property('baseList', 'query'),
[...]

and the template would be something like

<div id="listContainer">
{{#each item in theList}}
   <!-- do something with item here -->
{{else}}
    {{#if theListIsLoading}}
        Loading...
    {{else}}
        No records to display
    {{/if}}
{{/each}}
</ul>

Thanks for your response! Unfortunately neither of these are really satisfactory for me. The first one will not work because the list is never empty, it just gets updated. The second one is the route I've already gone, but the problem is that the *rendering* of the filtered list, not just the filtering, takes significant time. Therefore it doesn't work to unset loading when filtering is finished. — Sean Mackesey, Apr 07 '15 at 17:51
did you implement a [loading](http://guides.emberjs.com/v1.10.0/routing/loading-and-error-substates/) substate for that route? [old answer](http://stackoverflow.com/questions/26536604/loading-state-for-applicationroute/26539009#26539009) that *kinda* works — MilkyWayJoe, Apr 07 '15 at 18:04

Event to detect finished rendering of list in Ember

1 Answers1