React Relay + bootstrap - during useLazyLoadQuery the component should fade away

Question

I have a react (nextjs) component, which uses react-relay useLazyLoadQuery(...) to load list of items. This query data is a list of items, first 10 items at the first time. When user goes to the next page the same pagingInfo is updated, therefore the component loads the next 10 items. It is required that during the graphql load the item list should be faded out, then refresh the list, then fade in again.

I am not new at react, but in this case I have no idea how to solve this requirement. How I know when the graphql load starts, and ends. I am using reac-bootstrap, and for me Fade component looks useful, but still does not know how to put all them together.

/*
 data loaded from graphQL looks somehow as the following:
 { "data": {
     "myItems": {
       "node": [ ... item list ],
       "pageInfo": { "hasNextPage": true, "endCursor": "MA==" }
      }
    }
 }
*/

export default function ShowItemList({data, setPageInfo, onNextPageClick}) {
   const current = data.myItems.pageInfo;
   setPageInfo( current.hasNextPage, current.endCursor); 
   return (
       <ListItems data={data.myItems.nodes} />
       <NextButton disabled={!pageInfo.hasNextPage} onClick={onNextPageClick} />
   )
}


export default function ItemList() {
   const [pageInfo, setPageInfo] = useState({ first: 10, after: null, hasNextPage: false });
   const variables = pageInfo;
   const data = useLazyLoadQuery(itemsSearchQuery, variables );
   const [isBusy, setBusy] = useState(true);
   
   function setPagination(hasNextPage: boolean, endCursor: string|null|undefined) {
       pageInfo.hasNextPage = hasNextPage;
       pageInfo.after = startCursor;
    }
    
    function goToNextPage(pageInfo: IPagingInfo)
    {
        setPageInfo( {...pageInfo} );
    }
    
    return (
       {/* this "ShowItemList" should be faded away when the first load happens, or when loading the "next" page data */}
       {/* <Fade in={!isBusy} timeout={3} >  */}
          <ShowItemList items={data} setPagingInfo={setPagination} onNextPageClick {goToNextPage} />
       {/* </Fade>  */}
    )
}

Tried to simplify the code on-the-fly, I hope didn't make any error. I hope the idea is clear. In real case the ShowItemList uses a component-specific fragment, therefore the myItems entry point is known by him only, and not by the top-level component ItemList. Therefore it populates the setPagination(...) to let the sub-component set the pagination info. In real world the ItemList has several inner components between the Fade, each has its own fragment data to show. All of them are loaded by the useLazyLoadQuery therefore they must be faded out and in together.

How to detect when the load starts and ends, therefore starts and ends the fade animation? Please help! I could use some advices I think... thanks in advance!