It is possible for _itemCount to produce Infinity and component tries to render all items

[hadiwina]

In certain situations, the itemHeight property that is passed into the component could start with 0, which then will be updated once the application is ready. This is because we simply try to avoid setting a static number that may or may not be correct. In other languages, the itemHeight could be taller, and therefore could pose some incorrect number.

{{#virtual-each someNames 
    height=listHeight
    itemHeight=listItemHeight as | name |}}
    {{displayed-name name=name onInsert=(action (mut listItemHeight))}}
{{/virtual-each}}

Where in components/displayed-name.js:

didInsertElement() {
    this._super();
    this.sendAction('onInsert', this.$().height()); // Set the height
}

and itemHeight is initiated with 0 in the controllers/foo.js.

Problem is that, until the listItemHeight is updated, the itemHeight property will always be 0, and this is causing the _itemCount to always produce Infinity value.

  _itemCount: computed('height', 'itemHeight', 'bufferSize', {
    get() {
      let height = this.getAttr('height');
      let bufferSize = get(this, 'bufferSize');

      return Math.ceil(height / this.getAttr('itemHeight')) + bufferSize; // Infinity
    }
  }).readOnly(),

Because there's a line in visibleItems where let endAt = Math.min(itemsLength, _startAt + _itemCount);, this will always mean that all of the items is visible at first, in which the DOM will try to draw all items first. In large data set (1000+), this chokes the browser.

I'm proposing that we change the logic to return the bufferSize if neither height or itemHeight is more than 0.

  _itemCount: computed('height', 'itemHeight', 'bufferSize', {
    get() {
      let height = this.getAttr('height');
      let itemHeight = this.getAttr('itemHeight');
      let bufferSize = get(this, 'bufferSize');

      return height > 0 && itemHeight > 0 ? Math.ceil(height / itemHeight) + bufferSize : bufferSize;
    }
  }).readOnly(),

I could submit the change, but would love to run it by you first.

Let me know what you think! 😃

[jasonmit]

@hadiwina seems reasonable and a patch is welcomed :)