JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<button type="button" id="search" class="btn btn-primary" style="width:100px; height:30px;">SEARCH</button>

JavaScript

$("#search").click(function() {
  $(this).prop("disabled", true)
    .text("Loading...")
    .css("color", "red")
    .delay(1, "p")
    .queue("p", function(next) {
      next()
    })
    .dequeue("p")
    .promise("p")
    .then(function() {
      var elem = this;
      return $.Deferred(function(d) {
        var i = 0,
          max = 50000;
        for (; i < max; i++) {
          console.log("hi");
        }
        if (i === max) {
          d.resolveWith(elem, [i])
        }
      }).promise()
    }).then(function(data) {
      console.log(this, data);
      $(this).prop("disabled", false)
      .css("color", "blue")
      .text("Finished...");
    })
});