refactor: replace vaadin-grid-appear animation with ResizeObserver (#10302)

vursen · web-flow · commit acf4f65a5d74 · 2025-10-10T16:08:54.000+04:00
diff --git a/packages/grid-pro/test/keyboard-navigation.test.js b/packages/grid-pro/test/keyboard-navigation.test.js
@@ -1,6 +1,6 @@
 import { expect } from '@vaadin/chai-plugins';
 import { sendKeys } from '@vaadin/test-runner-commands';
-import { aTimeout, fixtureSync, nextFrame, oneEvent } from '@vaadin/testing-helpers';
+import { aTimeout, fixtureSync, nextFrame, nextResize } from '@vaadin/testing-helpers';
 import sinon from 'sinon';
 import '../src/vaadin-grid-pro.js';
 import '../src/vaadin-grid-pro-edit-column.js';
@@ -30,8 +30,7 @@ describe('keyboard navigation', () => {
     };
 
     grid.items = createItems();
-    // Wait for vaadin-grid-appear animation to finish
-    await oneEvent(grid, 'animationend');
+    await nextResize(grid);
     flushGrid(grid);
   });
 
diff --git a/packages/grid/src/styles/vaadin-grid-base-styles.js b/packages/grid/src/styles/vaadin-grid-base-styles.js
@@ -7,15 +7,8 @@ import '@vaadin/component-base/src/styles/style-props.js';
 import { css } from 'lit';
 
 export const gridStyles = css`
-  @keyframes vaadin-grid-appear {
-    to {
-      opacity: 1;
-    }
-  }
-
   :host {
     display: flex;
-    animation: 1ms vaadin-grid-appear;
     max-width: 100%;
     height: 400px;
     min-height: var(--_grid-min-height, 0);
diff --git a/packages/grid/src/vaadin-grid-column-auto-width-mixin.js b/packages/grid/src/vaadin-grid-column-auto-width-mixin.js
@@ -30,14 +30,12 @@ export const ColumnAutoWidthMixin = (superClass) =>
       ];
     }
 
-    constructor() {
-      super();
-      this.addEventListener('animationend', this.__onAnimationEndAutoWidth);
-    }
+    /** @protected */
+    updated(props) {
+      super.updated(props);
 
-    /** @private */
-    __onAnimationEndAutoWidth(e) {
-      if (e.animationName.indexOf('vaadin-grid-appear') === 0) {
+      // If the grid was hidden and is now visible
+      if (props.has('__hostVisible') && !props.get('__hostVisible')) {
         this.__tryToRecalculateColumnWidthsIfPending();
       }
     }
diff --git a/packages/grid/src/vaadin-grid-mixin.js b/packages/grid/src/vaadin-grid-mixin.js
@@ -170,11 +170,6 @@ export const GridMixin = (superClass) =>
       };
     }
 
-    constructor() {
-      super();
-      this.addEventListener('animationend', this._onAnimationEnd);
-    }
-
     /** @private */
     get _firstVisibleIndex() {
       const firstVisibleItem = this.__getFirstVisibleItem();
@@ -279,6 +274,14 @@ export const GridMixin = (superClass) =>
     updated(props) {
       super.updated(props);
 
+      // If the grid was hidden and is now visible
+      if (props.has('__hostVisible') && !props.get('__hostVisible')) {
+        // Ensure header and footer have tabbable elements
+        this._resetKeyboardNavigation();
+
+        requestAnimationFrame(() => this.__scrollToPendingIndexes());
+      }
+
       if (props.has('__headerRect') || props.has('__footerRect') || props.has('__itemsRect')) {
         setTimeout(() => this.__updateMinHeight());
       }
@@ -824,21 +827,6 @@ export const GridMixin = (superClass) =>
       this.__updateHorizontalScrollPosition();
     }
 
-    /** @private */
-    _onAnimationEnd(e) {
-      // ShadyCSS applies scoping suffixes to animation names
-      if (e.animationName.indexOf('vaadin-grid-appear') === 0) {
-        e.stopPropagation();
-
-        // Ensure header and footer have tabbable elements
-        this._resetKeyboardNavigation();
-
-        requestAnimationFrame(() => {
-          this.__scrollToPendingIndexes();
-        });
-      }
-    }
-
     /**
      * @param {!HTMLTableRowElement} row
      * @return {!GridItemModel}
diff --git a/packages/grid/src/vaadin-grid-resize-mixin.js b/packages/grid/src/vaadin-grid-resize-mixin.js
@@ -13,6 +13,12 @@ export const ResizeMixin = (superClass) =>
   class extends superClass {
     static get properties() {
       return {
+        /** @private */
+        __hostVisible: {
+          type: Boolean,
+          value: false,
+        },
+
         /** @private */
         __tableRect: Object,
 
@@ -32,6 +38,11 @@ export const ResizeMixin = (superClass) =>
       super.ready();
 
       const resizeObserver = new ResizeObserver((entries) => {
+        const hostEntry = entries.findLast(({ target }) => target === this);
+        if (hostEntry) {
+          this.__hostVisible = this.checkVisibility();
+        }
+
         const tableEntry = entries.findLast(({ target }) => target === this.$.table);
         if (tableEntry) {
           this.__tableRect = tableEntry.contentRect;
@@ -53,6 +64,7 @@ export const ResizeMixin = (superClass) =>
         }
       });
 
+      resizeObserver.observe(this);
       resizeObserver.observe(this.$.table);
       resizeObserver.observe(this.$.header);
       resizeObserver.observe(this.$.items);
diff --git a/packages/grid/test/column-auto-width.test.js b/packages/grid/test/column-auto-width.test.js
@@ -1,5 +1,5 @@
 import { expect } from '@vaadin/chai-plugins';
-import { aTimeout, fixtureSync, nextFrame, oneEvent } from '@vaadin/testing-helpers';
+import { aTimeout, fixtureSync, nextFrame, nextResize } from '@vaadin/testing-helpers';
 import sinon from 'sinon';
 import './grid-test-styles.js';
 import '../all-imports.js';
@@ -79,10 +79,8 @@ describe('column auto-width', () => {
     `);
     spy = sinon.spy(grid, '_recalculateColumnWidths');
     columns = grid.querySelectorAll('vaadin-grid-column');
-    // Show the grid and wait for animationend event ("vaadin-grid-appear")
-    // to ensure the grid is in a consistent state before starting each test
     grid.hidden = false;
-    await oneEvent(grid, 'animationend');
+    await nextResize(grid);
   });
 
   it('should have correct column widths when items are set', async () => {
@@ -188,9 +186,9 @@ describe('column auto-width', () => {
       </vaadin-grid>
     `);
 
-    await nextFrame();
+    await nextResize(grid);
     grid.hidden = false;
-    await oneEvent(grid, 'animationend');
+    await nextResize(grid);
     expectColumnWidthsToBeOk(grid.querySelectorAll('vaadin-grid-column'), [107]);
   });
 
diff --git a/packages/grid/test/drag-and-drop.test.js b/packages/grid/test/drag-and-drop.test.js
@@ -1,6 +1,6 @@
 import { expect } from '@vaadin/chai-plugins';
 import { resetMouse, sendMouse, sendMouseToElement } from '@vaadin/test-runner-commands';
-import { aTimeout, fixtureSync, listenOnce, nextFrame, oneEvent } from '@vaadin/testing-helpers';
+import { aTimeout, fixtureSync, listenOnce, nextFrame, nextResize } from '@vaadin/testing-helpers';
 import sinon from 'sinon';
 import './grid-test-styles.js';
 import '../src/vaadin-grid.js';
@@ -114,9 +114,9 @@ describe('drag and drop', () => {
         <vaadin-grid-column path="last" header="Last name"></vaadin-grid-column>
       </vaadin-grid>
     `);
-    await nextFrame();
+    await nextResize(grid);
     grid.hidden = false;
-    await oneEvent(grid, 'animationend');
+    await nextResize(grid);
     await aTimeout(1);
 
     dragData = {};
diff --git a/packages/grid/test/hidden-grid.test.js b/packages/grid/test/hidden-grid.test.js
@@ -1,6 +1,6 @@
 import { expect } from '@vaadin/chai-plugins';
 import { sendKeys } from '@vaadin/test-runner-commands';
-import { fixtureSync, nextFrame, nextRender, oneEvent } from '@vaadin/testing-helpers';
+import { fixtureSync, nextFrame, nextRender, nextResize } from '@vaadin/testing-helpers';
 import sinon from 'sinon';
 import './grid-test-styles.js';
 import '../src/vaadin-grid.js';
@@ -31,14 +31,14 @@ describe('hidden grid', () => {
 
     it('should have content on appear', async () => {
       grid.removeAttribute('hidden');
-      await oneEvent(grid, 'animationend');
+      await nextResize(grid);
       await nextFrame();
       expect(getBodyCellContent(grid, 0, 0).textContent).to.equal('0');
     });
 
     it('should make it possible to Tab to header', async () => {
       grid.removeAttribute('hidden');
-      await oneEvent(grid, 'animationend');
+      await nextResize(grid);
       await nextFrame();
 
       await sendKeys({ press: 'Tab' });
diff --git a/packages/grid/test/resizing.test.js b/packages/grid/test/resizing.test.js
@@ -1,5 +1,5 @@
 import { expect } from '@vaadin/chai-plugins';
-import { aTimeout, fixtureSync, nextFrame, nextResize, oneEvent } from '@vaadin/testing-helpers';
+import { aTimeout, fixtureSync, nextFrame, nextResize } from '@vaadin/testing-helpers';
 import sinon from 'sinon';
 import './grid-test-styles.js';
 import '../all-imports.js';
@@ -38,9 +38,9 @@ describe('resizing', () => {
       root.textContent = 'footer';
     };
     grid.dataProvider = infiniteDataProvider;
-    await nextFrame();
+    await nextResize(grid);
     grid.hidden = false;
-    await oneEvent(grid, 'animationend');
+    await nextResize(grid);
     flushGrid(grid);
   });
 
diff --git a/packages/grid/test/row-height.test.js b/packages/grid/test/row-height.test.js
@@ -1,5 +1,5 @@
 import { expect } from '@vaadin/chai-plugins';
-import { aTimeout, fixtureSync, nextFrame, oneEvent } from '@vaadin/testing-helpers';
+import { aTimeout, fixtureSync, nextFrame, nextResize } from '@vaadin/testing-helpers';
 import './grid-test-styles.js';
 import '../src/vaadin-grid.js';
 import { flushGrid, getRowCells, getRows, infiniteDataProvider, scrollToEnd } from './helpers.js';
@@ -54,14 +54,14 @@ describe('rows', () => {
   async function init(fixtureFactory) {
     grid = fixtureFactory();
 
-    await nextFrame();
+    await nextResize(grid);
 
     grid.dataProvider = infiniteDataProvider;
     grid.hidden = false;
     flushGrid(grid);
     header = grid.$.header;
 
-    await oneEvent(grid, 'animationend');
+    await nextResize(grid);
     flushGrid(grid);
 
     rows = getRows(grid.$.items);
diff --git a/packages/grid/test/scroll-to-index.test.js b/packages/grid/test/scroll-to-index.test.js
@@ -1,5 +1,5 @@
 import { expect } from '@vaadin/chai-plugins';
-import { fixtureSync, listenOnce, nextFrame, oneEvent } from '@vaadin/testing-helpers';
+import { fixtureSync, listenOnce, nextFrame, nextResize } from '@vaadin/testing-helpers';
 import './grid-test-styles.js';
 import '../all-imports.js';
 import {
@@ -149,18 +149,15 @@ describe('scroll to index', () => {
       grid.scrollToIndex(49, 100);
     });
 
-    it('should scroll to index after attaching', (done) => {
+    it('should scroll to index after attaching', async () => {
       const parent = grid.parentElement;
       parent.removeChild(grid);
       grid.scrollToIndex(100);
-      grid.addEventListener('animationend', () => {
-        requestAnimationFrame(() => {
-          expect(getFirstVisibleItem(grid).index).to.be.above(75);
-          expect(grid.$.table.scrollTop).to.be.above(0);
-          done();
-        });
-      });
       parent.appendChild(grid);
+      await nextResize(grid);
+      await nextFrame();
+      expect(getFirstVisibleItem(grid).index).to.be.above(75);
+      expect(grid.$.table.scrollTop).to.be.above(0);
     });
 
     it('should scroll to index after unhiding', async () => {
@@ -325,7 +322,7 @@ describe('scroll to index', () => {
         flushGrid(grid);
         flushPendingRequests();
 
-        await oneEvent(grid, 'animationend');
+        await nextResize(grid);
         await nextFrame();
       });
 
@@ -570,7 +567,7 @@ describe('scroll to index', () => {
       `);
       grid.items = Array.from({ length: 100 }, (_, index) => `Item ${index}`);
       grid.scrollToIndex(50);
-      await oneEvent(grid, 'animationend');
+      await nextResize(grid);
       await nextFrame();
     });
 
@@ -590,7 +587,7 @@ describe('scroll to index', () => {
       grid.items = Array.from({ length: 100 }, (_, index) => `Item ${index}`);
       grid.scrollToIndex(50);
       container.appendChild(grid);
-      await oneEvent(grid, 'animationend');
+      await nextResize(grid);
       await nextFrame();
     });
 
diff --git a/packages/vaadin-lumo-styles/src/components/grid.css b/packages/vaadin-lumo-styles/src/components/grid.css
@@ -4,16 +4,9 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 @media lumo_components_grid {
-  @keyframes vaadin-grid-appear {
-    to {
-      opacity: 1;
-    }
-  }
-
   :host {
     display: flex;
     flex-direction: column;
-    animation: 1ms vaadin-grid-appear;
     height: 400px;
     min-height: var(--_grid-min-height, 0);
     flex: 1 1 auto;

Original file line number	Diff line number	Diff line change
`@@ -30,14 +30,12 @@ export const ColumnAutoWidthMixin = (superClass) =>`
`30`	`30`	`];`
`31`	`31`	`}`
`32`	`32`
`33`		`- constructor() {`
`34`		`- super();`
`35`		`- this.addEventListener('animationend', this.__onAnimationEndAutoWidth);`
`36`		`- }`
	`33`	`+ /** @protected */`
	`34`	`+ updated(props) {`
	`35`	`+ super.updated(props);`
`37`	`36`
`38`		`- /** @private */`
`39`		`- __onAnimationEndAutoWidth(e) {`
`40`		`- if (e.animationName.indexOf('vaadin-grid-appear') === 0) {`
	`37`	`+ // If the grid was hidden and is now visible`
	`38`	`+ if (props.has('__hostVisible') && !props.get('__hostVisible')) {`
`41`	`39`	`this.__tryToRecalculateColumnWidthsIfPending();`
`42`	`40`	`}`
`43`	`41`	`}`