Saat proses menampilkan data , loading diperlukan untuk efek menunggu data ditampilkan. Agar terlihat bahwa data sedang dalam proses akan ditampilkan. Ada berbagai macam efek loading, misalnya loading pada button atau loading pada tabelnya.

Contoh Membuat Loading Button menggunakan jquery:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Example of Bootstrap 3 Button Methods</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<style type="text/css">
	.bs-example{
    	margin: 20px;
    }
</style>
</head>
<body>
<div id="myButtons" class="bs-example">
    <button type="button" class="btn btn-primary btn-lg" data-loading-text="<i class='fa fa-spinner fa-spin '></i> Processing Order">Search</button>
</div>
</body>
</html> 
<script type="text/javascript">  

$('.btn').on('click', function() {
    var $this = $(this);
  $this.button('loading');
    setTimeout(function() {
       $this.button('reset');
   }, 3000);
});
 
</script>

Membuat Loading Button menggunakan jquery cukup sederhana, script diatas maksudnya jika class .btn diklik maka memanggil isi didalam atribut “data-loading-text” dengan setTimeout menampilkannya selama 3 detik.

Contoh Membuat Loading Button menggunakan javascript:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Example of Bootstrap 3 Button Methods</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>

<button type="button" class="btn btn-primary btn-lg" id="load" data-loading="<i class='fa fa-spinner fa-spin '></i> Processing Order">Search</button>

<script>
document.addEventListener('click', function(event) {
	let element = event.target;
    element.innerHTML = element.dataset.loading;
    element.setAttribute("disabled","disabled");
    
    setTimeout(function(){
    	element.innerHTML = `Search`;
    	element.removeAttribute("disabled","disabled");
    } , 3000);
});
</script>

</body>
</html>

Berbeda dengan menggunakan jquery, jika menggunakan pure javascript setTimeout berfungsi untuk mengeksekusi element setelah waktu tertentu, contoh diatas mengeksekusi element setelah 3 detik. Artinya jika membuat loading button menggunakan javascript , alurnya saat di klik menampilkan element loading, lalu proses setTimeout setelah 3 detik mengembalikan button ke posisi semula, script diatas mengembalikan tulisan Search dan menghapus atribute disabled.

Pada praktek nyata, jarang menggunakan setTimeout. Biasanya digunakan pada ajax sebelum menampilkan data misal, seperti berikut:

let form = document.querySelector('#formdata');
form.addEventListener('submit', e => {
  let element = event.target;
  document.getElementById("btn").innerHTML = document.getElementById("btn").dataset.loading;
  document.getElementById("btn").setAttribute("disabled","disabled"); 
  e.preventDefault();
  const url = `{{ route('public.laporan') }}`;
  const formdata = new FormData(form)
  fetch(`${url}`, {
  }).then(function(response){
      return response.json();
    }).then(function (data) {
      // script jika ada yg ingin ditampilkan
      // kembalikan button ke semula
      document.getElementById("btn").innerHTML = `Cari`;
      document.getElementById("btn").removeAttribute("disabled","disabled");

    }).catch((err)=>console.log(err))
  });