Rendering hundreds of datas : lazy loading, partial rendering? - ember.js

Question

I can seem to find a good answer for my problem. I have a sidebar template which contains a div for each item my model contains. When I have hundreds of items to render, it takes up to 8-10 seconds to render the template. I am using ember-data.
How can I render the items that are loaded before it finishes fetching the entire model?
Here is my template :
{{#each conv in model itemController='singleconv'}}
{{#if (equals conv.url selectedSubuserEmail)}}
<div class="conversation-content-wrapper" {{action "clickConv" conv preventDefault=false}}>
<div class="history-message-assigned in-progress-closed" style="display:none;"><p><i class="icon-x"></i>Conversation closed</p></div>
<div class="history-message-assigned in-progress-assignation" style="display:none;"><p><i class="icon-assign"></i>Conversation assigned</p></div>
<div class="history-message-assigned in-progress-reopen" style="display:none;"><p><i class="icon-re-opened"></i>Conversation re-opened</p></div>
<div class={{conv.selectedClass}}>
<div class="conversation-time-history">{{{conv.status}}}</div>
<div class="conversation-details">
<span class="unread-numbers"></span>
{{input type='checkbox' class='chk-conversation' checked=conv.isChecked}}
<span class="conversation-name">{{conv.customer.name}}</span>
<span class="phone-number">{{conv.customer.cellPhoneNumber}}</span>
<p class="conversation-text">{{conv.lastMessage}}</p>
</div>
</div>
</div>
{{/if}}
{{/each}}

Answer 1

This is the main problem in ember's rendering which is getting much better by time, Ember connects all your binding to your created models so it re-renders the view on every added model, and hence the delay.
And I've been in the same situation, you have a couple of solutions here
1- Using Ember.ListView
You can use Ember list-view which is an Ember plug-in that adds lazy rendering to a List of items, very useful if you have items that can be displayed in the same height in pixels.
2- Using Ember Cloaking
Ember Cloaking is about the same as list-view but has flexible heights, although you still need to compute them before rendering.
3- Using visibility checker like waypoints
I've done this myself and its a little tedious but plug-in free none the less
You create a variable in your component that is set to true when it's visible in the waypoint.
sample code, not a real one
export default Ember.Component.extend({
visible:false,
didInsertElement:function() {
var waypoint = new Waypoint({
element: this.$()[0],
handler: function(direction) {
this.set('visibile',true)
}.bind(this)
})
}
})
Then Move your content into this component
And then inside this component:
{{#if visibile}}
<div class="conversation-content-wrapper" {{action "clickConv" conv preventDefault=false}}>
<div class="history-message-assigned in-progress-closed" style="display:none;"><p><i class="icon-x"></i>Conversation closed</p></div>
<div class="history-message-assigned in-progress-assignation" style="display:none;"><p><i class="icon-assign"></i>Conversation assigned</p></div>
<div class="history-message-assigned in-progress-reopen" style="display:none;"><p><i class="icon-re-opened"></i>Conversation re-opened</p></div>
<div class={{conv.selectedClass}}>
<div class="conversation-time-history">{{{conv.status}}}</div>
<div class="conversation-details">
<span class="unread-numbers"></span>
{{input type='checkbox' class='chk-conversation' checked=conv.isChecked}}
<span class="conversation-name">{{conv.customer.name}}</span>
<span class="phone-number">{{conv.customer.cellPhoneNumber}}</span>
<p class="conversation-text">{{conv.lastMessage}}</p>
</div>
</div>
</div>
{{/if}}
and then the "for-each" block
{{#each conv in model itemController='singleconv'}}
{{the-component conv=conv}}
{{/each}}
Then use a counter or something to make the first 10 visible.
As I said this is only a simple example you can dig more into it.