Cara Menerapkan Pace.js di Angular untuk Loading Indicator yang Dinamis

Kali ini kita akan membahas Pace.js dan bagaimana menerapkannya di Angular untuk meningkatkan pengalaman pengguna dengan loading indicator yang dinamis. Pace.js adalah library loading indicator yang bisa digunakan untuk menampilkan progress bar selama proses loading halaman atau saat mengirim dan menerima data dari server.

1. Kegunaan Pace.js

Pace.js adalah library open-source untuk menampilkan loading progress bar di aplikasi web. Kegunaannya sangat sederhana namun penting: memberikan feedback visual kepada pengguna saat aplikasi sedang memuat atau melakukan proses tertentu seperti fetching data. Dengan adanya feedback ini, pengguna bisa mengetahui bahwa sistem sedang bekerja, sehingga dapat meningkatkan pengalaman pengguna.

2. Masalah yang Diselesaikan oleh Pace.js

Dalam aplikasi berbasis SPA (Single Page Application) seperti Angular, pengguna mungkin tidak menyadari bahwa ada proses loading yang sedang berlangsung ketika berpindah halaman atau melakukan permintaan data ke server. Hal ini bisa membuat pengguna bingung atau merasa aplikasi mengalami error. Pace.js menyelesaikan masalah ini dengan menunjukkan loading indicator secara otomatis saat proses asinkron terjadi, seperti perpindahan halaman atau permintaan HTTP.

3. Cara Mengatur Pace.js agar Ter-trigger Saat Router URL Berubah atau Berpindah Halaman

Untuk membuat Pace.js otomatis ter-trigger setiap kali aplikasi berpindah halaman di Angular, kita dapat memanfaatkan Angular Router Events dan mengintegrasikannya dengan Pace.js.

Langkah-langkahnya:

1. Instalasi Pace.js
   Pertama, instal Pace.js ke dalam proyek Angular Anda melalui npm:

   npm install pace-js

2. Impor CSS Pace.js
   Tambahkan file CSS Pace.js ke dalam file angular.json agar Pace.js di-load di setiap halaman.

   
   "styles": [
       "node_modules/pace-js/themes/blue/pace-theme-flash.css"
   ]
                   

   
   Pada folder node_modules/pace-js/themes, ada beberapa tema yang dapat Anda gunakan seperti Minimal, Flash, Barber Shop, Mac OSX, Fill Left, Flat Top, Big Counter, Corner Indicator, Bounce, Loading Bar, Center Circle, Center Atom, Center Radar dan Center Simple. Untuk melihat visualisasi dan informasi lengkapnya Anda dapat menngunjungi langsung laman web-nya https://codebyzach.github.io/pace
3. Import Pace.js di Component atau Service
   Anda bisa meng-import Pace.js di file Angular seperti app.component.ts atau membuat Angular service agar bisa digunakan di berbagai bagian aplikasi. Tambahkan kode berikut:

   import 'pace-js';

4. Menggunakan Angular Router Events untuk Trigger Pace.js
   Di dalam file app.component.ts, Anda dapat menggunakan Angular Router Events untuk memulai Pace.js saat halaman berpindah:

   
   import { Component, OnInit } from '@angular/core';
   import { Router, NavigationStart, NavigationEnd } from '@angular/router';
   import 'pace-js';
   
   @Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.css']
   })
   export class AppComponent implements OnInit {
     constructor(private router: Router) {}
   
     ngOnInit() {
       this.router.events.subscribe(event => {
         if (event instanceof NavigationStart) {
           (window as any).Pace.restart();
         } else if (event instanceof NavigationEnd) {
           (window as any).Pace.stop();
         }
       });
     }
   }
                   

4. Cara Mengatur Pace.js agar Ter-trigger Saat Melakukan Request Data atau Mengirim Data ke Server

Selain aktif saat perpindahan halaman, Pace.js juga bisa diaktifkan saat ada request HTTP. Untuk ini, kita bisa menggunakan HTTP Interceptors di Angular.

Langkah-langkahnya:

1. Buat HTTP Interceptor
   Buat file baru untuk interceptor, misalnya pace.interceptor.ts:

   
   import { Injectable } from '@angular/core';
   import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
   import { Observable } from 'rxjs';
   import { finalize } from 'rxjs/operators';
   import 'pace-js';
   
   @Injectable()
   export class PaceInterceptor implements HttpInterceptor {
     intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
       (window as any).Pace.restart();
       return next.handle(req).pipe(
         finalize(() => {
           (window as any).Pace.stop();
         })
       );
     }
   }
                   

2. Registrasi Interceptor di App Module
   Buka app.module.ts dan tambahkan PaceInterceptor ke dalam provider:

   
   import { HTTP_INTERCEPTORS } from '@angular/common/http';
   import { PaceInterceptor } from './pace.interceptor';
   
   @NgModule({
     ...
     providers: [
       { provide: HTTP_INTERCEPTORS, useClass: PaceInterceptor, multi: true }
     ],
   })
   export class AppModule { }
                   

5. Tips Penggunaan Pace.js agar Lebih Optimal

Untuk memaksimalkan penggunaan Pace.js, berikut adalah beberapa tips yang bisa Anda coba:

• Custom Theme dan Warna: Sesuaikan warna dan tema loading indicator agar selaras dengan desain aplikasi Anda.
• Throttle atau Debounce Pace.js: Jika aplikasi Anda sering melakukan request kecil dalam waktu singkat, gunakan throttle atau debounce pada Pace.js agar progress bar tidak muncul-menghilang dengan cepat.
• Loading di Bagian Tertentu: Untuk request spesifik yang memerlukan loading di area tertentu, gunakan instance Pace.js manual di dalam fungsi Angular tersebut daripada mengandalkan trigger global.
• Monitor Kinerja: Jika aplikasi mengalami perlambatan saat loading indicator aktif, cek performa dan pastikan penggunaan Pace.js tidak memberatkan.

6. Tambahan : Throttle atau Debounce Pace.js

Berikut adalah contoh implementasi throttle dan debounce pada Pace.js menggunakan Angular HTTP Interceptor:

Implementasi Debounce pada Pace.js

Debounce memastikan Pace.js hanya ter-trigger setelah tidak ada request baru dalam waktu tertentu.

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';
import { finalize } from 'rxjs/operators';
import 'pace-js';

// Fungsi debounce untuk menunda trigger Pace.js
function debounce(func: Function, wait: number) {
  let timeout: any;
  return function (...args: any[]) {
    clearTimeout(timeout);
    timeout = setTimeout(() => func(...args), wait);
  };
}

@Injectable()
export class PaceInterceptor implements HttpInterceptor {
  private debouncePace = debounce(() => (window as any).Pace.restart(), 500);

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    this.debouncePace();  // Memanggil debounce
    return next.handle(req).pipe(
      finalize(() => {
        (window as any).Pace.stop();
      })
    );
  }
}
        

Implementasi Throttle pada Pace.js

Throttle memastikan Pace.js hanya ter-trigger setiap interval waktu tertentu, meskipun ada banyak request berturut-turut.

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';
import { finalize } from 'rxjs/operators';
import 'pace-js';

// Fungsi throttle untuk mengatur trigger Pace.js setiap interval waktu tertentu
function throttle(func: Function, limit: number) {
  let inThrottle: boolean;
  return function (...args: any[]) {
    if (!inThrottle) {
      func(...args);
      inThrottle = true;
      setTimeout(() => inThrottle = false, limit);
    }
  };
}

@Injectable()
export class PaceInterceptor implements HttpInterceptor {
  private throttlePace = throttle(() => (window as any).Pace.restart(), 500);

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    this.throttlePace();  // Memanggil throttle
    return next.handle(req).pipe(
      finalize(() => {
        (window as any).Pace.stop();
      })
    );
  }
}
        

Penjelasan Implementasi

• Debounce: Pace.js hanya akan ter-trigger setelah tidak ada request baru dalam 500ms. Ini berguna untuk mencegah progress bar tampil berulang kali saat banyak request terjadi secara berturut-turut.
• Throttle: Pace.js akan ter-trigger hanya sekali setiap 500ms, membatasi frekuensi pemanggilan selama banyak request terjadi dalam waktu singkat.

Dengan menerapkan throttle atau debounce pada Pace.js, Anda dapat mengontrol kemunculan progress bar secara lebih optimal, terutama ketika terjadi banyak request kecil secara beruntun. Ini akan membuat pengalaman pengguna menjadi lebih baik dan mengurangi gangguan dari progress bar yang muncul-menghilang terlalu cepat.

Kesimpulan

Dengan menerapkan Pace.js di Angular, Anda bisa memberikan pengalaman pengguna yang lebih baik dengan menampilkan loading indicator setiap kali halaman berpindah atau request HTTP terjadi. Semoga artikel ini bermanfaat untuk meningkatkan UX di proyek Angular Anda!