I have a lightbox gallery coming through dependency `react-lightbox-component`. 
Everything is working fine but before the gallery pop up on the screen I would like to show a preloader icon coming from the font-awesome:

```
<i className="fa fa-spinner"></i>

```

The font-awesome is already installed in my application and working fine. How do I imnplement the preloader with the lightbox gallery?

**React-lightbox-Component documentation:**

<https://www.npmjs.com/package/react-lightbox-component>

**My component:**

```
import React, { Component } from 'react'
import Lightbox from 'react-lightbox-component';

class PortfolioPage extends Component {
  constructor(props) {
    super(props);
    this.state = {     
      resultPhotos: []
    }
  }

  componentDidMount() {
    this.setState({  
      resultPhotos: this.props.data.photos
    })
  }

  render() {
    const { resultPhotos } = this.state;   
    const renderImages = resultPhotos && resultPhotos.map((photo, index) => {
      return (
        {
          src: `../images/${photo}`,
          key: index
        }
      )
    })

    return (
      <div>
        <Lightbox images={renderImages} />
      </div>
    )
  }
}

export default PortfolioPage

```