fix: visually hide virtualizer placeholders

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

@@ -234,6 +234,7 @@ export class IronListAdapter {
     // Clean up temporary placeholder sizing
     if (el.__virtualizerPlaceholder) {
       el.style.paddingTop = '';
+      el.style.opacity = '';
       el.__virtualizerPlaceholder = false;
     }
 
@@ -258,6 +259,7 @@ export class IronListAdapter {
         // 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

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

@@ -247,7 +247,7 @@ describe('virtualizer - item height - initial render', () => {
   });
 });
 
-describe('virtualizer - item height - lazy rendering - scroll to index', () => {
+describe('virtualizer - item height - lazy rendering', () => {
   let virtualizer;
   let renderPlaceholders;
   let scrollTarget;
@@ -276,8 +276,28 @@ describe('virtualizer - item height - lazy rendering - scroll to index', () => {
     virtualizer.size = 1000;
   });
 
+  describe('placeholders', () => {
+    it('should have placeholders visually hidden', () => {
+      const item = document.querySelector('[data-index="0"]');
+
+      expect(getComputedStyle(item).opacity).to.equal('0');
+      // They should still have height (not hidden with display: none)
+      expect(item.offsetHeight).to.be.above(0);
+    });
+
+    it('should visually unhide items once no longer placeholders', async () => {
+      const item = document.querySelector('[data-index="0"]');
+
+      renderPlaceholders = false;
+      virtualizer.update();
+      await contentUpdate();
+
+      expect(getComputedStyle(item).opacity).to.equal('1');
+    });
+  });
+
   [false, true].forEach((initiallyRendered) => {
-    describe(`initially rendered: ${initiallyRendered}`, () => {
+    describe(`scroll to index - initially rendered: ${initiallyRendered}`, () => {
       beforeEach(async () => {
         if (initiallyRendered) {
           // Setup where the virtualizer has initially rendered all the items once