Performance issues rendering items

[k-dauda]

The description says it can handle over 100K items without any performance issues. I want to display the files in a directory but only the first 3 rows render and it seems to freeze. After waiting a while the other rows get rendered as well.

ember: 3.15.1. ember-table: 2.2.3

Using the snippet below I can see the log going in the console but only the first 3 rows render initially.

<EmberTable as |t|>
  <t.head @columns={{columns}} />
  <t.body @rows={{rows.fsDirectory}} as |b|>
    <b.row as |r|>
      <r.cell as |cellValue columnValue rowValue cellMeta columnMeta rowMeta|>
         {{log "cellvalue: " cellValue}}
         {{cellValue}}
      </r.cell>
    </b.row>
  </t.body>
</EmberTable>

[bahdvp]

I'm getting this same issue @k-dauda, did you ever resolve it?

I believe it started somewhere between ember 3.12 and ember 3.16 for me

[bahdvp]

This issue appears whether I run 100 rows or 10k rows.

[bahdvp]

@k-dauda My issue was that occlusion was not working because I had the table inside a scrollable element. Looks like there's an issue (possibly in vertical collection?) that didn't detect the element I was using as a container properly and was essentially rendering the entire table.

After adding the @containerSelector option, it worked much better.

I also set staticHeight and estimateRowHeight since it applied to me but probably unnecessary.

[bahdvp]

To follow up, looks like my fix also caused some issues in Chrome for me. Worked fine in FF/Edge.

[ghost]

I do not have quick solution to this but my colleague @martony38 found key performance issues with ember-table's vertical-collection dependency. The primary issue is how vertical-collection uses something called ember-raf-scheduler to implement occulusion. This results in users browsers freezing when requestAnimationFrame calls take too long. I should also note that ember-table injects 2 third party JavaScript libraries that register event listeners for mobile and resize events: https://github.com/Addepar/ember-table/blob/258efe39f02b7ff892483961aec046dc2e2a5f52/index.js#L27-L29

(I tried gutting them here)

I'm still deciding on the best approach for my organization, but it will most likely entail moving away from using ember-table for a data-intensive section of our application. cough, cough user created dashboards with an arbitrary count of table widgets

[ghost]

See https://github.com/martony38/ember-table-test for a public example of degraded performance.

[edprats]

I am also experiencing the same behavior (Ember LTS 3.16).

Interestingly enough, I saw this happening when I re-factored to using a Glimmer component vs the pre-octane Ember component. On 3.16, using legacy components, the lag/performance was not there for me until I went for native components.

[kylenathan]

Thanks all for catching. Any workarounds for this?

[edprats]

@kylenathan i was able to get a modest increase in performance by using the @containerSelector=#someParentId in the <tb.body> to make sure that occlusion was being taken into account.

still not foolproof, but it helped some

[k-dauda]

For what it's worth, I decided long ago to just go with a native HTML table with pagination.