Calcite-components: Component: Loader

[patrickarlt]

https://github.com/Esri/calcite-web/issues/1022

Also See: https://ionicframework.com/docs/api/progress-bar

[julio8a]

Loaders-Squares.mp4.zip

From the Calcite-Web 2.0 update, new design. The new design includes:

• Loader (default)
• Progress
• Inline

I can see how the progress bar Patrick shared can be valuable as well. I've seen the infinite loader from Alan's worked. Maybe it's adding it and updating the tweens to match the new calcite loader?

[driskull]

We might be able to add just Progress and Inline components.

I can see the Progress component handling Alan's infinite loader bar which we usually have at the top of a panel or component. The Progress component would just have a slot for whatever goes inside it and it would allow configuring the progress bar at the top. There would be multiple options for the progress bar like indeterminate, indeterminate-reversed, percentage

[macandcheese]

Could we in any way leverage alerts for the progression or "filename.csv is being generated" type progress containers? I'd imagine the fields would be pretty similar.

We have a "countdown" animation already for auto dismiss alerts, we can change that to be a progression bar or indeterminate loading animation based on a prop?

[driskull]

We have a "countdown" animation already for auto dismiss alerts, we can change that to be a progression bar or indeterminate loading animation based on a prop?

Yep sounds right.

Could we in any way leverage alerts for the progression or "filename.csv is being generated" type progress containers? I'd imagine the fields would be pretty similar.

Maybe just an optional string that a user could update when they update the percentage

[julio8a]

When ready for the 2.0 UI update for this component please work with @bstifle.

Loading squares video above

[driskull]

@julio8a I think we still need a border-top loader that would just go at the top of a panel and not take up space within content. Is there a design for that?

[julio8a]

I'll work on getting that posted here.

[macandcheese]

I think we are conflating the two a bit.. the example already in the demo that @driskull is referring to should remain (although maybe only consumed by modal, alert, etc.) - the "Square" loader in my mind is great for initial page loads, switching between apps, etc., and could be easily themed to a particular Online app's color scheme - but I think they are two different use cases and we need both. Can't think of a good differentiating name however, ha.

[driskull]

It seems like we need:

• calcite-loader (big square)
• calcite-loader-progress (progress square)
• calcite-loader-inline (small square)
• calcite-loader-indeterminate (border loader, top of slot content)

[macandcheese]

Yeah that looks good, only thing we might want to add would be the determinate version of "top border":

• calcite-loader-progress (border loader, top of slot content)

[driskull]

Maybe...

• calcite-loader (big square)
• calcite-loader-progress (progress square)
• calcite-loader-top (loader at top of element, can be determinate or indeterminate)
• calcite-loader-inline (small square)

[driskull]

Ok, so the plan would be to...

• Rename calcite-progress to calcite-loader-top.
• Update calcite-loader to use new box design (big square)
• Develop calcite-loader-progress (progress square)
• Develop calcite-loader-inline (small square)

[bstifle]

@paulcpederson this is looking pretty dope based on the video.

Would love to art direct a little when you have the time for fine tuning