Occulsion doesn't work

I have loaded 250+ rows in the ember table. I notice that 30 or 40 load initially and the rest of the space is empty(whitespace), and then as i scroll or wait for a few seconds, all the other rows load together. It doesn't depend on the section that the user is viewing. All the remaining rows load together.

In Edge, i get the 'Not responding' error and the browser gets stuck for a few seconds.

Please let me know what i'm doing wrong?

Used a new Ember project with v2.0.0-beta.4`

{{#ember-table as |t|}} 
     {{#t.head widthConstraint=widthConstraint enableResize=resizeEnabled enableReorder=reorderEnabled resizeMode=resizeMode columns=columns as |h| }} 
        {{#h.row as |r|}} 
            {{#r.cell as |cell column|}} 
                {{#if column.headerComponent}} 
                    {{#component column.headerComponent custom=column.custom}} 
                        {{cell.name}} 
                    {{/component}}
                {{else}} 
                    {{cell.name}} 
                {{/if}}
            {{/r.cell}}
        {{/h.row}} 
     {{/t.head}}
     {{#t.body rows=rows as |b|}}
        {{#b.row as |r|}} 
            {{#r.cell as |cell column|}}
             {{#if column.cellComponent}} 
                {{#component column.cellComponent value=cell clickCell=(action 'clickItem') hoverCell=(action 'hoverItem')}}
                {{/component}} 
             {{else}} 
                {{cell}}
             {{/if}}
            {{/r.cell}} 
        {{/b.row}} 
    {{/t.body}}
{{/ember-table}}

JS
Any set of column /row configuration with 250+ rows

Reproduce the issue in a new Ember project using ember-table with 250+ rows and the supplied table configuration. Observe the initial whitespace, delayed row rendering, and Edge's unresponsive state; the issue is resolved when all rows render without the delay or browser freeze.