diff --git a/lib/elements/dom-repeat.js b/lib/elements/dom-repeat.js index 3a2c7d9175..c4b77958a7 100644 --- a/lib/elements/dom-repeat.js +++ b/lib/elements/dom-repeat.js @@ -346,6 +346,10 @@ export class DomRepeat extends domRepeatBase { for (let i=0; i this.__continueChunking()); + this.__chunkingId = requestAnimationFrame(() => { + this.__chunkingId = null; + this.__continueChunking(); + }); } // Set rendered item count this._setRenderedItemCount(this.__instances.length); diff --git a/test/unit/dom-repeat.html b/test/unit/dom-repeat.html index 119149d412..e70b1a338a 100644 --- a/test/unit/dom-repeat.html +++ b/test/unit/dom-repeat.html @@ -3933,16 +3933,24 @@

x-repeat-limit

suite('chunked rendering', function() { let chunked; - let resolve; + let notifyChange; let targetCount; const handleChange = () => { if (!targetCount || chunked.$.repeater.renderedItemCount >= targetCount) { - resolve(Array.from(chunked.root.querySelectorAll('*:not(template):not(dom-repeat)'))); + notifyChange(Array.from(chunked.root.querySelectorAll('*:not(template):not(dom-repeat)'))); } }; const waitUntilRendered = async (count) => { targetCount = count; - return await new Promise(r => resolve = r); + return await new Promise(r => notifyChange = r); + }; + const expectNoChanges = async () => { + targetCount = null; + notifyChange = () => { + assert.fail('no changes were expected'); + }; + // Ensure no changes happen in the next rAF+sT + await new Promise(r => requestAnimationFrame(() => setTimeout(() => r()))); }; setup(() => { chunked = document.createElement('x-repeat-chunked'); @@ -4259,6 +4267,19 @@

x-repeat-limit

assert.isAtLeast(frameCount, 2); }); + test('chunking stops after detaching, restarts after attaching', async () => { + chunked.items = chunked.preppedItems.slice(); + const initialLength = (await waitUntilRendered()).length; + assert.isAbove(initialLength, 0); + assert.isBelow(initialLength, chunked.preppedItems.length); + document.body.removeChild(chunked); + await expectNoChanges(); + const done = waitUntilRendered(chunked.preppedItems.length); + document.body.appendChild(chunked); + const endLength = (await done).length; + assert.equal(endLength, chunked.items.length); + }); + }); suite('misc', function() {