import type { FC , PropsWithChildren , PropsWithRef , ReactElement } from 'react' ; import React , { lazy , useMemo } from 'react' ; import useAsync from 'react-use/lib/useAsync' ; import type { StartServicesAccessor } from 'src/core/public' ; import type { PluginsStart } from '../plugin' ; import { SuspenseErrorBoundary } from '../suspense_error_boundary' ; interface InternalProps < T > { fn : ( ) => Promise < FC < T > > ; getStartServices : StartServicesAccessor < PluginsStart > ; showLoadingSpinner ? : boolean ; props : JSX . IntrinsicAttributes & PropsWithRef < PropsWithChildren < T > > ; } export const LazyWrapper = ( { fn , getStartServices , showLoadingSpinner , props , } ) => { const { value : startServices = [ { notifications : undefined } ] } = useAsync ( getStartServices ) ; const [ { notifications } ] = startServices ; const LazyComponent = useMemo ( ( ) => lazy ( ( ) => fn ( ) . then ( ( x ) => ( { default : x } ) ) ) , [ fn ] ) ; if ( ! notifications ) { return null ; } return ( < SuspenseErrorBoundary notifications = { notifications } showLoadingSpinner = { showLoadingSpinner } > < LazyComponent { ... props } / > < /SuspenseErrorBoundary>); } ;