Loading throbber demo in React using react-loader

App.js

import React, { Component } from 'react';
import Loader from 'react-loader';

class App extends Component {
  constructor(props){
    super(props);
    this.state = {ready: false};
    this.refreshPrice = this.refreshPrice.bind(this);
  }

  componentWillMount() {
    fetch('https://api.coinmarketcap.com/v1/ticker/bitcoin/')
    .then(res => res.json())
    .then(response => this.setState({data: response, ready: true}))
    .catch(err => {
      alert('An error ocurred');
      console.log(err);
    });
  }

  refreshPrice(e) {
    e.preventDefault();
    this.setState({ready: false}, () => {
      fetch('https://api.coinmarketcap.com/v1/ticker/bitcoin/')
      .then(res => res.json())
      .then(response => this.setState({data: response, ready: true}))
      .catch(err => {
        alert('An error ocurred');
        console.log(err);
      });
    });
  }

  render() {
    if(this.state.ready) {
      var change_color = this.state.data[0].percent_change_24h > 0 ? 'green' : 'red';
      return(
        <div>
          <h1>{this.state.data[0].name} ({this.state.data[0].symbol})</h1>
          <h2>Price: {this.state.data[0].price_usd}$</h2>
          <div style={{display: 'inline'}}>
            <h2 style={{display: 'inline-block'}}>Change 24h: </h2>
            <h2 style={{color: change_color, display: 'inline-block'}}> {this.state.data[0].percent_change_24h}%</h2>
          </div>
          <br/>
          <button onClick={this.refreshPrice}>Refresh price</button>
        </div>
      );
    }
    else{
      return(
        <Loader/>
      );
    }
  }
}

export default App;