calcite-list - initial empty list with loading=true is not visually tall enough to show loading animation

[jgrayson-apl]

Actual Behavior

When an empty calcite-list with loading=true is initially displayed it's not visually tall enough to show loading animation.

Expected Behavior

I would expect the calcite-list to be tall enough to display the loading animation even if the list is empty

Reproduction Sample

https://codepen.io/john-grayson/pen/gOQOmZE

Reproduction Steps

1. Load the above codepen
2. Watch how the list is initially not tall enough to display the loading animation

Reproduction Version

1.4.2

Relevant Info

No response

Regression?

No response

Priority impact

p4 - not time sensitive

Impact

No response

Esri team

N/A

[geospatialem]

Also appears a bit cut off when only one list-item is present: https://codepen.io/geospatialem/pen/MWzWmzQ.

[geospatialem]

@SkyeSeitz @ashetland What would you folks recommend when the list is empty to display the loading spinner? We'd like to tackle this one for the June priorities this month.

[jgrayson-apl]

FYI: I updated my codepen with the workaround I'm using in my apps. I basically unset/reset the 'position' style property of the internal container.

[ashetland]

Could List accommodate the Loader with some minimal padding? In this example, the empty List would be 80px tall while loading.

[driskull]

Yes, that is super doable.

[driskull]

I think it would be better if the calcite-scrim was just more responsive to adjust the loading spinner size relative to available height. That way, the list would't get taller just for a loading spinner if only 1 item exists.

[driskull]

When the loader component inside the scrim is is set to scale="s" it looks good.

[ashetland]

Love that idea. Since Loader has scales I wasn't sure if we were trying to be consistent with using a m Loader with a m List.

Would we still need to define a minimum height if there are no Items in the List while it's loading? We could go the height of a single List Item, like in your example.

[ashetland]

And assuming List gets small and large scales added to it eventually, we'd probably need to ensure enough height at small scale for the small scale Loader inside Scrim.

[driskull]

@alisonailea @ashetland if we define heights in which the loading spinner switches from "m" to "s" or "l" do we need these heights defined in the design tokens somewhere?

If not, could you give me height number breakpoints for when these size switches should occur?

[ashetland]

Okay we think we have a good starting point for this. These breakpoints can be adjusted in the future if/when we get feedback on it.

Breakpoints would be 72px and 480px:

Demo video:

CleanShot.2023-06-15.at.16.32.29.mp4

[github-actions]

Installed and assigned for verification.

[geospatialem]

Verified with https://codepen.io/geospatialem/pen/MWzWmzQ in 1.5.0-next.4.