diff --git a/packages/grid-pro/src/vaadin-grid-pro-inline-editing-mixin.js b/packages/grid-pro/src/vaadin-grid-pro-inline-editing-mixin.js index 0efcc20a51e..848498ad846 100644 --- a/packages/grid-pro/src/vaadin-grid-pro-inline-editing-mixin.js +++ b/packages/grid-pro/src/vaadin-grid-pro-inline-editing-mixin.js @@ -17,7 +17,8 @@ import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themab registerStyles( 'vaadin-grid-pro', css` - :host([loading-editor]) [part~='focused-cell'] ::slotted(vaadin-grid-cell-content) { + :host([loading-editor]) [part~='focused-cell'] ::slotted(vaadin-grid-cell-content), + [part~='updating-cell'] ::slotted(vaadin-grid-cell-content) { opacity: 0; pointer-events: none; } diff --git a/packages/grid-pro/test/keyboard-navigation.common.js b/packages/grid-pro/test/keyboard-navigation.common.js index 6019b2ca453..c5f04da9b5a 100644 --- a/packages/grid-pro/test/keyboard-navigation.common.js +++ b/packages/grid-pro/test/keyboard-navigation.common.js @@ -389,4 +389,13 @@ describe('keyboard navigation', () => { expect(itemPropertyChangedSpy.called).to.be.false; }); }); + + describe('updating cell', () => { + it('should hide cell content while cell is updating', async () => { + grid.cellPartNameGenerator = () => 'updating-cell'; + await nextFrame(); + const container = getContainerCellContent(grid.$.items, 0, 0); + expect(getComputedStyle(container).opacity).to.equal('0'); + }); + }); }); diff --git a/packages/grid-pro/theme/lumo/vaadin-grid-pro-styles.js b/packages/grid-pro/theme/lumo/vaadin-grid-pro-styles.js index 2c39be915a0..20fb44b902c 100644 --- a/packages/grid-pro/theme/lumo/vaadin-grid-pro-styles.js +++ b/packages/grid-pro/theme/lumo/vaadin-grid-pro-styles.js @@ -62,6 +62,25 @@ registerStyles( box-shadow: inset 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color); } } + + [part~='updating-cell']::after { + content: ''; + position: absolute; + inset: var(--_cell-padding); + margin: var(--_focus-ring-width); + border-radius: 4px; + background-size: max(4em, 50%); + background-repeat: no-repeat; + background-position: min(-200%, -4em) 0; + background-image: linear-gradient(90deg, transparent, var(--lumo-contrast-10pct), transparent); + animation: vaadin-grid-pro-updating-cell 1.3s ease-out infinite; + } + + @keyframes vaadin-grid-pro-updating-cell { + 100% { + background-position: max(300%, 8em) 0; + } + } `, { moduleId: 'lumo-grid-pro' }, );