[UnifiedHistogram] Prevent double progress bar (#180456)

- Closes https://github.com/elastic/kibana/issues/180434

~~This PR removes the second progress bar. I think with all recent
changes it became redundant.~~

This PR adds a delay for UnifiedHistogram progress bar. It helps to
prevent double loading indicator in ES|QL mode.
This commit is contained in:
Julia Rechkunova 2024-04-12 12:59:49 +02:00 committed by GitHub
parent 0893fe72e4
commit b590272c2b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -11,7 +11,7 @@ import type { Observable } from 'rxjs';
import { Subject } from 'rxjs';
import useObservable from 'react-use/lib/useObservable';
import { IconButtonGroup, type IconButtonGroupProps } from '@kbn/shared-ux-button-toolbar';
import { EuiFlexGroup, EuiFlexItem, EuiProgress } from '@elastic/eui';
import { EuiFlexGroup, EuiFlexItem, EuiProgress, EuiDelayRender } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import type {
EmbeddableComponentProps,
@ -366,12 +366,15 @@ export function Chart({
data-test-subj="unifiedHistogramRendered"
>
{isChartLoading && (
<EuiProgress
size="xs"
color="accent"
position="absolute"
data-test-subj="unifiedHistogramProgressBar"
/>
/*
There are 2 different loaders which can appear above the chart. One is from the embeddable and one is from the UnifiedHistogram.
The idea is to show UnifiedHistogram loader until we get a new query params which would trigger the embeddable loader.
Updates to the time range can come earlier than the query updates which we delay on purpose for text based mode,
this is why it might get both loaders. We should find a way to resolve that better.
*/
<EuiDelayRender delay={500} data-test-subj="unifiedHistogramProgressBar">
<EuiProgress size="xs" color="accent" position="absolute" />
</EuiDelayRender>
)}
<HistogramMemoized
abortController={abortController}