import { useEffect , useState } from 'react' ; import { Text , TextProps } from '@chakra-ui/react' ; type Props = { children : string ; } & TextProps ; export function EllipsisLoader ( props ) { const [ iteration , setIteration ] = useState ( 1 ) ; useEffect ( ( ) => { let timerId ; timerId = setTimeout ( ( ) => { if ( iteration === 3 ) { setIteration ( 1 ) ; } else { setIteration ( iteration + 1 ) ; } } , 200 ) ; return ( ) => clearTimeout ( timerId ) ; } , [ iteration ] ) ; return < Text { ... props } > { props . children + [ ... Array ( iteration ) ] . map ( ( ) => '.' ) . join ( '' ) } < /Text>; }