Cara Membuat Loader dengan React Hooks

Pada artikel kali, ini kita akan melihat bagaimana cara menambahkan loader atau spinner di react menggunakan Hooks saat mengambil Data dari API.

Loader atau spinner adalah gif sederhana yang digunakan untuk menunjukkan kepada pengguna bahwa data sedang dimuat di latar belakang. Di artikel ini, kita akan menjelajahi salah satu cara tercepat untuk menambahkan loader keren ke aplikasi react.

Mengapa perlu loader atau spinner?

Akses data sebagian besar membutuhkan waktu beberapa detik terutama aplikasi yang memanggil database atau yang melakukan panggilan API dan terkadang pengguna mungkin memiliki masalah pada jaringan. Sekarang, di sinilah loader muncul, memberi informasi kepada pengguna untuk menunggu data mereka muncul.

Dimana mendapatkan Loader yang cantik?

Berikut beberapasitus web populer yang dapat Anda gunakan untuk mendapatkan gif spinner dan loader terbaik.

1. Loading
2. Preloaders
3. Dribble
4. Behance
5. Pinterest

Tahapan Membuat Loader Menggunakan React Hooks

Pada artikel ini, kita akan menggunakan API Game of thrones dan membuat loading screen dinamis. Dimana dapat berubah setiap kali Anda meminta data dari API. Berikut tahapan yang Anda harus ikuti:

1. Jalankan npx create-react-app app-name di folder proyek Anda.
2. Instal Axios menggunakan npm install axios. Axios adalah pustaka HTTP yang mengembalikan janji, akan membuat permintaan dengannya.
3. Di folder src, buat folder Home di folder components yang berisi header.js yang menyimpan logo dan file loader.js yang menyimpan loading image.
4. Kemudian buat Housefolder.js di components, folder ini menampung semua item yang akan didapat dari API, kita akan mengimpornya di file App.js
5. Kemudian buat folder image di components, folder ini menampung semua gambar yang digunakan untuk proyek tersebut.

Kita akan berfokus pada file HouseNames.js dan App.js karena di sinilah yang digunakan untuk loader, kita akan menggunakan dua Hooks react yaitu useState dan useEffect.

Di App.js, kita akan menggunakan arrow function untuk membuat fungsi, lalu membuat konstanta menggunakan useState kami. Di loading useState kita atur sebagai true untuk mengaktifkannya memuat sebelum data muncul.

const App = () => {

  const [items, setItems] = useState([]) //this will represent the items that will be coming from the API
  const [isLoading, setLoading] = useState(true)

Untuk membuat permintaan, Axios perlu masuk ke useEffects. Karena kita menggunakan Axios, kita perlu mengimpornya di folder App.js. Disini kita hanya akan menggunakan async bukan .get dan .then. Kemudian kita buat fungsi getItems.

useEffect (() => {
    const getItems =  async () =>{
      const result = await axios ()
}, []) //when we use useEffect we put dependency as a second paramiters

Kemudian kita copy paste base url atau endpoint di axios untuk meminta data dari API. Ketika kita mendapatkan data, atur items dengan isi atau response yang didapat axios dan atur IsLoading ke false, lalu panggil kembali getItems .

      const result = await axios (
        `https://www.anapioficeandfire.com/api/houses` //Endpoint and parameter or base Url
        )
      console.log(result.data)

      setItems(result.data) //sets the data to appear 
      setLoading(false) //stop loading when data is fetched
    }
    getItems()

Pada bagian return, kita akan meneruskan isLoading sebagai props sehingga akan berubah dari true menjadi false, setelah memanggil setLoading(false). Kita hanya mengambil global state di App.js dengan meneruskannya sebagai props di HouseNames.js

  return  ( <div className="container">
    <Header/>
    <HouseNames isLoading ={isLoading} items = {items}/>
  </div> )

}

Setelah semua langka di atas selesai, file App.js kita akan terlihat seperti ini.

import React, {useState, useEffect} from 'react';
import axios from 'axios'
import Header from './components/home/Header'
import HouseNames from './components/House/HouseNames'
import './App.css';

const App = () => {

  const [items, setItems] = useState([]) //this will represent the items that will be coming from the API
  const [isLoading, setLoading] = useState(true)

  useEffect (() => {
    const getItems =  async () =>{
      const result = await axios (
        `https://www.anapioficeandfire.com/api/houses` //Endpoint and parameter or base Url
        )
      console.log(result.data)

      setItems(result.data)//sets the data to appear 
      setLoading(false) //stop loading when data is fetched
    }
    getItems()

  }, [])//when we use useEffect we put dependency as a second paramers

  return  ( <div className="container">
    <Header/>
    <HouseNames isLoading ={isLoading} items = {items}/>
  </div> )

}

export default App;

Pada file HouseNames.js, impor loader.js. kita menangkap props yang diberikan dari App.js menggunakan destructuring bukan props.items. Dibagian return kita harus memeriksa apakah masih loading atau tidak menggunakan fungsi tinary, lalu kita masukkan ke dalam komponen Loader. Tambahkan className dari app.css untuk mengatur style halaman. Kemudian looping itemsnya menggunakan fungsi map. Nantinya code akan terlihat seperti ini.

import React from 'react';
import Loader from '../home/Loader'

const HouseNames = ({ items, isLoading }) => {
    return isLoading ? (   //Checkif if is loading
    <Loader/>
    ) : (
    <section className="frame"> 
    {items.map((item)  => (   //here we map through the items
        <h1>{item.name}</h1>
    ))}
    </section>
    )

}

export default HouseNames