Show spinner when data is loading on react

Question

i'm having some trouble showing the spinner "" when i'm getting some data. I have a state.isLoading but i can't seem to set that to true before the getdata.getPossible() function starts. Heres what i have:

class GetData extends Component {
  constructor() {
    super();
    this.state = {
      lastdraw: {},
      alldraws: [],
      bets: [],
      isLoading: false,
      showBets: false 
    };
  }

  componentDidMount() {
    getdata.getLastResult().then((result) => {
      this.setState({lastdraw: result.data.drawns[0]})
    })
  }

  getMore() {
    this.setState({isLoading: !this.state.isLoading})
    this.setState({bets: getdata.getPossible(5), showBets: !this.state.showBets})
  }

  render() {
    return (
      <div>
        <h1>{this.props.title}</h1>
        <h3>{moment(this.state.lastdraw.date).format('LL')}</h3>
        <div><span>{this.state.lastdraw.numbers}</span> + <span>{this.state.lastdraw.stars}</span></div>
        <Btn onClick={this.getMore.bind(this)}>Generate</Btn>
        {this.state.showBets ? this.state.bets.map((bet, i) => {return (<PossibleKey key={this.state.bets[i].key} bets={bet}/>)}) : null}
        <Loader show={this.state.isLoading}/>
      </div>
    );
  }
}

And the Loader component is like this:

function Loader(props) {
    return props.show ? (
        <div className='overlay'>
          <div className='leftEye'></div>
          <div className='rightEye'></div>
          <div className='mouth'></div>
          <p>The Universe is aligning. Please wait...</p>
        </div>
    ) : null
}

What i want to achieve is a way for the loader component to be used elsewhere just by setting the isLoading state true or false. The getMore() function only triggers the Loader state after it executes getPossible(n).

I think it may be something to do with the Loader receiving props only after state is set (or maybe not!!). How can i trigger the Loader on/off ?!

Arshabh Agarwal · Accepted Answer · 2017-03-08 15:06:10Z

3

If you want to do something after state has updated - you can pass a callback to state method like this

getMore() {
  this.setState({isLoading: !this.state.isLoading}, () => {
    this.setState({bets: getdata.getPossible(5), showBets: !this.state.showBets})      
  })
}

This should set the state isLoading before getPossible is called

answered Mar 8, 2017 at 15:06

Arshabh Agarwal

5562 silver badges15 bronze badges

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

2 Comments

talvasconcelos Over a year ago

I took your suggestion and made this and a click handler:

handleClick() {     this.setState((prevState, props) => ({       isloading: true     }))     getdata.getPossible(5).then(result => {       this.setState((prevState, props) => ({         bets: result       }))     })     .then((done) => {       this.setState((prevState, props) => ({         isloading: false       }))     })    }

. It works, it's not the most elegant code ever, with the promises. Else i would have to lift the loading state to the parent component, or even further and pass down as props.

talvasconcelos Over a year ago

You can see the all code at: github.com/talvasconcelos/millions

NealVDV · Accepted Answer · 2017-03-08 15:06:24Z

2

Sometimes the issue is sequencing the setState. Try this:

 getMore() {
    this.setState({isLoading: !this.state.isLoading}, () => {
      this.setState({bets: getdata.getPossible(5), showBets: !this.state.showBets})
    })
  }

answered Mar 8, 2017 at 15:06

NealVDV

2,5804 gold badges31 silver badges53 bronze badges

3 Comments

Arshabh Agarwal Over a year ago

Lol! We answered the same damn thing

talvasconcelos Over a year ago

I'd allready tried that with no luck!! :( Once again it runs the getPossible first and then triggers the Loader.

NealVDV Over a year ago

@ArshabhAgarwal haah :D

Vitalii Andrusishyn · Accepted Answer · 2017-03-08 20:14:18Z

1

Is this your target?

  getMore() {
    if (!this.state.isLoading) {
      this.setState({isLoading: !this.state.isLoading, bets: getdata.getPossible(5), showBets: !this.state.showBets})
    }
  }

answered Mar 8, 2017 at 20:14

Vitalii Andrusishyn

4,2121 gold badge28 silver badges34 bronze badges

2 Comments

talvasconcelos Over a year ago

Yes. Want i'm trying to do is set the loading state to true, then run the getdata.getPossible

Vitalii Andrusishyn Over a year ago

In my version of code you check next status of isLoading, and then run getPossible and during set isLoading. And in this way not so important the ordering setting the state, i think. After the and working setState methis all data will be right(if you not use the isLoading inside getPossible, in this way could run getPossible(isLoading) - where isLoading = !this.state.isLoading and set it before the run setState) :)

Collectives™ on Stack Overflow

Show spinner when data is loading on react

3 Answers 3

2 Comments

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related