Рендеринг дополнительного всплывающего диалогового окна при нажатии кнопки React

У меня проблемы с рендерингом всплывающего экрана загрузки. Итак, предположим, что у меня есть импортированный компонент с именем ( LoadingDialog ), и я хочу, чтобы он отображался, когда свойство состояния, загрузка, истинно. Когда пользователь нажимает кнопку на текущем компоненте, он запускает вызов API, который также изменяет состояние загрузки на true, тем самым отображая диалоговое окно загрузки.

Я понимаю, что могу использовать условный рендеринг для достижения этого, например:

 if (this.state.loading){
      return (
        <div>
        <LoadingDialog />
        </div>

      )
    }
    else{
      return(
      <div> OTHER UI ELEMENTS </div>
     )

но теперь у меня проблема, потому что, когда мой загрузочный диалог отображается, мой другой пользовательский интерфейс (текстовая область, фоновая карта, кнопка) исчезает, что противоположно тому, чего я пытаюсь достичь. При таком подходе я могу отображать только свои фактические элементы пользовательского интерфейса или диалоговое окно загрузки.

Я попытался разделить другие элементы пользовательского интерфейса в отдельный контейнер, но это не помогает, так как мне нужно вызывать API при нажатии кнопки, и вся проблема, с которой я столкнулся, возникает в этом дочернем контейнере.

Я также пробовал описанный выше подход с передачей родительского метода щелчка в качестве опоры и вызовом этого при нажатии кнопки, но каким-то образом закончился рекурсивным циклом родительского/дочернего компонента.

Вот мой фактический код:

 if (this.state.loading){
      return (
        <div>
        <LoadingDialog />
        </div>

      )
    }
    else{
      return (
        <div>
          <Card className = "center card">
            <div className = "row">
              <div class = "column" >
                <TextField
                  id = "outlined-name"
                  name = "searchContent"
                  onChange = {this.handleChangeEvent}
                  value = {this.state.searchContent}
                  label = "Name"
                  variant = "outlined"
                />
              </div>
              <div className = "column">
                <Button
                  variant = "outlined"
                  color = "primary"
                  onClick = {this.handleClick}
                >
                  Search
                </Button>
              </div>
            </div>
          </Card>
        </div>
      );
    }

и это моя функция щелчка ручки:

  handleClick = (event, name) => {
    this.setState({loading : true})
    fetch(uri)
      .then(res => res.json())
      .then(data => {
        console.info(data);
        this.setState({loading : false})
      });
  };

Как я уже говорил, я попытался разделить бит пользовательского интерфейса в блоке else на другой компонент, но проблема осталась. Подводя итог еще раз, Я могу отображать только свой фактический пользовательский интерфейс или всплывающее окно, но не оба в любой момент времени. Я хочу иметь возможность отображать оба одновременно, если это необходимо.

Я новичок в реагировании и держусь подальше от подобных редуксов, хуков и т. д.