Bootstrap карусель невидима во время загрузки изображений

Question

У меня есть проект, в котором я использую Bootstrap карусель, которую я использую внутри модала. Проблема в том, что для инициализации карусели требуется время, а затем некоторое время для загрузки изображения. В результате при открытии модальной модели карусель сначала вообще не видна, а затем через 1 секунду она становится видимой и в нее загружается изображение. Есть ли способ сделать карусель видимой (с пустым содержимым) во время загрузки изображений?

Мой основной JSX содержит модал, содержащий карусель:

<Modal show={this.state.modal} 
        modalClosed={() => this.setState({modal: false})}>

        {this.state.modal && <Carousel name={this.state.projectSelectedName}/>}

        <div className="carousel-content">
            <h3 className="page-title-fast" style={{marginBottom: '1rem', color: '#414040'}}>{this.state.projectSelectedName}</h3>
            <p className="carousel-p" style={{textAlign: 'left', fontSize: this.checkApp()}}>
                <div dangerouslySetInnerHTML={{__html: this.state.projectSelectedDescription}}/>
            </p>
            <div>
                <a target="_blank" rel="noopener noreferrer" href={this.state.projectSelectedUrl} className="btn btn--blue btn--animation mr-4 mb-2"><FontAwesomeIcon icon="plane-departure" />&nbsp;&nbsp;{this.getButtonText()}</a>
                <a target="_blank" style={{display: this.state.projectSelectedName === 'Bro2Bro' ? 'inline-block' : 'none', backgroundColor:'rgb(62, 62, 39)'}} rel="noopener noreferrer" href="https://github.com/omerfaran/Bro2Bro" className="btn btn--blue btn--animation mb-2"><i className="fab fa-github"></i>&nbsp;&nbsp;VIEW ON GITHUB</a>
            </div>

        </div>
</Modal>

Карусель открывается изображения динамически:

import React from 'react';

let carousel

  carousel = (props) => (
        <div id="slider2" className="carousel slide mb-3" style={{borderBottom: '1px solid #ccc'}} data-ride="carousel">
        <div className="carousel-inner">
          <div className="carousel-item active">
            <img className="d-block img-fludid" src={require("../../../../assets/" + props.name.toLowerCase() + '/screen1.jpg')} alt="First Slide"/>
          </div>
          <div className="carousel-item">
            <img className="d-block img-fluid" src={require("../../../../assets/" + props.name.toLowerCase() + '/screen2.jpg')} alt="Second Slide"/>
          </div>
          <div className="carousel-item">
            <img className="d-block img-fluid" src={require("../../../../assets/" + props.name.toLowerCase() + '/screen3.jpg')} alt="Third Slide"/>
          </div>
          <div className="carousel-item">
            <img className="d-block img-fluid" src={require("../../../../assets/" + props.name.toLowerCase() + '/screen4.jpg')} alt="Third Slide"/>
          </div>
        </div>

        <a href="#slider2" className="carousel-control-prev" data-slide="prev">
          <span className="carousel-control-prev-icon"></span>
        </a>

        <a href="#slider2" className="carousel-control-next" data-slide="next">
          <span className="carousel-control-next-icon"></span>
        </a>
      </div>
      )



export default carousel;

Пользователь может открыть модал, нажав на разные кнопки, а затем модал откроет и загрузит разные изображения:

showCardModal = (project) => {
    this.setState({
        modal: true,
        projectSelectedName: project.name,
        projectSelectedDescription: project.description,
        projectSelectedUrl: project.url,
    })
}

Все, что мне нужно, это способ для карусель для определения ширины и высоты перед загрузкой изображений. Возможно ли это с bootstrap?