fix: run the class name generator only for loaded rows (#3789) (#3796)

Co-authored-by: Sergey Vinogradov <mr.vursen@gmail.com>

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

@@ -49,7 +49,7 @@ export const StylingMixin = (superClass) =>
      */
     generateCellClassNames() {
       Array.from(this.$.items.children)
-        .filter((row) => !row.hidden)
+        .filter((row) => !row.hidden && !row.hasAttribute('loading'))
         .forEach((row) => this._generateCellClassNames(row, this.__getRowModel(row)));
     }
 

packages/grid/test/class-name-generator.test.js

@@ -125,4 +125,35 @@ describe('class name generator', () => {
     assertClassList(getContainerCell(grid.$.items, 1, 0), ['odd']);
     assertClassList(getContainerCell(grid.$.items, 1, 1), ['odd']);
   });
+
+  describe('async data provider', () => {
+    let clock;
+
+    beforeEach(() => {
+      clock = sinon.useFakeTimers({
+        shouldClearNativeTimers: true
+      });
+
+      grid.dataProvider = (params, callback) => {
+        setTimeout(() => infiniteDataProvider(params, callback), 10);
+      };
+    });
+
+    afterEach(() => {
+      clock.restore();
+    });
+
+    it('should only run the generator for the rows that are loaded', async () => {
+      const spy = sinon.spy();
+      grid.cellClassNameGenerator = spy;
+      spy.resetHistory();
+
+      grid.generateCellClassNames();
+      expect(spy.called).to.be.false;
+
+      clock.tick(10);
+      grid.generateCellClassNames();
+      expect(spy.called).to.be.true;
+    });
+  });
 });