github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 01:38:56 -04:00
Code Issues Projects Releases Packages Wiki Activity

[AO] Use EuiLoadingChart for AlertSummaryWidget loading state (#150052)

Browse source 
## Summary

Improve loading state of AlertSummaryWidget component.

Compact


https://user-images.githubusercontent.com/12370520/216062356-94af9af8-1e4b-444d-8574-9b627004ef2e.mov

Full-size


https://user-images.githubusercontent.com/12370520/216062410-e15ee215-ca1c-478a-a7f1-c96b6cb46b5a.mov
This commit is contained in:
Maryam Saeidi 2023-02-01 16:26:09 +01:00 • committed by GitHub
parent 6e70bdb347
commit 78992c6ca7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 14 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

16
x-pack/plugins/triggers_actions_ui/public/application/sections/rule_details/components/alert_summary/alert_summary_widget.tsx
View file

@ -5,7 +5,7 @@
* 2.0.
*/
import { EuiLoadingSpinner } from '@elastic/eui';
import { EuiLoadingChart } from '@elastic/eui';
import React from 'react';
import { useLoadAlertSummary } from '../../../../hooks/use_load_alert_summary';
import { AlertSummaryWidgetProps } from '.';
@ -33,7 +33,19 @@ export const AlertSummaryWidget = ({
timeRange,
});
if (isLoading) return <EuiLoadingSpinner data-test-subj="alertSummaryWidgetLoading" />;
if (isLoading)
return (
<div
style={{
minHeight: fullSize ? 238 : 224,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}
>
<EuiLoadingChart size="l" data-test-subj="alertSummaryWidgetLoading" />
</div>
);
if (error) return <AlertSummaryWidgetError />;
return fullSize ? (