refactor: add updating-cell part styles (#8374) (#8451)

Co-authored-by: Sascha Ißbrücker <sissbruecker@vaadin.com>
vaadin · Jan 7, 2025 · e88da15 · e88da15
1 parent 99eadb0
commit e88da15
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 1 deletion.
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
@@ -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
@@ -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
@@ -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' },
 );