Skip to content

Commit

Permalink
Ensure any previously enqueued rAF is canceled when re-rendering.
Browse files Browse the repository at this point in the history
Also, use instances length instead of renderedItemCount since it will be undefined on first render.
  • Loading branch information
kevinpschaaf committed Mar 5, 2020
1 parent d92ff92 commit ddb37df
Showing 1 changed file with 7 additions and 8 deletions.
15 changes: 7 additions & 8 deletions lib/elements/dom-repeat.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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)
Expand All @@ -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;
Expand All @@ -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
Expand Down

0 comments on commit ddb37df

Please sign in to comment.