diff --git a/lib/elements/dom-repeat.js b/lib/elements/dom-repeat.js index 27d2f79728..3a2c7d9175 100644 --- a/lib/elements/dom-repeat.js +++ b/lib/elements/dom-repeat.js @@ -324,6 +324,7 @@ export class DomRepeat extends domRepeatBase { this.__itemsArrayChanged = false; this.__shouldMeasureChunk = false; this.__shouldContinueChunking = false; + this.__chunkingId = 0; this.__sortFn = null; this.__filterFn = null; this.__observePaths = null; @@ -550,7 +551,8 @@ export class DomRepeat extends domRepeatBase { // pre-empt this measurement. if (this.initialCount && (this.__shouldMeasureChunk || this.__shouldContinueChunking)) { - this.__debounceRender(this.__continueChunkingAfterRaf); + cancelAnimationFrame(this.__chunkingId); + this.__chunkingId = requestAnimationFrame(() => this.__continueChunking()); } // Set rendered item count this._setRenderedItemCount(this.__instances.length); @@ -583,6 +585,7 @@ export class DomRepeat extends domRepeatBase { __calculateLimit(filteredItemCount) { let limit = filteredItemCount; + const currentCount = this.__instances.length; // When chunking, we increase the limit from the currently rendered count // by the chunk count that is re-calculated after each rAF (with special // cases for reseting the limit to initialCount after changing items) @@ -594,18 +597,18 @@ export class DomRepeat extends domRepeatBase { limit = Math.min(filteredItemCount, this.initialCount); // Subtract off any existing instances to determine the number of // instances that will be created - newCount = Math.max(limit - this.renderedItemCount, 0); + newCount = Math.max(limit - currentCount, 0); // Initialize the chunk size with how many items we're creating this.__chunkCount = newCount || 1; } else { // The number of new instances that will be created is based on the // existing instances, the new list size, and the chunk size newCount = Math.min( - Math.max(filteredItemCount - this.renderedItemCount, 0), + Math.max(filteredItemCount - currentCount, 0), this.__chunkCount); // Update the limit based on how many new items we're making, limited // buy the total size of the list - limit = Math.min(this.renderedItemCount + newCount, filteredItemCount); + limit = Math.min(currentCount + newCount, filteredItemCount); } // Record some state about chunking for use in `__continueChunking` this.__shouldMeasureChunk = newCount === this.__chunkCount; @@ -616,10 +619,6 @@ export class DomRepeat extends domRepeatBase { return limit; } - __continueChunkingAfterRaf() { - requestAnimationFrame(() => this.__continueChunking()); - } - __continueChunking() { // Simple auto chunkSize throttling algorithm based on feedback loop: // measure actual time between frames and scale chunk count by ratio of