refactor: disable virtualizer height placeholder in grid and combo-box (#10155)

Author: vursen

packages/combo-box/src/vaadin-combo-box-scroller-mixin.js

@@ -234,6 +234,11 @@ export const ComboBoxScrollerMixin = (superClass) =>
         scrollTarget: this,
         scrollContainer: this.$.selector,
         reorderElements: true,
+        // Combo-box items have a CSS-defined minimum height, so the virtualizer's
+        // height placeholder logic can be disabled. This helps save reflows which
+        // might otherwise be triggered by this logic because it reads the row height
+        // right after updating the rows' content.
+        __disableHeightPlaceholder: true,
       });
     }
 

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

@@ -14,15 +14,29 @@ const MAX_VIRTUAL_COUNT = 100000;
 const OFFSET_ADJUST_MIN_THRESHOLD = 1000;
 
 export class IronListAdapter {
-  constructor({ createElements, updateElement, scrollTarget, scrollContainer, elementsContainer, reorderElements }) {
+  constructor({
+    createElements,
+    updateElement,
+    scrollTarget,
+    scrollContainer,
+    reorderElements,
+    elementsContainer,
+    __disableHeightPlaceholder,
+  }) {
     this.isAttached = true;
     this._vidxOffset = 0;
     this.createElements = createElements;
     this.updateElement = updateElement;
     this.scrollTarget = scrollTarget;
     this.scrollContainer = scrollContainer;
-    this.elementsContainer = elementsContainer || scrollContainer;
     this.reorderElements = reorderElements;
+    this.elementsContainer = elementsContainer || scrollContainer;
+
+    // Internal option that disables the heavy height placeholder calculation
+    // (see __afterElementsUpdated) for components that always render virtual
+    // elements with a non-zero height. Not for public use.
+    this.__disableHeightPlaceholder = __disableHeightPlaceholder ?? false;
+
     // Iron-list uses this value to determine how many pages of elements to render
     this._maxPages = 1.3;
 
@@ -270,33 +284,35 @@ export class IronListAdapter {
    * @param {!Array<!HTMLElement>} updatedElements
    */
   __afterElementsUpdated(updatedElements) {
-    updatedElements.forEach((el) => {
-      const elementHeight = el.offsetHeight;
-      if (elementHeight === 0) {
-        // If the elements have 0 height after update (for example due to lazy rendering),
-        // it results in iron-list requesting to create an unlimited count of elements.
-        // Assign a temporary placeholder sizing to elements that would otherwise end up having
-        // no height.
-        el.style.paddingTop = `${this.__placeholderHeight}px`;
-        el.style.opacity = '0';
-        el.__virtualizerPlaceholder = true;
-
-        // Manually schedule the resize handler to make sure the placeholder padding is
-        // cleared in case the resize observer never triggers.
-        this.__placeholderClearDebouncer = Debouncer.debounce(this.__placeholderClearDebouncer, animationFrame, () =>
-          this._resizeHandler(),
-        );
-      } else {
-        // Add element height to the queue
-        this.__elementHeightQueue.push(elementHeight);
-        this.__elementHeightQueue.shift();
-
-        // Calculate new placeholder height based on the average of the defined values in the
-        // element height queue
-        const filteredHeights = this.__elementHeightQueue.filter((h) => h !== undefined);
-        this.__placeholderHeight = Math.round(filteredHeights.reduce((a, b) => a + b, 0) / filteredHeights.length);
-      }
-    });
+    if (!this.__disableHeightPlaceholder) {
+      updatedElements.forEach((el) => {
+        const elementHeight = el.offsetHeight;
+        if (elementHeight === 0) {
+          // If the elements have 0 height after update (for example due to lazy rendering),
+          // it results in iron-list requesting to create an unlimited count of elements.
+          // Assign a temporary placeholder sizing to elements that would otherwise end up having
+          // no height.
+          el.style.paddingTop = `${this.__placeholderHeight}px`;
+          el.style.opacity = '0';
+          el.__virtualizerPlaceholder = true;
+
+          // Manually schedule the resize handler to make sure the placeholder padding is
+          // cleared in case the resize observer never triggers.
+          this.__placeholderClearDebouncer = Debouncer.debounce(this.__placeholderClearDebouncer, animationFrame, () =>
+            this._resizeHandler(),
+          );
+        } else {
+          // Add element height to the queue
+          this.__elementHeightQueue.push(elementHeight);
+          this.__elementHeightQueue.shift();
+
+          // Calculate new placeholder height based on the average of the defined values in the
+          // element height queue
+          const filteredHeights = this.__elementHeightQueue.filter((h) => h !== undefined);
+          this.__placeholderHeight = Math.round(filteredHeights.reduce((a, b) => a + b, 0) / filteredHeights.length);
+        }
+      });
+    }
 
     if (this.__pendingScrollToIndex !== undefined && !this.__hasPlaceholders()) {
       this.scrollToIndex(this.__pendingScrollToIndex);

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

@@ -412,3 +412,33 @@ describe('virtualizer - item height - lazy rendering', () => {
     });
   });
 });
+
+describe('virtualizer - item height - placeholders are disabled', () => {
+  let virtualizer;
+  let scrollTarget;
+
+  beforeEach(() => {
+    scrollTarget = fixtureSync(`
+      <div style="height: 200px;">
+        <div class="container"></div>
+      </div>
+    `);
+
+    virtualizer = new Virtualizer({
+      createElements: (count) => Array.from({ length: count }, () => document.createElement('div')),
+      updateElement: (el, index) => {
+        el.id = `item-${index}`;
+      },
+      scrollTarget,
+      scrollContainer: scrollTarget.firstElementChild,
+      __disableHeightPlaceholder: true,
+    });
+
+    virtualizer.size = 1;
+  });
+
+  it('should not add placeholder padding to items with zero height', () => {
+    const item = document.querySelector('#item-0');
+    expect(item.offsetHeight).to.equal(0);
+  });
+});

packages/grid/src/vaadin-grid-mixin.js

@@ -256,6 +256,11 @@ export const GridMixin = (superClass) =>
         scrollContainer: this.$.items,
         scrollTarget: this.$.table,
         reorderElements: true,
+        // Grid rows have a CSS-defined minimum height, so the virtualizer's height
+        // placeholder logic can be disabled. This helps save reflows which might
+        // otherwise be triggered by this logic because it reads the row height
+        // right after updating the rows' content.
+        __disableHeightPlaceholder: true,
       });
 
       new ResizeObserver(() =>