import { Skeleton } from "@mui/material" ; import * as React from "react" ; import { useEffect , useState } from "react" ; export interface AsyncPreviewComponentProps { builder : Promise < React . ReactNode > ; } function AsyncPreviewComponentInternal < M extends { [ Key ] : any ; } > ( { builder } ) { const [ loading , setLoading ] = useState < boolean > ( true ) ; const [ result , setResult ] = useState < React . ReactNode > ( null ) ; useEffect ( ( ) => { let unmounted = false ; builder . then ( ( res ) => { if ( ! unmounted ) { setLoading ( false ) ; setResult ( res ) ; } } ) . catch ( error => { setLoading ( false ) ; console . error ( error ) ; } ) ; return ( ) => { unmounted = true ; } ; } , [ builder ] ) ; if ( loading ) return < Skeleton variant = "text" / > ; return < React . Fragment > { result } < /React.Fragment>; } category export const AsyncPreviewComponent = React . memo ( AsyncPreviewComponentInternal ) as React . FunctionComponent < AsyncPreviewComponentProps > ;