import { Chart } from '@elastic/charts' ; import { EuiLoadingChart } from '@elastic/eui' ; import { EuiLoadingChartSize } from '@elastic/eui/src/components/loading/loading_chart' ; import React from 'react' ; interface Props { isInitialLoad : boolean ; height ? : number ; width ? : number ; iconSize ? : EuiLoadingChartSize ; children : React . ReactNode ; } const CHART_HEIGHT = 170 ; export function ChartContainer ( { isInitialLoad , children , iconSize = 'xl' , height = CHART_HEIGHT , } ) { if ( isInitialLoad ) { return ( < div data - test - subj = "loading" style = { { height , display : 'flex' , alignItems : 'center' , justifyContent : 'center' , } } > < EuiLoadingChart size = { iconSize } /> < /div>); } return < Chart size = { { height } } > { children } < /Chart>; }