fix: prevent virtualizer from creating excess elements when idle cb is late (#10606)

Author: vursen

packages/component-base/src/virtualizer-iron-list-adapter.js

@@ -693,7 +693,7 @@ export class IronListAdapter {
    * @override
    */
   _increasePoolIfNeeded(count) {
-    if (this._physicalCount > 2 && count) {
+    if (this._physicalCount > 2 && this._physicalAverage > 0 && count > 0) {
       // The iron-list logic has already created some physical items and
       // has decided to create more. Since each item creation round is
       // expensive, let's try to create the remaining items in one go.

packages/component-base/test/virtualizer-item-height.test.js

@@ -1,6 +1,7 @@
 import { expect } from '@vaadin/chai-plugins';
 import { aTimeout, fixtureSync, nextFrame, nextResize, oneEvent } from '@vaadin/testing-helpers';
 import sinon from 'sinon';
+import { idlePeriod } from '../src/async.js';
 import { Virtualizer } from '../src/virtualizer.js';
 
 async function contentUpdate() {
@@ -247,6 +248,64 @@ describe('virtualizer - item height - initial render', () => {
   });
 });
 
+describe('virtualizer - item height - resize with late idle callback', () => {
+  let virtualizer, scrollTarget;
+
+  beforeEach(async () => {
+    scrollTarget = fixtureSync(`
+      <div style="height: 300px;">
+        <div class="container"></div>
+      </div>
+    `);
+
+    virtualizer = new Virtualizer({
+      createElements: (count) => {
+        return Array.from({ length: count }, () => {
+          const el = document.createElement('div');
+          el.style.width = '100%';
+          el.style.height = '100px';
+          el.classList.add('item');
+          return el;
+        });
+      },
+      updateElement: (el, index) => {
+        el.id = `item-${index}`;
+      },
+      scrollTarget,
+      scrollContainer: scrollTarget.firstElementChild,
+    });
+    virtualizer.size = 1000;
+
+    await nextResize(scrollTarget);
+    await nextFrame();
+  });
+
+  beforeEach(() => {
+    // Simulate a late idle callback. Must be longer than (nextResize + nextFrame) * 2
+    const timeout = 200;
+    sinon.stub(idlePeriod, 'run').callsFake((callback) => setTimeout(callback, timeout));
+    sinon.stub(idlePeriod, 'cancel').callsFake((handle) => clearTimeout(handle));
+  });
+
+  afterEach(() => {
+    idlePeriod.run.restore();
+    idlePeriod.cancel.restore();
+  });
+
+  it('should keep number of physical elements reasonable when item heights decrease', async () => {
+    const itemCount = scrollTarget.querySelectorAll('.item').length;
+
+    scrollTarget.querySelector('#item-0').style.height = '10px';
+    await nextResize(scrollTarget);
+    await nextFrame();
+    scrollTarget.querySelector('#item-1').style.height = '10px';
+    await nextResize(scrollTarget);
+    await nextFrame();
+
+    expect(scrollTarget.querySelectorAll('.item').length).to.equal(itemCount + 3);
+  });
+});
+
 describe('virtualizer - item height - lazy rendering', () => {
   let virtualizer;
   let renderPlaceholders;