Description
openedon Dec 3, 2021
The Security app has a lot of variety in loading animations, both at the page layout level and at the "panel" level. I think there needs some broad alignment about how to visually display loading states on the pages across the application.
Off-hand these would be the suggestions from an EUI standards point of view:
- Utilize KibanaPageTemplate (which itself is a wrapper around EuiPageTemplate) on all pages in the Security application.
- Utilize EuiEmptyPrompt to show centered page level loading for when page or routing loading needs to be done.
- Distinguish between "no returned results" and "has no data at all" states. Provide different empty states for each.
Right now a lot of the application has "flashes" because these loaders are handled through state checks. That means that often, when we do have data, you'll see emtpy states briefly before the state changes and the data fills in. This should be corrected by putting the check higher up in the logic tree so that pause these renders till the data is available.
To highlight the problem, look at the following GIF and notice that every one of these pages provides loading animations in different ways:
- Sometimes we load with an
EuiProgress
under the title (Alerts) - Sometimes we load with a top/centered aligned spinner
- Sometimes we load with a top aligned
EuiProgress
at the top of the page - Sometimes we load with layout skeletons and
EuiLoadingContent
Even within these usages, we're using different sizes and colors of the same loaders.