React-bootstrap styling showing up before finished api call

I am making a small application in React that fetches a random image using Axios. I am using React-bootstrap to style the image, however a small white box is displayed for half of a second before the image is done loading. How can I resolve this?

This is my code:

import React, { Component } from 'react';
import axios from 'axios';
import { Link } from 'react-router-dom';
import { Image, Button } from 'react-bootstrap';


const ROOT_URL = 'myurl'

export default class WhatDog extends Component {

  constructor(props){
    super(props);

    this.state = { randomImg: '' };
  }

  componentDidMount(){
    axios.get(ROOT_URL)
    .then(res => {
      const data = res.data.message
      this.setState({ randomImg: data })
    })
  }

  renderImage(){
    return(
      <div>
        <Image src={this.state.randomImg} className="img" thumbnail/>
        <Link to="/">
          <Button bsStyle="danger" bsSize="large">Go back</Button>
        </Link>
      </div>
    )
  }



  render() {

    return (
      <div className="App">
          {
            (this.state.randomImg === '')
            ? <div>
                <h1>Loading...</h1>
              </div>

            : <div>
                {this.renderImage()}
              </div>
          }
      </div>
    );
  }
}

The browser will fire the onLoad event, after the image has been, you name it.. loaded so before that, set the visibility to hidden.. NOT display: none ! Because display: none will also prevent the loading.

The solution might look something like this

<Image
  src={this.state.randomImg}
  style={!this.state.imgVisible ? {visibility: 'hidden'} : {}}
  onLoad={() => this.setState({ imgVisible: true })}
/>

Note: This is using inline styles and arrow functions, which is not best, but for simplicity of the demo its enough, you could also you a className instead, its up to you 😉

You got the idea…