React - show loading message before fetched data is rendered - reactjs

Question

I'm trying to build a react app that communicating with the server to query data from database. I want to display a loading message when the app is fetching data. Here's the code snippet:
class App extends React.Component {
constructor(props) {
super(props)
this.clickHandler = this.clickHandler.bind(this);
this.state = {
isLoading: false,
data: [],
content: ''
}
}
clickHandler() {
this.setState({ isLoading: true });
fetch('url_1')
.then(res => res.json())
.then(data => this.setState({ data: data }, () => {
this.getContentByData() // loading message vanished before content is displayed
}))
.then(() => this.setState({ isLoading: false }));
}
getContentByData() {
fetch(`url_2?data=${this.state.data}`)
.then(res => res.json())
.then(content => this.setState({ content: content }))
}
render() {
return (
<div>
{this.state.isLoading ? <h1>loading</h1>: null}
<h6>{this.state.content}</h6>
<button type="button" onClick={this.clickHandler}>Click Me!</button>
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'))
The loading message disappeared before content is displayed. How can I fix this?

Answer 1

You could change your render method to be something like this:
render() {
let content = <Loader />;
if (!this.state.isLoading && this.state.content) {
content = (
<h6>{this.state.content}</h6>
<button type="button" onClick={this.clickHandler}>Click Me!</button>
)
}
return (
<div>
{content}
</div>
)
}
Where Loader is your loader component. Of course it can also be the h1 title or whatever you want.

Answer 2

you need to off your loading at getContentByData() like below.
getContentByData() {
fetch(`url_2?data=${this.state.data}`)
.then(res => res.json())
.then(content => this.setState({ content: content, isLoading : false }))
}
do not forget to remove isLoading=false in clickHandler() method.

Answer 3

isLoading will be set to false before the fetch inside getContentByData is complete, since it's not part of the promise chain in clickHandler.
You could instead set isLoading to false when the fetch in getContentByData is complete.
class App extends React.Component {
state = {
isLoading: false,
data: [],
content: ""
};
clickHandler = () => {
this.setState({ isLoading: true });
fetch("url_1")
.then(res => res.json())
.then(data => this.setState({ data }, this.getContentByData));
};
getContentByData = () => {
fetch(`url_2?data=${this.state.data}`)
.then(res => res.json())
.then(content => this.setState({ isLoading: false, content }));
}
// ...
}

Answer 4

Or even better you can render something like this:
render() {
return (
<div>
{this.state.isLoading && !this.state.content && <Loader />}
{!this.state.isLoading && this.state.content && (
<Fragment>
<h6>{this.state.content}</h6>
<button type="button" onClick={this.clickHandler}>Click Me!</button>}
</Fragment>)
</div>
)
}