Ensure any previously enqueued rAF is canceled when re-rendering.

Also, use instances length instead of renderedItemCount since it will be undefined on first render.

Author: kevinpschaaf

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