Cara Membuat Indikator Loading (Loading Indicators) Pada Aplikasi Vue.js

Cara Membuat Indikator Loading (Loading Indicators) Pada Aplikasi Vue.js - Indikator loading dapat meningkatkan UX (User Experience) pada sebuah aplikasi web atau mobile. Indikator loading memberitahukan user bahwa sebuah action atau proses sedang berjalan dan hasilnya bisa diketahui setelah itu.

Pada aplikasi web, ada 2 hal penting yang membutuhkan indikator loading (loader), yaitu:

• Network request seperti navigasi ke halaman lain atau AJAX request.
• Ketika proses yang memerlukan waktu lama sedang berjalan.

Tutorial ini akan menjelaskan cara membuat Indikator Loading (Loading Indicators) pada aplikasi Vue.js

Tipe-tipe indikator loading

Tipe indikator loading yang kalian gunakan pada website kalian bisa berefek negatif atau positif kepada user. Ada dua jenis indikator yang bisa kalian gunakan pada website.

Yang pertama adalah counter(penghitung). counter bisa berupa progress bar atau penghitung dari 0 sampai 100. Tipe indikator loading inilah yang paling efektif yang bisa memberikan user estimasi kapan proses yang sedang di jalakan akan selesai.

Yang kedua adalah loop(pengulangan). Tipe ini berupa animasi melingkar yang berulang. Contoh umumnya yang bisa kalian lihat pada website adalah spinner.

Indikator loading tipe counter adalah pilihan terbaik untuk proses yang berjalan lama, sedangkan indikator loading tipe loop sangat cocok untuk proses yang berjalan sebentar.

Jika kamu menggunakan indikator loading tipe loop untuk proses yang berjalan lama, ini bisa membuat user kesal dan membuat user berfikir bahwa website eror, proses yang berjalan gagal dan pemikiran-pemikiran negatif lainnya. Akhirnya user meninggalkan website tersebut (tentunya kalian tidak mau itu terjadi ya kan). Jadi untuk proses yang berjalan lama atau memakan waktu, hindari menggunakan indikator loading tipe loop.

Nah itu dia sekilas tentang indikator loading pada website, selanjutnya yo kita mulai saja tutorialnya, cuss...

Mulai

Pertama mari kita buat projek baru. Disini saya menggunakan Vue CLI untuk membuat aplikasi. Jika kalian belum tau tentang Vue CLI kalian bisa lihat disini .

vue create indikator

Selanjutnya kalian bisa memilih fitur apa saja yang mau di pasang pada aplikasi, untuk tutorial ini saya pilih Router dan Vuex. Kemudian enter dan tunggu sampai proses instalasi selesai.

Pada tutorial ini indikator loading yang saya gunakan adalah nprogress. Kalian bisa menggunakan indikator loading favorit kalian.

nprogress adalah sebuah progress bar yang berada di bagian paling atas aplikasi.

Supaya lebih cepat saya tidak akan menginstall nprogress menggunakan npm atau yarn. Langsung saja kita gunakan CDN.

Pada projek aplikasi yang telah di buat, buka file public/index.html dan tambahkan baris berikut sebelum tag </head>.

<link href="https://unpkg.com/nprogress@0.2.0/nprogress.css" rel="stylesheet" />
<script src="https://unpkg.com/nprogress@0.2.0/nprogress.js"></script>

Menggunakan nprogress

Nprogress memiliki beberapa function, tapi untuk tutorial ini saya akan menggunakan function start() dan function done(). Function ini berfungsi untuk memulai dan menghentikan progress bar.

Menggunakan Router

Ketika kalian menggunakan router untuk menampilkan progress bar, proses yang kita inginkan adalah ketika user membuka halaman baru, indikator loading muncul di atas halaman menampilkan kepada user proses menuju halaman berikutnya. Contoh:

Kabar baiknya adalah Vue router di lengkapi dengan hooks, kita bisa manfaatkan fitur tersebut, langsung saja..

Buka file src/router.js dan ganti isinya dengan code di bawah ini.

const router = new Router({
  routes: [
      { path: '/', name: 'home', component: Home },
      { path: '/about', name: 'about', component: About }
  ]
})

router.beforeResolve((to, from, next) => {
  // Jika ini bukan memuat halaman awal.
  if (to.name) {
      // Memulai route progress bar.
      NProgress.start()
  }
  next()
})

router.afterEach((to, from) => {
  // Menghentikan animasi route progress bar.
  NProgress.done()
})

export default router

Sebelum kita hook ke beforeResolve route, kita memberitahukan router untuk memulai nprogress setelah permintaan halaman terjadi. Kalau afterEach hook memberitahukan router ketika link sudah di load sepenuhnya untuk menghentikan nprogress, tidak masalah jika permintaan halaman berhasil.

Menggunakan HTTP library

Bagian lain yang akan kita tambahkan progress bar adalah ketika kita melakukan AJAX request.

Kebanyakan HTTP library mempunyai middleware atau interceptor yang di jalankan sebelum sebuah request atau response terjadi. Jadi kita bisa hook pada library pilihan kita.

Disini saya menggunakan axios, pada axios di sebut interceptor. cara install:

# for yarn
yarn add axios

# for npm
npm install --save axios

Selanjutnya kita konfigurasi axios seperti ini

// file HTTP.js
import axios from 'axios'

// membuat instance axios baru
const instance = axios.create({
  baseURL: '/api'
})

// sebelum request jalankan nprogress
instance.interceptors.request.use(config => {
  NProgress.start()
  return config
})

// sebelum response stop nprogress
instance.interceptors.response.use(response => {
  NProgress.done()
  return response
})

export default instance

Kemudian kita dapat gunakan file diatas untuk ngehandle connection dan menampilkan progress bar setiap kali request di buat.

Nahh sekian untuk tutorial membuat indikator loading pada aplikasi vue.js, cukup segini dulu yang bisa saya berikan, apabila ada kekurangan nanti saya update artikel ini. Semoga bermanfaat.

Kesimpulan

Mungkin di luar sana banyak cara untuk membuat indikator loading pada aplikasi vue.js yang belum saya ketahui. Dan juga beberapa plugin yang bagus, tapi di sini saya pengen tau bagaimana cara kerjanya.

Apabila ada kesalahan kalian bisa tanyakan atau koreksi di kolom komentar.

Terimakasih 😁