import React , { FunctionComponent , useEffect } from "react" ; import { useInView } from "coral-framework/lib/intersection" ; import { BaseButton , Spinner } from "coral-ui/components/v2" ; interface Props { disableLoadMore ? : boolean ; onLoadMore : ( ) => void ; } const AutoLoadMoresContainer = ( { onLoadMore , disableLoadMore = false , } ) => { const { inView , intersectionRef } = useInView ( ) ; useEffect ( ( ) => { if ( ! inView || disableLoadMore ) { return ; } onLoadMore ( ) ; } , [ disableLoadMore , inView , onLoadMore ] ) ; if ( process . env . NODE_ENV === "test" ) { return ( < BaseButton onClick = { onLoadMore } disabled = { disableLoadMore } > Load More < /BaseButton>); } return ( < div ref = { intersectionRef } > < Spinner /> < /div>); } ; export default AutoLoadMoresContainer ;