Grid - allow cellContent in loading row to participate in rendering/styling

[robrez]

Describe your motivation

To generate a skeleton layout for content within a loading row

Describe the solution you'd like

I think, perhaps to have the loading attribute propagated to individual cell-content elements

Describe alternatives you've considered

Currently, a functional CSS rule causes all cells within a loading row to be "invisible" (opacity: 0 on v23 and visibility: hidden on v24)

  [part~='row'][loading] [part~='body-cell'] ::slotted(vaadin-grid-cell-content) {
    visibility: hidden;
  }

I cannot target that cell content w/ ::part. I can make a rule such as this...

  vaadin-grid[loading] vaadin-grid-cell-content {
    visibility: visible;
  }
  .my-cell-content .something {
    background-color: currentColor;
    opacity: .4;
  }

However that inappropriately targets rows that aren't loading whenever anything is loading.

I cannot use cellPartNameGenerator for a few reasons...

• As above, I wouldn't be able to target the cell-content within a "loading cell"
• Loading rows shall be exempted from cell part/class generation
• The GridItem model has no awareness of an item's loading state.. well, more accurately there is no item to have a loading state.

Additional context

No response

[web-padawan]

Thanks for the issue. We have loading-row-cell part, which you could probably use to apply some CSS properties:

vaadin-grid::part(loading-row-cell) {
  --cell-color: #e2e2e2;
} 

vaadin-grid-cell-content {
  color: var(--cell-color);
}

This would be similar to the idea that we used for cell content padding in https://github.com/vaadin/web-components/pull/6646

[robrez]

Oh, good idea. yes.. that would work.