Membuat Animasi Loading Pada Vue JS

Introduction

Indikator pemuatan meningkatkan UX (pengalaman pengguna) di aplikasi apa pun—web atau seluler. Animasi ini memberikan umpan balik kepada pengguna bahwa suatu tindakan sedang dilakukan dan hasilnya akan segera kembali.

Dalam aplikasi web, ada dua peristiwa besar yang membutuhkan loader:

Permintaan jaringan seperti menavigasi ke halaman lain atau permintaan AJAX.
Saat komputasi berat sedang berjalan.

Artikel ini akan memperkenalkan beberapa cara Anda dapat menambahkan loader ke aplikasi Vue.js Anda.

Prasyarat

Untuk menyelesaikan tutorial ini, Anda memerlukan:

Node.js diinstal secara lokal, yang dapat Anda lakukan dengan mengikuti Cara Menginstal Node.js dan Membuat Lingkungan Pengembangan Lokal.

Tutorial ini telah diverifikasi dengan Node v14.2.0, npm v6.14.5, vue v2.6.11, dan vue-router v3.1.6.

Langkah 1 — Menyiapkan Proyek

Mari buat proyek Vue baru. Tutorial ini akan menggunakan Vue CLI (antarmuka baris perintah) untuk membuat perancah aplikasi Anda:

npx @vue/[email protected] create --inlinePreset='{ "useConfigFiles": false, "plugins": { "@vue/cli-plugin-babel": {}, "@vue/cli-plugin-eslint": { "config": "base", "lintOn": ["save"] } }, "vuex": true, "router": true, "routerHistoryMode": true }' vue-loading-indicators

Perintah panjang ini adalah seperangkat preset berdasarkan default yang ditetapkan oleh @vue/cli/packages/@vue/cli/lib/options.js. Saat diformat ulang agar mudah dibaca, tampilannya seperti ini:

{
  "useConfigFiles": false,
  "plugins": {
    "@vue/cli-plugin-babel": {},
    "@vue/cli-plugin-eslint": {
      "config": "base",
      "lintOn": ["save"]
    }
  },
  "vuex": true,
  "router": true,
  "routerHistoryMode": true
}

Preset ini menambahkan vue-router sebagai plugin (cli-plugin-router), menambahkan vuex sebagai plugin (cli-plugin-vuex), mengaktifkan mode history, menambahkan Babel, dan menambahkan ESLint.

Untuk keperluan tutorial ini, Anda tidak akan memerlukan TypesScript, dukungan Progressive Web App (PWA), Vuex, CSS pre-processors, unit testing, atau end-to-end (E2E) testing.

Selanjutnya, ubah ke direktori proyek baru:

$ cd vue-loading-indicators

Anda dapat melihat aplikasi Anda di browser web Anda dengan menjalankan perintah berikut:

$ npm run serve

Saat Anda mengunjungi localhost:8080 di browser web, Anda akan melihat pesan "Selamat datang di Aplikasi Vue.js Anda". Juga akan ada tautan ke halaman Beranda dan halaman Tentang karena Anda menyertakan Vue Router. Tujuan Anda adalah menambahkan indikator pemuatan saat bernavigasi di antara dua halaman ini.

Jika Anda ingin mempelajari lebih lanjut tentang Vue CLI, Anda dapat merujuk ke dokumentasi Vue CLI.

Sekarang, Anda siap untuk mulai membangun.

Langkah 2 — Menggunakan nprogress

Anda dapat menggunakan indikator pemuatan apa pun pilihan Anda. Untuk tutorial ini, Anda akan menginstal nprogress untuk digunakan sebagai indikator pemuatan Anda.

Anda tidak akan menggunakan npm atau benang untuk ini. Anda akan merujuknya dari CDN (jaringan pengiriman konten).

Dalam proyek Vue CLI yang dibuat, navigasikan ke file public/index.html:

$ nano public/index.html

Dan tambahkan cuplikan di bawah ini sebelum tag penutup </head>:

<head>
  <!-- ... -->
  <link href="https://unpkg.com/[email protected]/nprogress.css" rel="stylesheet" />
  <script src="https://unpkg.com/[email protected]/nprogress.js"></script>
</head>

nprogress memperlihatkan beberapa metode API, tetapi untuk artikel ini, Anda memerlukan dua—mulai dan selesai. Metode ini memulai dan menghentikan bilah kemajuan.

nprogress juga dapat dikonfigurasi untuk cara memajukan loader. Meskipun ini dapat dikustomisasi secara manual, artikel ini akan menggunakan perilaku default.

Langkah 3 — Menggunakan Router

Saat Anda menggunakan router untuk menambahkan bilah kemajuan ke situs web Anda, fungsi khas yang Anda harapkan adalah:

“Ketika pengguna menavigasi ke halaman baru, loader mulai berdetak di bagian atas halaman yang menunjukkan kemajuan pengunduhan halaman berikutnya kepada pengguna.”

Vue Router dilengkapi dengan pengait yang dapat Anda kaitkan yang memungkinkan Anda mencapai fungsi ini.

Buka file src/router/index.js:

$ nano src/router/index.js

Dan tambahkan kode di bawah ini sebelum ekspor:

// ...

router.beforeResolve((to, from, next) => {
  // If this isn't an initial page load.
  if (to.name) {
    // Start the route progress bar.
    NProgress.start()
  }
  next()
})

router.afterEach((to, from) => {
  // Complete the animation of the route progress bar.
  NProgress.done()
})

export default router

Saat Anda menghubungkan ke rute beforeResolve, Anda memberi tahu router untuk memulai nprogress setelah permintaan halaman terjadi. Kait afterEach memberi tahu router bahwa setelah tautan sepenuhnya dievaluasi untuk menghentikan bilah kemajuan, seharusnya tidak peduli jika permintaan halaman berhasil.

Pada titik ini, Anda dapat menjalankan aplikasi Anda:

$ npm run serve

Saat Anda mengunjungi localhost:8080 di browser web Anda, Anda dapat menavigasi antara halaman Beranda dan halaman Tentang. Saat Anda melakukannya, Anda akan melihat indikator pemuatan yang Anda tambahkan ke aplikasi Anda.

Langkah selanjutnya akan mengeksplorasi lebih lanjut indikator pemuatan.

Langkah 4 — Menjelajahi Penggunaan Lanjutan

Di bagian ini, Anda akan diperkenalkan dengan kasus penggunaan lain untuk memuat indikator di aplikasi Anda.

Ini akan disajikan dengan contoh dan Anda tidak akan langsung menerapkannya dalam tutorial Anda kecuali jika Anda ingin menjelajahinya sendiri.

Menggunakan perpustakaan HTTP

Bagian lain dari aplikasi yang mungkin ingin Anda tambahkan bilah kemajuan adalah ketika pengguna Anda membuat permintaan AJAX.

Sebagian besar pustaka HTTP saat ini memiliki semacam middleware atau pencegat yang diaktifkan sebelum permintaan atau respons terjadi. Karena itu, Anda juga dapat menghubungkan ke perpustakaan pilihan Anda.

Untuk tutorial ini, Anda akan menggunakan axios. Pustaka ini menggunakan istilah pencegat.

Instal axios:

$ npm install [email protected]

Kemudian buat file HTTP.js:

$ nano HTTP.js

Kemudian, Anda dapat mengonfigurasi aksio agar berfungsi seperti ini:

import axios from 'axios'

// create a new axios instance
const instance = axios.create({
  baseURL: '/api'
})

// before a request is made start the nprogress
instance.interceptors.request.use(config => {
  NProgress.start()
  return config
})

// before a response is returned stop nprogress
instance.interceptors.response.use(response => {
  NProgress.done()
  return response
})

export default instance

Kode ini memungkinkan Anda untuk menangani koneksi Anda dan mendapatkan bilah kemajuan setiap kali permintaan dibuat.

Menggunakan Loader dalam Komponen

Ada kalanya Anda tidak membuat permintaan halaman atau permintaan AJAX. Ini mungkin hanya tindakan yang bergantung pada browser yang membutuhkan waktu.

Mari kita pertimbangkan komponen DownloadButton khusus yang dapat mengubah statusnya menjadi status pemuatan karena beberapa tindakan eksternal.

Komponen hanya akan mengambil satu penyangga, memuat:

<template>
  <DownloadButton :loading="loading">Download</DownloadButton>
</template>

Komponen contoh akan menyerupai sesuatu seperti ini:

Catatan: Beberapa detail yang lebih baik dari SVG viewBox, jalur, dan gaya tidak ditentukan dalam contoh ini.

<template>
  <button class="Button" :disabled="loading">
    <svg v-if="loading" class="Button__Icon Button__Spinner" viewBox="...">
      <path d="..."/>
    </svg>
    <svg v-else class="Button__Icon" viewBox="0 0 20 20">
      <path d="..."/>
    </svg>
    <span v-if="!loading" class="Button__Content">
      <slot/>
    </span>
  </button>
</template>

<script>
export default {
  props: {
    loading: { type: Boolean }
  }
}
</script>

<style>
  /* ... */
</style>

Berikut adalah demonstrasi dari apa yang akan dihasilkan kode ini:

Gif animasi pengguna yang berinteraksi dengan tombol unduh dan lingkaran pemuatan muncul.

Menggunakan Komponen Tingkat Tinggi untuk Loader yang Dapat Digunakan Kembali

Anda dapat membuat loader sebagai pembungkus (HOCs) untuk komponen kami yang kemudian dapat Anda ubah statusnya melalui props.

Jenis pemuat ini bagus untuk komponen yang tidak memengaruhi keadaan global aplikasi Anda, tetapi Anda tetap ingin pengguna merasa terhubung dengan tindakan yang ada.

Berikut ini contohnya:

Catatan: Beberapa detail yang lebih baik dari isi Stats tidak didefinisikan dalam contoh ini.

// This loader will add an overlay with the text of 'Loading...'
const Loader = {
  template: `
    <div class="{'is-loading': loading}">
      <slot/>
    </div>
  `,
  props: ['loading']
}

const Stats = {
  template: `
    <Loader :loading="updating">
      ...
    </Loader>
  `,
  props: ['updating']
}

const app = new Vue({
  template: `
    <div class="widget">
      <Stats :updating="fetchingStats"/>
      <Button @click="fetchingStats = true">
        Latest stats
      </Button>
    </div>
  `,
})

Berikut adalah demonstrasi dari apa yang akan dihasilkan kode ini:

Kotak dengan tombol pembaruan, pengguna mengklik pembaruan, dan kotak berwarna abu-abu untuk menampilkan pesan pemuatan

Menggunakan Komponen Vue Asinkron

Komponen asinkron Vue memungkinkan Anda untuk mengambil komponen dari server hanya saat Anda membutuhkannya. Alih-alih melayani komponen pengguna akhir yang mungkin tidak pernah mereka gunakan, pengguna akhir hanya dilayani apa yang mereka butuhkan.

Komponen async juga hadir dengan dukungan asli untuk status pemuatan dan kesalahan, jadi tidak perlu konfigurasi tambahan apa pun di sini.