Hallo teman-teman developer web!
Kamu pernah ngalamin nggak, waktu buka suatu halaman di web, tapi loading-nya lama banget, bikin kesel? Nah, jangan khawatir! Kali ini kita bakal bahas tentang cara bikin loading yang keren di aplikasi web pake Next.js.
Dalam dunia pengembangan web, loading itu penting banget, lho! Bayangin aja, kamu buka halaman, trus loading-nya lama, bosen banget kan? Nah, dengan bikin loading yang keren, pengalaman pengguna bisa jadi lebih nyaman. Makanya, yuk kita pelajari cara bikin loading yang keren!
Di artikel ini, kita bakal bahas step-by-step cara bikin loading yang keren abis pake Next.js. Jadi, simak terus ya🚀
Membuat State Loading
Ketika kamu menjelajahi sebuah aplikasi, seringkali kamu melihat tanda putar-putar kecil atau mungkin skeleton yang muncul sebelum halaman benar-benar dimuat. Nah, itu disebut loading state, teman-teman! Loading state itu penting banget, lho! Dia memberitahu kita bahwa aplikasi sedang bekerja, sedang memuat sesuatu untuk kita lihat.
Jadi, bagaimana sih cara bikin loading state itu? Gampang banget! Kamu cukup buat file baru dengan nama loading.js di dalam folder route yang ingin kamu gunakan.
Sebagai contohnya saya ingin membuat loading untuk halaman home.
Langsung saja kita bahas langkah-langkahnya:
Langkah Pertama: Membuat File loading.js
Kamu perlu bikin sebuah function di dalam file loading.js yang akan memberitahu aplikasi bagaimana tampilan loading state-nya. Misalnya, kamu bisa bikin gambar skeleton, atau mungkin tanda putar-putar yang keren.
Contohnya begini, kamu bisa juga copy kode di bawah:
export default function Loading() {
return (
<main className="px-20 flex justify-between items-center flex-wrap p-10">
{Array.from({ length: 10 }).map(() =>
<div role="status" className="max-w-sm w-[300px] p-4 border border-gray-200 rounded shadow animate-pulse md:p-6 mb-4">
<div className="flex items-center justify-center h-48 mb-4 bg-gray-300 rounded ">
<svg className="w-10 h-10 text-gray-200 " aria-hidden="true" xmlns="<http://www.w3.org/2000/svg>" fill="currentColor" viewBox="0 0 16 20">
<path d="M14.066 0H7v5a2 2 0 0 1-2 2H0v11a1.97 1.97 0 0 0 1.934 2h12.132A1.97 1.97 0 0 0 16 18V2a1.97 1.97 0 0 0-1.934-2ZM10.5 6a1.5 1.5 0 1 1 0 2.999A1.5 1.5 0 0 1 10.5 6Zm2.221 10.515a1 1 0 0 1-.858.485h-8a1 1 0 0 1-.9-1.43L5.6 10.039a.978.978 0 0 1 .936-.57 1 1 0 0 1 .9.632l1.181 2.981.541-1a.945.945 0 0 1 .883-.522 1 1 0 0 1 .879.529l1.832 3.438a1 1 0 0 1-.031.988Z" />
<path d="M5 5V.13a2.96 2.96 0 0 0-1.293.749L.879 3.707A2.98 2.98 0 0 0 .13 5H5Z" />
</svg>
</div>
<div className="h-2.5 bg-gray-200 rounded-full w-48 mb-4"></div>
<div className="h-2 bg-gray-200 rounded-full mb-2.5"></div>
<div className="h-2 bg-gray-200 rounded-full mb-2.5"></div>
<div className="h-2 bg-gray-200 rounded-full "></div>
<div className="flex items-center mt-4">
<div>
<div className="h-2.5 bg-gray-200 rounded-full w-32 mb-2"></div>
<div className="w-48 h-2 bg-gray-200 rounded-full "></div>
</div>
</div>
<span className="sr-only">Loading...</span>
</div>)}
</main>
)
}
Nah, begitu kamu bikin file loading.js, dia bakal masuk ke dalam layout.js. Nah, layout.js ini yang membungkus semua halaman-halaman dan layout-layout kamu di aplikasi Next.js.
Sebenarnya jika kamu sudah membuat file loading.js dan memberikan return function artinya kamu sudah membuat loading untuk halaman home beserta children-nya. Namun kali ini, kita akan mencoba latihan melakukan implementasi fetching data dan menampilkan loading sebelum data di-render.
Langkah Kedua: Melakukan Fetching Data
Nah, untuk implementasi kali ini, kita akan mencoba melakukan fetching data dari fake api.
Kamu bisa copy dan paste pada file page.js :
const getData = async () => {
try {
const response = await fetch('<https://fakestoreapi.com/products>', {
cache: "no-store"
})
if (response.ok) {
const data = await response.json()
return data
}
} catch (error) {
console.log(error)
}
}
Langkah Ketiga: Menampilkan Data ke User Interface
Jika kita sudah membuat function untuk memanggil sebuah data dari fake api. Selanjutnya adalah menampilkannya ke user interface.
Kamu bisa copy dan paste kode ini di bawahnya function getData() :
export default async function Home() {
const products = await getData()
return (
<main className="flex justify-between flex-wrap p-10">
{products.map((product, idx) =>
<div key={idx + 1} className="max-w-sm w-[300px] bg-white border border-gray-200 rounded-lg shadow mb-4">
<div className="flex justify-center items-center object-contain">
<img className="rounded-t-lg w-[300px] h-[300px]" src={product.image} alt="" />
</div>
<div className="p-5">
<a href="#">
<h5 className="mb-2 text-2xl font-bold tracking-tight text-gray-900 truncate">{product.title}</h5>
</a>
<p className="mb-3 font-normal text-gray-700 truncate">{product.description}</p>
<a href="#" className="inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300">
Read more
<svg className="rtl:rotate-180 w-3.5 h-3.5 ms-2" aria-hidden="true" xmlns="<http://www.w3.org/2000/svg>" fill="none" viewBox="0 0 14 10">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9" />
</svg>
</a>
</div>
</div>
)}
</main>
)
}
Nah, sekarang kamu sudah bisa menampilkan sebuah data yang di-render setelah proses loading selesai.
Saat kamu membuka halaman home. Halaman home akan menampilkan loading terlebih dahulu sebelum me-render data seperti gambar di bawah ini:
Nah, jika loading selesai baru akan menampilkan data-nya seperti gambar di bawah ini:
Kesimpulan
Salah satu keuntungan bikin loading yang keren ini adalah bikin pengalaman pengguna jadi lebih nyaman. Mereka tidak akan ngerasa jengkel nungguin halaman aplikasimu dimuat. Dengan loading state yang bermakna, kamu bisa memberi tahu mereka bahwa sesuatu sedang terjadi di belakang layar.
Jadi, apa yang bisa kamu dapet dari artikel ini? Pertama, kamu udah bisa bikin loading state yang keren di aplikasi Next.js-mu. Kedua, kamu udah tau cara mengambil data dan menampilkannya dengan baik di halaman web.
Buat kamu yang ingin mempelajari fitur-fitur selanjutnya, kamu bisa ikut kelas di BuildWithAngga. Salah satunya yaitu, Kelas Online Gratis NextJS Basic ataupun yang berupa project base yaitu, Kelas Online Modern JavaScript: Bikin Projek Website Seperti Twitter.
Sampai jumpa di artikel selanjutnya, ya! Teruslah belajar dan kembangkan skill kamu dalam mengembangkan aplikasi web yang keren. Semangat! 🚀
