import { EuiLoadingSpinner } from '@elastic/eui' ; import type { PropsWithChildren } from 'react' ; import React , { Component , Suspense } from 'react' ; import { i18n } from '@kbn/i18n' ; import type { NotificationsStart } from 'src/core/public' ; interface Props { notifications : NotificationsStart ; /**
     * Whether or not to show a loading spinner while waiting for the child components to load.
     *
     * Default is true.
     */ showLoadingSpinner ? : boolean ; } interface State { error : Error | null ; } export class SuspenseErrorBoundary extends Component < PropsWithChildren < Props > , State > { state : State = { error : null , } ; static getDerivedStateFromError ( error ) { return { error } ; } public componentDidCatch ( error ) { const { notifications } = this . props ; if ( notifications ) { const title = i18n . translate ( 'xpack.spaces.uiApi.errorBoundaryToastTitle' , { defaultMessage : 'Failed to load Kibana asset' , } ) ; const toastMessage = i18n . translate ( 'xpack.spaces.uiApi.errorBoundaryToastMessage' , { defaultMessage : 'Reload page to continue.' , } ) ; notifications . toasts . addError ( error , { title , toastMessage } ) ; } } render ( ) { const { children , notifications , showLoadingSpinner = true } = this . props ; const { error } = this . state ; if ( ! notifications || error ) { return null ; } const fallback = showLoadingSpinner ? < EuiLoadingSpinner /> : null; return < Suspense fallback = { fallback } > { children } < /Suspense>; } }