title: React: How to show loading on table every time I submit button?
body: <p>I have a react-Flask app that you add an input and it will load a table based on the input.</p>
  <p>The first search I do when the page loads it shows my loading circles perfectly fine and makes the API call and loads my data all fine.
  But when I hit the search button again to search for something different I still see the same table and it doesn't show the loading circles again.
  The API call is working fine in the back end and I at some point I get the new result back, but for a user, it will not know that the back end is running and it will look confusing, I want to make sure they know its loading.</p>
  <p>How can I make it so that it shows the loading circles every time I hit the search button?</p>
  <p>Here is my code:</p>
  <pre class="lang-js prettyprint-override"><code>class Home extends Component {
  
  // This is to make the table appear when clicking
  // Setting state false so that it doesnt appear
  constructor() {
      super(); 
      this.state = { showMessage: false }
    }
  
    _showMessage = (bool) =&gt; {
      this.setState({
        showMessage: bool
      });
    }
  
    
  
  //Input sending data and Calling API back
    state ={
    data: []
  }
  //this gets triggered on line 85
    search = e =&gt; {
      e.preventDefault();
      //Here we send the input that we add on line 90 value to Flask
      axios.post(&quot;/results&quot;,{search_question: document.getElementById(&quot;buscar&quot;).value})
      //Then we call it back
      .then((res) =&gt; {
        // console.log(res.data)
        //We create data variable with our returned data
        const data = res.data
        //Empty variable to pass all values from data
        const question = []
        // for loop that goes into data and pused everything to questions variable.
        for(var i in data)
          {question.push(data[i])}
        //console log to make sure our API returned the correct data and we saved in question
        console.log(question)
        //creating the state of paa and selecting the second index in question
        this.setState({paas:question[1]})
  
      })
       
  
      }
  
  
  }
  
  
    render() {
  
  
      //empty variable and set is a state
      const{paas = []} = this.state
  
  
      return (
    &lt;div className=&quot;demo&quot;&gt;
        
     
            &lt;div className=&quot;Search&quot;&gt; 
              &lt;form onSubmit={this.search}  method=&quot;post&quot;&gt;
                    &lt;p&gt;
                    &lt;div className=&quot;searchbar&quot;&gt;
                      &lt;div className=&quot;form__group field&quot;&gt;
                         &lt;div className=&quot;searchbox&quot;&gt;
                            &lt;input type=&quot;input&quot; class=&quot;form__field&quot; placeholder=&quot;Search&quot; id='buscar' required /&gt;
                             &lt;label for=&quot;name&quot; class=&quot;form__label&quot;&gt;E.g Food delivery&lt;/label&gt;
                      &lt;/div&gt;
                          &lt;div className=&quot;button&quot;&gt;
  
                             &lt;AwesomeButton
                             //useless button that waits 15 seconds
                                type=&quot;primary&quot;
                                size=&quot;medium&quot;
                                action={this._showMessage.bind(null, true)}&gt; Search 
                              &lt;/AwesomeButton&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                   &lt;/p&gt;
                &lt;/form&gt;
            &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
  
  {this.state.showMessage &amp;&amp;(
     &lt;Container&gt;
       &lt;Legend /&gt;
  
    
       &lt;Table&gt;
                      &lt;thead&gt;
                        &lt;tr&gt;
                          &lt;th&gt;Question&lt;/th&gt;
                          &lt;th&gt;Sentiment&lt;/th&gt;
                          &lt;th&gt;Magnitude&lt;/th&gt; 
                 
                        &lt;/tr&gt;
                      &lt;/thead&gt;
                      &lt;tbody&gt;
                  {paas.length ? paas.map(paa =&gt; (
                      &lt;tr&gt;
                        &lt;td key=&quot;Questions&quot;&gt;{paa.Questions}&lt;/td&gt; 
                        &lt;td key=&quot;Sentiment&quot; &gt;{paa.Sentiment}&lt;/td&gt;
                        &lt;td key=&quot;Magnitude&quot;&gt; {paa.Magnitude}&lt;/td&gt;
                      &lt;/tr&gt;
                     
                    ))
                  :
                  (&lt;tr&gt;&lt;td&gt;&lt;Loading /&gt; &lt;/td&gt;
                   &lt;td&gt;&lt;Loading /&gt; &lt;/td&gt;
                   &lt;td&gt;&lt;Loading /&gt; &lt;/td&gt; &lt;/tr&gt;)
                        }
                         &lt;/tbody&gt;
                   &lt;/Table&gt;
                   &lt;CSVLink data={paas}&gt;
                   &lt;AwesomeButton
                    size=&quot;large&quot;
                    type=&quot;secondary&quot;&gt;
                    Download Data
                  &lt;/AwesomeButton&gt;
                   &lt;/CSVLink&gt;
                    &lt;/Container&gt;) 
  }
  
  &lt;Content/&gt;
    
    &lt;/div&gt;
      
          
      );
    }
  }
  
  </code></pre>
  <p>I tried adding a setTimeout() on showMessage but the It will make all my table dissapear.</p>