import React , { ReactNode , Suspense , lazy } from 'react' ; import { EuiLoadingChart } from '@elastic/eui' ; import classNames from 'classnames' ; import { IInterpreterRenderHandlers } from '../../../expressions/common' ; export interface VisualizationContainerProps { 'data-test-subj' ? : string ; className ? : string ; children : ReactNode ; handlers : IInterpreterRenderHandlers ; showNoResult ? : boolean ; error ? : string ; } const VisualizationNoResults = lazy ( ( ) => import ( './visualization_noresults' ) ) ; const VisualizationError = lazy ( ( ) => import ( './visualization_error' ) ) ; export const VisualizationContainer = ( { 'data-test-subj' : dataTestSubj = '' , className , children , handlers , showNoResult = false , error , } ) => { const classes = classNames ( 'visualization' , className ) ; const fallBack = ( < div className = "visChart__spinner" > < EuiLoadingChart mono size = "l" / > < /div>); return ( < div data - test - subj = { dataTestSubj } className = { classes } > < Suspense fallback = { fallBack } > { error ? ( < VisualizationError onInit = { ( ) => handlers . done ( ) } error = { error } / > ) : showNoResult ? ( < VisualizationNoResults onInit = { ( ) => handlers . done ( ) } />) : (children)} < /Suspense> < /div>); } ;