Esri / calcite-design-system

A monorepo containing the packages for Esri's Calcite Design System
https://developers.arcgis.com/calcite-design-system/
Other
271 stars 75 forks source link

Block: remove redundant indicator behavior #7492

Open SkyeSeitz opened 11 months ago

SkyeSeitz commented 11 months ago

Check existing issues

Description

Current behavior Loader populates both in the header and in the content area when expanded, which feels redundant and may imply two separate elements are loading.

image

Acceptance Criteria

Expected behavior Loader populates only in header when collapsed and only in content area when expanded.

image

Relevant Info

Building off of #6485

Which Component

Calcite Block

Example Use Case

No response

Priority impact

p4 - not time sensitive

Calcite package

Esri team

Calcite (design)

github-actions[bot] commented 11 months ago

cc @geospatialem, @brittneytewks

SkyeSeitz commented 11 months ago

cc @ashetland

ashetland commented 11 months ago

@macandcheese @asangma Is there a reason use case for having a loading indicator in the header while it's expanded that we're missing?

macandcheese commented 11 months ago

Not from my side. I do think it's strange the loader replaces the icon at all...

I wonder if a calcite-progress on the top of the block would make sense? It would eliminate the need to replace a user-placed element, and could subtly persist even while the block was expanded + calcite-loader present to prevent hiding / showing elements when expanding / collapsing. You do kind of lose the immediacy of the spinner being centered within the item when blocks are all collapsed, but this kind of loading often seen in "listy places" as well across Apps...

https://github.com/Esri/calcite-design-system/assets/4733155/3a2b3342-eb10-42c0-bdd8-8724df215265

macandcheese commented 11 months ago

I do like that the loader within the Block content area is smaller in the above screenshots - depending on height of Block content, it can feel too large currently.

ashetland commented 11 months ago

From #7147 and #7420, the loader size should be changing based on the height of the container. Those breakpoints can definitely be revised if we want to.

I like using Progress too, but I do see one drawback: when all the Blocks are collapsed it's hard to tell which one is actually loading.

SkyeSeitz commented 11 months ago

Yea, it would be a somewhat learned behavior that the Progress bar represents the Block below it. Other than that, I am digging the Progress bar as perhaps a more elegant solution. The dimmed treatment is also nice, however, I think I would ultimately say it probably does not need to persist when Block is expanded to simplify the amount of Loading indicators.

brittneytewks commented 7 months ago

Removed Figma changes label as this will be tracked in monday.com

ashetland commented 1 month ago

How do we feel about moving forward with this? Based on @SkyeSeitz's comment, would it work to use Progress to indicate loading only while Block is collapsed? image