javascript - How to return jsx after setTimeout - Stack Overflow

I have a loading state that I want to show only if the loading takes more than 1 second (since I don't want to keep showing the loader even if the loading time is just a few milliseconds).

This is the one that shows the loader regardless of the speed of loading:

if(loading) {
    return <div className="loader" />;
}

This is the one with setTimeout:

if(loading) {
    setTimeout(function() {
        return <div className="loader" />;
    }, 1000);
}

I understand that the return statement applies to setTimeout and not the ponent that's why it doesn't work.

Should I then create a state first (e.g. isLoadingSlow) which I will change to true after 1 second in the setTimeout callback? Then based from that state, then I would do a return statement with the loader jsx?

I have a loading state that I want to show only if the loading takes more than 1 second (since I don't want to keep showing the loader even if the loading time is just a few milliseconds).

This is the one that shows the loader regardless of the speed of loading:

if(loading) {
    return <div className="loader" />;
}

This is the one with setTimeout:

if(loading) {
    setTimeout(function() {
        return <div className="loader" />;
    }, 1000);
}

I understand that the return statement applies to setTimeout and not the ponent that's why it doesn't work.

Should I then create a state first (e.g. isLoadingSlow) which I will change to true after 1 second in the setTimeout callback? Then based from that state, then I would do a return statement with the loader jsx?

• javascript
• reactjs
• settimeout

Share Improve this question Follow asked Oct 11, 2018 at 7:00 catandmousecatandmouse 11.8k2424 gold badges9595 silver badges158158 bronze badges 1

• I don't think there is a way yet to detect how much time the ponent is taking to load. React has proposed this feature of async rendering in the future version though – Shubham Khatri Commented Oct 11, 2018 at 7:11

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

NOTE: this is an answer written based on an answer that was deleted from this post.

I think you need to have two variables, one is loader, another one is show loader. After one second, if it is still loading, we should update the stat to show the loader, otherwise it won't be shown.

state= {
   loading: true,
   showLoader: false
}

ponentDidMount() {
    setTimeout(() => {
      if(this.loading){
          this.setState({ showLoader: true })
      }
    }, 1000);
}
render() {
   if(this.state.showLoader) {
        return <div className="loader" />;
   }
}