In my helperfile.js file, I have an react bootstrap and overlay trigger as follows. The flaskResult variable is a prop that is passed in.

  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>

Notice that the Button calls an onCallEndpoint. That endpoint hits a flask API to do some computations. Some computations are very quick and the result is almost instant. Others are very slow and the result takes several seconds.

How would I show "processing" or a spinning circle while flask executes?

Here's the api call in 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);
      }
};