CODEWITHSUNDEEP
polymerpolymer-1.0paper-elements
sinjins
sinjins

Reputation: 437

Polymer 1.0+ iron-list loading hidden list items?

Is it normal for polymer's iron-list element to load a bunch of unused/hidden list items, even though it is actually only passed a much smaller number of array items to its items attribute?

I have an iron-list that is currently passed an array 4 items long, but is provided screen real-estate for a much longer list if needed. Yet, when I inspect the rendered iron-list element in Chrome, within its 'items' div is 4 visible items and 16 hidden items. I'm thinking this might have something to do with preparing for scrolling/paging of the list? If so, is there a way to prevent the iron-list from doing all of the work of readying item templates that are not needed for smaller arrays?

I'm noticing a similar occurrence elsewhere in my app, where an iron-list is provided an array with length of 1. This is really problematic in that case, as the item template for this list contains a more complex custom element, which is then 'readied' 20 times instead of once. This really has a huge impact on the app's load time/performance.

Hoping there is a simple solution here, and I don't have to reconsider my use of iron-list in this app. Perhaps I'm doing something incorrectly. Thanks!

It does appear that someone has raised this issue on GitHub as well: https://github.com/PolymerElements/iron-list/issues/55

Upvotes: 0

Views: 765

Answers (2)

sinjins
sinjins

Reputation: 437

It is actually preferable to use dom-repeat templates for known fixed-length array of items, particularly shorter length array of items. Therefore, iron-list was being mis-used in my example above (at least for its intended purpose that is). Refer to related GitHub issue and recommendation:

https://github.com/PolymerElements/iron-list/issues/68

Upvotes: 1

David Douglas
David Douglas

Reputation: 10503

Yeah thats the correct behaviour. Rather than create or delete DOM elements iron-list recycles cells to get smooth scrolling on mobile. So by default it will always generate 20 items regardless of data amount whether tens or thousands of items. This polycast explains more about buttery smooth scrolling.

Couple of things to try:

  1. I would keep your iron-list <template> content 1 level deep. (Don't nest tags here and only use the absolute minimum amount of elements. You could also experiment with absolute CSS positioning)
  2. If your template row is very large you could try reducing this default number using the iron-list private _physicalCount property.

iron-list example:

var list = this.querySelector("iron-list");
list._physicalCount = 4; // default is 20

Upvotes: 1

Related Questions