import * as React from 'react' ; import { Box } from '@twilio-paste/box' ; import { ValueOf } from '@twilio-paste/types' ; import { useReducedMotion } from '@twilio-paste/animation-library' ; import lottie from 'lottie-web' ; import VisibilitySensor from 'react-visibility-sensor' ; import HomeHeroIllu from '../../assets/illustrations/home_hero.svg' ; const IllustrationStates = { UNINITIALIZED : 0 , STATIC : 1 , DYNAMIC : 2 , } ; type IllustrationStatesType = ValueOf < typeof IllustrationStates > ; const IllustrationChildren = ( { state } ) => { switch ( state ) { case IllustrationStates . STATIC : return < HomeHeroIllu />; case IllustrationStates . DYNAMIC : case IllustrationStates . UNINITIALIZED : default : return null ; } } ; const HomeHeroIllustration = ( ) => { const prefersReducedMotion = useReducedMotion ( ) ; const containerRef = React . useRef ( null ) ; const [ illustrationState , setIllustrationState ] = React . useState ( IllustrationStates . UNINITIALIZED ) ; const handleVisibilityChange = ( isVisible ) : void => { if ( illustrationState === IllustrationStates . UNINITIALIZED && isVisible ) { setIllustrationState ( prefersReducedMotion ? IllustrationStates . STATIC : IllustrationStates . DYNAMIC ) ; } } ; React . useEffect ( ( ) => { if ( ! prefersReducedMotion && illustrationState === IllustrationStates . DYNAMIC ) { import ( '../../assets/animations/homepage-hero-animation.json' ) . then ( ( animationData ) => { if ( containerRef . current != null ) { const anim = lottie . loadAnimation ( { container : containerRef . current , renderer : 'svg' , loop : false , autoplay : true , animationData , } ) ; anim . setSpeed ( 2.4 ) ; return true ; } return false ; } ) . catch ( ( ) => { setIllustrationState ( IllustrationStates . STATIC ) ; } ) ; } } , [ illustrationState , prefersReducedMotion ] ) ; return ( < VisibilitySensor onChange = { handleVisibilityChange } partialVisibility minTopValue = { 15 } > < Box aria - hidden = "true" maxWidth = "size70" height = { [ '400px' , '400px' , '500px' ] } marginLeft = "auto" ref = { containerRef } > < IllustrationChildren state = { illustrationState } /> < /Box> < /VisibilitySensor>); } ; export { HomeHeroIllustration } ;