title: React Table isLoading property
body: <p>I found this tutorial article about creating MERN project <a href="https://medium.com/swlh/how-to-create-your-first-mern-mongodb-express-js-react-js-and-node-js-stack-7e8b20463e66" rel="nofollow noreferrer">https://medium.com/swlh/how-to-create-your-first-mern-mongodb-express-js-react-js-and-node-js-stack-7e8b20463e66</a>. All is working fine, but what I'm confused with this code inside <code>componentDidMount()</code> function in MoviesList.jsx file:</p>
  <pre><code>import React, { Component } from 'react'
  import ReactTable from 'react-table'
  import api from '../api'
  
  import styled from 'styled-components'
  
  import 'react-table/react-table.css'
  
  const Wrapper = styled.div`
      padding: 0 40px 40px 40px;
  `
  
  class MoviesList extends Component {
      constructor(props) {
          super(props)
          this.state = {
              movies: [],
              columns: [],
              isLoading: false,
          }
      }
  
      componentDidMount = async () =&gt; {
          this.setState({ isLoading: true })
  
          await api.getAllMovies().then(movies =&gt; {
              this.setState({
                  movies: movies.data.data,
                  isLoading: false,
              })
          })
      }
  
      render() {
          const { movies, isLoading } = this.state
          console.log('TCL: MoviesList -&gt; render -&gt; movies', movies)
  
          const columns = [
              {
                  Header: 'ID',
                  accessor: '_id',
                  filterable: true,
              },
              {
                  Header: 'Name',
                  accessor: 'name',
                  filterable: true,
              },
              {
                  Header: 'Rating',
                  accessor: 'rating',
                  filterable: true,
              },
              {
                  Header: 'Time',
                  accessor: 'time',
                  Cell: props =&gt; &lt;span&gt;{props.value.join(' / ')}&lt;/span&gt;,
              },
          ]
  
          let showTable = true
          if (!movies.length) {
              showTable = false
          }
  
          return (
              &lt;Wrapper&gt;
                  {showTable &amp;&amp; (
                      &lt;ReactTable
                          data={movies}
                          columns={columns}
                          loading={isLoading}
                          defaultPageSize={10}
                          showPageSizeOptions={true}
                          minRows={0}
                      /&gt;
                  )}
              &lt;/Wrapper&gt;
          )
      }
  }
  
  export default MoviesList
  </code></pre>
  <p>Why we have to set the isLoading: true in this code <code>this.setState({ isLoading: true })</code>, then set it back to false with this code :</p>
  <pre><code>await api.getAllMovies().then(movies =&gt; {
              this.setState({
                  movies: movies.data.data,
                  isLoading: false,
              })
          })
  </code></pre>
  <p>I've been struggling with this question for almost a week. I really need help in understanding this code. Thank you in advance.</p>