title: How can I put the loading while waiting on render Reactjs
body: <p>I just made an animated "loading.." using css but i want it to only exist when it's waiting for data to load/render.. any idea how I really dont know how im so new to this?...</p>
  
  <p>this is my componentdidmount</p>
  
  <pre><code>componentDidMount() {
    $.ajax({
    url:'http://localhost:5118/api/employeedetails/getemployeedetails/',
    success:(data)=&gt;{
  
      this.setState({
        jsonReturnedValue:data
      })
    }
  })
    this.setState({isLoading: false})   
  }
  </code></pre>
  
  <p>this is my render</p>
  
  <pre><code>renderItem(d, i) {
    return &lt;tr key={i} &gt;
      &lt;td&gt; {d.Employee_ID} &lt;/td&gt;
      &lt;td&gt;{d.Employee_Name}&lt;/td&gt;
      &lt;td&gt;{d.Address }&lt;/td&gt; 
      &lt;td&gt;&lt;center&gt;&lt;button className ="btn btn-info" onClick={this.handleOnclick.bind(this,  d.Employee_ID, d.Employee_Name, d.Address , d.Department , i)}   data-toggle="modal" data-target="#UpdateEmployee"&gt;Edit&lt;/button&gt;&lt;/center&gt;&lt;/td&gt;
      &lt;td&gt;&lt;center&gt;&lt;button className ='btn btn-danger'  onClick={this.handleOnclick2.bind (this,d.Employee_ID,d.Employee_Name,i)} data-toggle="modal" data-target="#DeleteEmployee"&gt; Delete&lt;/button&gt;&lt;/center&gt;&lt;/td&gt;
      &lt;/tr&gt;
  }
  
  render() {
        if(this.state.isLoading) {
             return &lt;span className="Loader"&gt;
            &lt;div className="Loader-indicator" &gt;
              &lt;h1&gt;
                &lt;span&gt;Loading&lt;/span&gt;
                &lt;span className="Loader-ellipsis" &gt;
                  &lt;span className="Loader-ellipsisDot"&gt;.&lt;/span&gt;
                  &lt;span className="Loader-ellipsisDot"&gt;.&lt;/span&gt;
                  &lt;span className="Loader-ellipsisDot"&gt;.&lt;/span&gt;
                &lt;/span&gt;
              &lt;/h1&gt;
            &lt;/div&gt;
          &lt;/span&gt;
       }
  
      let {jsonReturnedValue} = this.state;
      const isEnabled = this.canBeSubmitted();
  
  
    return(
      &lt;div&gt;
      &lt;div&gt;
  
          &lt;div className="container"&gt;   
            &lt;h1&gt; Listof Employees &lt;/h1&gt;
              &lt;button className ='btn btn-warning right ' data-toggle="modal" data-target="#AddEmployee"&gt; Add an Employee&lt;/button&gt;
               &lt;table className= "table table-bordered" id="result"&gt; 
                  &lt;tbody&gt;
                   &lt;tr&gt;
                        &lt;th&gt;ID&lt;/th&gt;
                        &lt;th&gt;Name&lt;/th&gt;
                        &lt;th&gt;Address&lt;/th&gt;
                        &lt;th&gt;Update&lt;/th&gt;
                        &lt;th&gt;Delete&lt;/th&gt;
                   &lt;/tr&gt;
                      {jsonReturnedValue.map((d,i) =&gt; this.renderItem(d,i))}
                  &lt;/tbody&gt;
  
              &lt;/table&gt;
            &lt;/div&gt;
  </code></pre>