title: loading spinner doesn't show up after clicking button with tailwind css and reactjs
body: <p>I have a button to calculate statistics, what I want is that button change after clicking on it to calculating with animated load spinner, this is what I tried</p>
  <pre class="lang-js prettyprint-override"><code>&lt;button className=&quot;bg-green-A200 rounded text-black mt-20 py-2 px-8  h-28&quot; onClick={consulterStat} disabled={loading}&gt;
      {loading &amp;&amp; (
          &lt;i
              className=&quot;fa fa-refresh fa-spin animate-spin &quot;
              style={{ marginRight: &quot;20px&quot; }}
          /&gt;
      )}
      {loading &amp;&amp; &lt;span&gt;calculate&lt;/span&gt;}
      {!loading &amp;&amp; &lt;span&gt;calculating&lt;/span&gt;}
  &lt;/button&gt;
  </code></pre>
  <p>When I click on button this what i do</p>
  <pre class="lang-js prettyprint-override"><code>setLoading(true)
  setTimeout(() =&gt; {
      setLoading(false)
  }, 2000);
  </code></pre>
  <p>And this part works because every time I click the text change from calculate to calculating for 2 seconds, but what I want is to get the same button with the same style and everything just with different text and an animated circle spinner showing inside the button beside the text calculating.</p>