ajax load btn

www/index.html

       <form class="form-inline my-2 my-lg-0">
         <input class="form-control mr-sm-2" type="search" placeholder="Quick Search" aria-label="Search" />
       </form>
+      <div>
+        <button type="button" class="autodoc_ajax_off btn btn-secondary">
+          <i class="fas fa-times"></i>
+        </button>
+        <button type="button" class="autodoc_ajax_on d-none btn btn-primary">
+          <i class="fas fa-times"></i>
+        </button>
+      </div>
     </div>
   </nav>
 

www/js/autodoc.js

   run: {
     "upload_handler": 0,
     "upload_status": 0
-  }
+  },
+  busy: 0
 };
 
 var temp = {
 
 $(document).ready(function () {
 
+  // loader icon thread
+  loader_icon_update();
+
   // load the current page based on anchor
   change_page();
 
     var docid  = $('#autodoc_tab_document').data('docid');
     var pageid = $('.autodoc_document_image').data('pageid');
 
+    conf.busy++;
     $.ajax({
       type: "PATCH",
       url: conf.openapi + "/documents/" + docid + "?primarypage=" + pageid,
       success: function () {
+        conf.busy--;
         $('.autodoc_document_btn_primary').removeClass('disabled');
       }
     });
       url += tagId;
     }
 
+    conf.busy++;
     $.ajax({
       type: method,
       url: url + '?' + urlparam,
       success: function () {
+        conf.busy--;
         location.reload();
       }
     });
     var tagId = $('.autodoc_tag_id').val();
 
     if (tagId != "") {
+      conf.busy++;
       $.ajax({
         type: "DELETE",
         url: conf.openapi + "/tags/" + tagId,
-        success: function () { location.reload(); }
+        success: function () {
+          conf.busy--;
+          location.reload();
+        }
       });
     }
     else {
 
   $('.autodoc_document_image').attr('src','');
 
+  conf.busy++;
   $.getJSON(
     conf.openapi + "/documents/" + docid,
     function (doc) {
+      conf.busy--;
       $('span.autodoc_document_name').html(doc.name);
       $('input.autodoc_document_name').val(doc.name);
       
 
 function page_load_tags() {
   // update tag list
+  conf.busy++;
   $.getJSON(conf.openapi + "/tags", function (tags) {
+    conf.busy--;
     $.each(tags, function (n, tag) {
       $('.autodoc_tag_list').append(
         '<option data="' + tag.color + '" value="' + tag.id + '">' +
     .find(".autodoc_template_home_row")
     .clone();
 
+  conf.busy++;
   $.getJSON(
     conf.openapi +
     "/documents?pageSize=" +
     null,
     function (data, textStatus, jqXHR) {
       // last document was loaded, stop scrolling
+      conf.busy--;
       if (data.length < conf.home.width) {
         conf.home.end = 1;
       }
   console.log("upload_handler");
   if (temp.documentid == null) {
     console.log("creating documentId");
+    conf.busy++;
     $.post(conf.openapi + "/documents", {}, function (data) {
+      conf.busy--;
       temp.documentid = data.id;
     });
     stop = 0;
   else if (e.type == 'load') {
 
     temp.upload[e.data]['progress'] = 50;
-    console.log(e.target.result);
-    console.log("upload_id", e.data);
+
+    conf.busy++;
     $.ajax({
       type: 'POST',
       url: conf.openapi + "/documents/" + temp.documentid + "/data",
         return xhr;
       },
       success: function (data, status, xhr) {
-        console.log("upload_success_this", this);
+        conf.busy--;
         temp.upload[this.id].progress = 100;
 
       }
 }
 
 function home_modal_open(docid) {
+  conf.busy++;
   $.getJSON(conf.openapi + "/documents/" + docid, function (data) {
+    conf.busy--;
     $('#autodoc_home_modal').data('document', data);
     $('#autodoc_home_modal').data('documentid', docid);
 
 }
 
 function document_update_name(docid, name) {
+  conf.busy++;
   $.ajax({
     type: "PATCH",
     url: conf.openapi + "/documents/" + docid + "?name=" + encodeURIComponent(name),
     success: function (data) {
+      conf.busy--;
       $('span.autodoc_home_modal_name').removeClass('d-none');
       $('input.autodoc_home_modal_name').addClass('d-none');
       home_modal_open(docid);
     }
   });
+}
+
+function loader_icon_update() {
+  if ( conf.busy > 0 ) {
+    $('.autodoc_ajax_on').removeClass('d-none');
+    $('.autodoc_ajax_off').addClass('d-none');
+  }
+  else {
+    $('.autodoc_ajax_of').removeClass('d-none');
+    $('.autodoc_ajax_on').addClass('d-none');
+  }
+  setTimeout(loader_icon_update, 100);
 }