Skip to content

Commit

Permalink
[TSVB] Show the loading spinner while loading in dashboard (elastic#1…
Browse files Browse the repository at this point in the history
…14244)

* 🐛 Fix metric rescale

* 📸 Restored old snapshots

* 🐛 Extend the fix to all scenarios

* 📸 Refresh snapshots for new fix

* 💄 Add suspense with loading spinner while waiting for the component to be loaded

* 🐛 Move the styling one level deeper to avoid loading gaps

* 🐛 show loader since the beginning and speed up a bit embeddable load

* 💄 Show the loader while waiting for the palette

* ⚡ Remove one chunk from TSVB async series

* 🐛 Restore previous async chunk

* 👌 Integrate feedback

* 🚨 Fix linting issue

Co-authored-by: Kibana Machine <[email protected]>
  • Loading branch information
dej611 and kibanamachine authored Oct 25, 2021
1 parent 5d73e8c commit 560cb6f
Show file tree
Hide file tree
Showing 4 changed files with 79 additions and 45 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@

import './timeseries_visualization.scss';

import React, { useCallback, useEffect } from 'react';
import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
import React, { Suspense, useCallback, useEffect } from 'react';
import { EuiFlexGroup, EuiFlexItem, EuiLoadingChart } from '@elastic/eui';
import { XYChartSeriesIdentifier, GeometryValue } from '@elastic/charts';
import { IUiSettingsClient } from 'src/core/public';
import { IInterpreterRenderHandlers } from 'src/plugins/expressions';
Expand All @@ -28,6 +28,7 @@ import { getInterval } from './lib/get_interval';
import { AUTO_INTERVAL } from '../../../common/constants';
import { TIME_RANGE_DATA_MODES, PANEL_TYPES } from '../../../common/enums';
import type { IndexPattern } from '../../../../../data/common';
import '../index.scss';

interface TimeseriesVisualizationProps {
className?: string;
Expand Down Expand Up @@ -161,18 +162,26 @@ function TimeseriesVisualization({
</EuiFlexItem>
)}
<EuiFlexItem>
<VisComponent
getConfig={getConfig}
model={model}
visData={visData}
uiState={uiState}
onBrush={onBrush}
onFilterClick={handleFilterClick}
onUiState={handleUiState}
syncColors={syncColors}
palettesService={palettesService}
fieldFormatMap={indexPattern?.fieldFormatMap}
/>
<Suspense
fallback={
<div className="visChart__spinner">
<EuiLoadingChart mono size="l" />
</div>
}
>
<VisComponent
getConfig={getConfig}
model={model}
visData={visData}
uiState={uiState}
onBrush={onBrush}
onFilterClick={handleFilterClick}
onUiState={handleUiState}
syncColors={syncColors}
palettesService={palettesService}
fieldFormatMap={indexPattern?.fieldFormatMap}
/>
</Suspense>
</EuiFlexItem>
</EuiFlexGroup>
);
Expand Down
69 changes: 41 additions & 28 deletions src/plugins/vis_types/timeseries/public/timeseries_vis_renderer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import { render, unmountComponentAtNode } from 'react-dom';
import { I18nProvider } from '@kbn/i18n/react';
import { IUiSettingsClient } from 'kibana/public';

import { EuiLoadingChart } from '@elastic/eui';
import { fetchIndexPattern } from '../common/index_patterns_utils';
import { VisualizationContainer, PersistedState } from '../../../visualizations/public';

Expand Down Expand Up @@ -43,10 +44,6 @@ export const getTimeseriesVisRenderer: (deps: {
name: 'timeseries_vis',
reuseDomNode: true,
render: async (domNode, config, handlers) => {
// Build optimization. Move app styles from main bundle
// @ts-expect-error TS error, cannot find type declaration for scss
await import('./application/index.scss');

handlers.onDestroy(() => {
unmountComponentAtNode(domNode);
});
Expand All @@ -55,33 +52,49 @@ export const getTimeseriesVisRenderer: (deps: {
const { indexPatterns } = getDataStart();

const showNoResult = !checkIfDataExists(visData, model);
const [palettesService, { indexPattern }] = await Promise.all([

let servicesLoaded;

Promise.all([
palettes.getPalettes(),
fetchIndexPattern(model.index_pattern, indexPatterns),
]);
]).then(([palettesService, { indexPattern }]) => {
servicesLoaded = true;

render(
<I18nProvider>
<VisualizationContainer
data-test-subj="timeseriesVis"
handlers={handlers}
showNoResult={showNoResult}
error={get(visData, [model.id, 'error'])}
>
<TimeseriesVisualization
// it is mandatory to bind uiSettings because of "this" usage inside "get" method
getConfig={uiSettings.get.bind(uiSettings)}
unmountComponentAtNode(domNode);

render(
<I18nProvider>
<VisualizationContainer
data-test-subj="timeseriesVis"
handlers={handlers}
indexPattern={indexPattern}
model={model}
visData={visData as TimeseriesVisData}
syncColors={syncColors}
uiState={handlers.uiState! as PersistedState}
palettesService={palettesService}
/>
</VisualizationContainer>
</I18nProvider>,
domNode
);
showNoResult={showNoResult}
error={get(visData, [model.id, 'error'])}
>
<TimeseriesVisualization
// it is mandatory to bind uiSettings because of "this" usage inside "get" method
getConfig={uiSettings.get.bind(uiSettings)}
handlers={handlers}
indexPattern={indexPattern}
model={model}
visData={visData as TimeseriesVisData}
syncColors={syncColors}
uiState={handlers.uiState! as PersistedState}
palettesService={palettesService}
/>
</VisualizationContainer>
</I18nProvider>,
domNode
);
});

if (!servicesLoaded) {
render(
<div className="visChart__spinner">
<EuiLoadingChart mono size="l" />
</div>,
domNode
);
}
},
});
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,9 @@
import _, { get } from 'lodash';
import { Subscription } from 'rxjs';
import { i18n } from '@kbn/i18n';
import React from 'react';
import { render } from 'react-dom';
import { EuiLoadingChart } from '@elastic/eui';
import { VISUALIZE_EMBEDDABLE_TYPE } from './constants';
import {
IndexPattern,
Expand Down Expand Up @@ -299,6 +302,13 @@ export class VisualizeEmbeddable
this.domNode = div;
super.render(this.domNode);

render(
<div className="visChart__spinner">
<EuiLoadingChart mono size="l" />
</div>,
this.domNode
);

const expressions = getExpressions();
this.handler = await expressions.loader(this.domNode, undefined, {
onRenderError: (element: HTMLElement, error: ExpressionRenderError) => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,12 @@ export const createVisualizeEmbeddableAsync = async (
...args: ConstructorParameters<typeof VisualizeEmbeddableType>
) => {
// Build optimization. Move app styles from main bundle
// @ts-expect-error TS error, cannot find type declaration for scss
await import('./embeddables.scss');

const { VisualizeEmbeddable } = await import('./visualize_embeddable');
const [{ VisualizeEmbeddable }] = await Promise.all([
import('./visualize_embeddable'),
// @ts-expect-error TS error, cannot find type declaration for scss
import('./embeddables.scss'),
]);

return new VisualizeEmbeddable(...args);
};

0 comments on commit 560cb6f

Please sign in to comment.