Loading scrim always hidden if list is empty

[nwhittaker]

Check existing issues

• I have checked for existing issues to avoid duplicates

Actual Behavior

Given a <calcite-list loading /> element with a non-zero height and no children, the loading scrim is not visible.

Expected Behavior

The loading scrim is fully or partially visible depending on how much height the consumer has given the list. In other words, if the list is a scrolling container, the scrim appears centered in the container regardless of how many rows there may be, if any.

Reproduction Sample

https://codepen.io/nwhittaker-esri/pen/JjQLXJg

Reproduction Steps

1. Visit the sample and see the loading scrim is not visible.

Reproduction Version

2.11.1

Relevant Info

No response

Regression?

No response

Priority impact

impact - p2 - want for an upcoming milestone

Impact

The desire is to be able to use the loading state when initially populating an expensive list.

Calcite package

• @esri/calcite-components
• @esri/calcite-components-angular
• @esri/calcite-components-react
• @esri/calcite-design-tokens
• @esri/eslint-plugin-calcite-components

Esri team

ArcGIS Field Apps

[driskull]

The list component is currently displayed as block by default. If we were to change it to flex that would be a visual breaking change.

[nwhittaker]

The list component is currently displayed as block by default. If we were to change it to flex that would be a visual breaking change.

Agreed. If the issue can be fixed without changing the list's display, that'd be ideal.

[driskull]

Yeah, I'm not apposed to changing to flex. We'll just have to note it as a breaking change.

[geospatialem]

cc #5162

[ashetland]

@geospatialem We're removing the design label from this. We agree the long term story here is improvements related to #5162, but that effort shouldn't prevent moving forward with @driskull's fix in the meantime.

[geospatialem]

Work towards a min-height for the fix.