mirror of
https://github.com/elastic/kibana.git
synced 2025-04-24 09:48:58 -04:00
[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:
parent
0893fe72e4
commit
b590272c2b
1 changed files with 10 additions and 7 deletions
|
@ -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}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue