import React , { ReactNode , Suspense } from 'react' ; import { EuiLoadingChart } from '@elastic/eui' ; import classNames from 'classnames' ; import { VisualizationNoResults } from './visualization_noresults' ; interface VisualizationContainerProps { className ? : string ; children : ReactNode ; showNoResult ? : boolean ; } export const VisualizationContainer = ( { className , children , showNoResult = false , } ) => { const classes = classNames ( 'visualization' , className ) ; const fallBack = ( < div className = "visChart__spinner" > < EuiLoadingChart mono size = "l" / > < /div>); return ( < div className = { classes } > < Suspense fallback = { fallBack } > { showNoResult ? < VisualizationNoResults / > : children } < /Suspense> < /div>); } ;