Skip to content

[Security Solution] Loading states across applications needs to be consistant #120355

Open

Description

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Assignees

Labels

8.2 candidateconsidered, but not committed, for 8.2 releaseTeam: SecuritySolutionSecurity Solutions Team working on SIEM, Endpoint, Timeline, Resolver, etc.

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions