search

grommet / hpe-design-system

HPE Design System
48 stars 24 forks source link

Loading Indicators #2180

Open taysea opened 2 years ago

taysea commented 2 years ago

How to present that Data is being loaded.

Things to consider:

  1. Context (Page, Page section, individual component)
  2. How to present -- Spinner, Skeleton, etc.
eddieshowcase commented 2 years ago

For Ezmeral, we have an app-wide mechanism that can trigger a generic loading modal with spinner. We also have a few variants of an in-line/on-page loading spinner + message that can be used on the page in various use cases.

Please consider, not just page-wide loading behaviors, but guidance such as render the page static content, but show actions disabled? or when how to use skeletons? etc.

Also consider that many pages/components now are designed to be self contained. So for example our DataTables and often lists will make their own API calls once a page renders, so there is need to coordinate or show loading with these items together.

We are using the DataTable placeholder for example:

Screen Shot 2022-01-19 at 3 37 04 PM
bahriaditi commented 2 years ago

More use cases from Jeff Stolz and Amanda Vogel:

loading

Spinner example
halocline commented 2 years ago

Raised again on 7/20/22.