Cacher is the code snippet organizer for pro developers

<i className="fa fa-spinner fa-spin fa-3x" aria-hidden="true" /> // this is a spinner that will be displayed while the image is loading. 

//the sample code in use bellow

<ImageWrapper>
            <h3>You made a friend with: {this.state.friendCount}</h3>
          {this.state.dogImage ? ( // right here we are renderig an image, with the condition "?", if the image is not loaded -> : line 29 
            <>
              <img src={this.state.dogImage} alt="doggie" />
              <p>

              <button type="button" className="btn btn-primary mr-2"
              onClick={this.handleLikeDislike}
              data-action="like"
              >
                Like
              </button>
              <button type="button" className="btn btn-secondary"
              onClick={this.handleLikeDislike}
              data-action="dislike"
              >
                Dislike
              </button>
             
              </p>
            </>
          ) : (
            <i className="fa fa-spinner fa-spin fa-3x" aria-hidden="true" />
          )}
        </ImageWrapper>