How can I put the loading while waiting on render Reactjs

Question

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 to? I really don't know how as I'm so new to this.

This is my componentDidMount:

componentDidMount() {
  $.ajax({
  url:'http://localhost:5118/api/employeedetails/getemployeedetails/',
  success:(data)=>{
    
    this.setState({
      jsonReturnedValue:data
    })
  }
})
  this.setState({isLoading: false})   
}

This is my render:

renderItem(d, i) {
  return <tr key={i} >
    <td> {d.Employee_ID} </td>
    <td>{d.Employee_Name}</td>
    <td>{d.Address }</td> 
    <td><center><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">Edit</button></center></td>
    <td><center><button className ='btn btn-danger'  onClick={this.handleOnclick2.bind (this,d.Employee_ID,d.Employee_Name,i)} data-toggle="modal" data-target="#DeleteEmployee"> Delete</button></center></td>
    </tr>
}

render() {
      if(this.state.isLoading) {
           return <span className="Loader">
          <div className="Loader-indicator" >
            <h1>
              <span>Loading</span>
              <span className="Loader-ellipsis" >
                <span className="Loader-ellipsisDot">.</span>
                <span className="Loader-ellipsisDot">.</span>
                <span className="Loader-ellipsisDot">.</span>
              </span>
            </h1>
          </div>
        </span>
     }
    
    let {jsonReturnedValue} = this.state;
    const isEnabled = this.canBeSubmitted();
 

  return(
    <div>
    <div>

        <div className="container">   
          <h1> Listof Employees </h1>
            <button className ='btn btn-warning right ' data-toggle="modal" data-target="#AddEmployee"> Add an Employee</button>
             <table className= "table table-bordered" id="result"> 
                <tbody>
                 <tr>
                      <th>ID</th>
                      <th>Name</th>
                      <th>Address</th>
                      <th>Update</th>
                      <th>Delete</th>
                 </tr>
                    {jsonReturnedValue.map((d,i) => this.renderItem(d,i))}
                </tbody>

            </table>
          </div>

Shubham Khatri · Accepted Answer · 2017-05-29 06:28:18Z

2

Maintain a state in your react component that is set to true whenever you give a call to load the data

Eg

class App extends React.Component {
     constructor(){
         super();
         this.state = {isLoading: true}
     }


componentDidMount() {


   $.ajax({
      url:'http://localhost:5118/api/employeedetails/getemployeedetails/',
      success:(data)=>{ 
        this.setState({
           jsonReturnedValue:data, isLoading: false
        })
      }
   })

}

render() {
     if(this.state.isLoading) {
           return <span className="Loader">
          <div className="Loader-indicator" >
            <h1>
              <span>Loading</span>
              <span className="Loader-ellipsis" >
                <span className="Loader-ellipsisDot">.</span>
                <span className="Loader-ellipsisDot">.</span>
                <span className="Loader-ellipsisDot">.</span>
              </span>
            </h1>
          </div>
        </span>
     }
     return (
         <div>Hello World</div>
     )

}

See a demo snippet

class App extends React.Component {
         constructor(){
             super();
             this.state = {isLoading: true}
         }
    
    
    componentDidMount() {
  
       setTimeout(() => {this.setState({isLoading: false})}, 3000)
      
    }
    
    render() {
         if(this.state.isLoading) {
               return <span className="Loader">
              <div className="Loader-indicator" >
                <h1>
                  <span>Loading</span>
                  <span className="Loader-ellipsis" >
                    <span className="Loader-ellipsisDot">.</span>
                    <span className="Loader-ellipsisDot">.</span>
                    <span className="Loader-ellipsisDot">.</span>
                  </span>
                </h1>
              </div>
            </span>
         }
         return (
             <div>Hello World</div>
         )
     
    }
}    
    ReactDOM.render(<App/>, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

edited May 29, 2017 at 6:28

answered May 29, 2017 at 4:09

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

Sign up to request clarification or add additional context in comments.

15 Comments

Shubham Khatri Over a year ago

It will output your data when you set the loading state to false as I did in my case. Your data will do at a place where I have return ( <div>Hello World</div> )

P.Macs Over a year ago

i did the same thing you put however instead of hello world it output my table but it wasn't working it still loading..

Shubham Khatri Over a year ago

Are you doing this after your data has loaded this.setState({isLoading: false})

P.Macs Over a year ago

i put it under my ajax in componentdidmount

Shubham Khatri Over a year ago

Can you add that part in your question

|

Lojka · Accepted Answer · 2017-05-29 04:12:05Z

0

add loading state, and make it true, when data is loaded.

in render() function make add loading state code, using ? operator.

{this.state.loading ? (<YourComponent />) : (<LoadingState />)}

replace <YourComponent /> and <LoadingState /> with your component or needed jsx tags...

answered May 29, 2017 at 4:12

Lojka

1678 bronze badges

2 Comments

P.Macs Over a year ago

im confuse on your explanation

Lojka Over a year ago

nvm, Shubham Khatri write same concept

Collectives™ on Stack Overflow

How can I put the loading while waiting on render Reactjs

2 Answers 2

15 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

15 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related