Cancel chunking when disconnected. Fixes #5667

lib/elements/dom-repeat.js

@@ -346,6 +346,10 @@ export class DomRepeat extends domRepeatBase {
     for (let i=0; i<this.__instances.length; i++) {
       this.__detachInstance(i);
     }
+    // Stop chunking if one was in progress
+    if (this.__chunkingId) {
+      cancelAnimationFrame(this.__chunkingId);
+    }
   }
 
   /**
@@ -364,6 +368,10 @@ export class DomRepeat extends domRepeatBase {
       for (let i=0; i<this.__instances.length; i++) {
         this.__attachInstance(i, wrappedParent);
       }
+      // Restart chunking if one was in progress when disconnected
+      if (this.__chunkingId) {
+        this.__render();
+      }
     }
   }
 
@@ -552,7 +560,10 @@ export class DomRepeat extends domRepeatBase {
     if (this.initialCount &&
        (this.__shouldMeasureChunk || this.__shouldContinueChunking)) {
       cancelAnimationFrame(this.__chunkingId);
-      this.__chunkingId = requestAnimationFrame(() => this.__continueChunking());
+      this.__chunkingId = requestAnimationFrame(() => {
+        this.__chunkingId = null;
+        this.__continueChunking();
+      });
     }
     // Set rendered item count
     this._setRenderedItemCount(this.__instances.length);

test/unit/dom-repeat.html

@@ -3933,16 +3933,24 @@ <h4>x-repeat-limit</h4>
 suite('chunked rendering', function() {
 
   let chunked;
-  let resolve;
+  let notifyChange;
   let targetCount;
-  const handleChange = () => {
+  let 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 @@ <h4>x-repeat-limit</h4>
     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() {