En mi archivo helperfile.js , tengo un disparador de arranque y superposición de reacción de la siguiente manera. La variable flaskResult es una propiedad que se pasa.

 const popover = ( <Popover id="popover-basic"> <Popover.Header as="h3">Num Nodes</Popover.Header> <Popover.Body> The number of nodes is: {flaskResult} </Popover.Body> </Popover> ); ... <OverlayTrigger rootClose trigger="click" placement="left" overlay={popover}> <Button variant="outline-primary" onClick = { (e) => {onCallEndpoint({endpoint:"get_num_nodes"})}} >Count Num Nodes</Button> </OverlayTrigger>

Observe que el Botón llama a un onCallEndpoint . Ese punto final llega a una API de matraz para hacer algunos cálculos. Algunos cálculos son muy rápidos y el resultado es casi instantáneo. Otros son muy lentos y el resultado tarda varios segundos.

¿Cómo mostraría el "procesamiento" o un círculo giratorio mientras se ejecuta el matraz?

Aquí está la llamada a la API en app.js

 const onCallEndpoint = async (props) => { const {endpoint} = props; try { const flow = reactFlowInstance.toObject(); const token = await getAccessTokenSilently(); const response = await fetch( `${serverUrl}/${props.endpoint}`, { headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}`, }, method: 'POST', body:JSON.stringify(flow), } ); const responseData = await response.json(); setFlaskResult(responseData.message); } catch (error) { setFlaskResult(error.message); } };