Tutorial React Loading Component Sederhana untuk Pemula
Irhan Hisyam Dwi Nugroho
•
15 September 2025
•
170
Tutorial react loading component itu penting banget buat jaga pengalaman pengguna. Warga Bimbingan pasti pernah ngalamin pas buka aplikasi, tapi halaman malah kosong tanpa keterangan.
Kalau dibiarkan, user bisa mikir aplikasinya error dan akhirnya ninggalin. Padahal masalahnya cuma data yang belum selesai dimuat.
Makanya MinDi mau tunjukin cara bikin loading component sederhana biar aplikasi lebih jelas dan terlihat profesional. Yuk simak bareng-bareng.
Baca juga: Panduan Memilih Bootcamp Front-End Development Terbaik 2025
Apa itu Loading Component di React?
Loading Component di React adalah sebuah komponen khusus yang berfungsi menampilkan indikator visual ketika data atau konten sedang diproses.
Komponen ini biasanya digunakan saat aplikasi melakukan fetching data dari API, sehingga pengguna tahu bahwa sistem masih bekerja dan bukan mengalami error.
Dengan adanya loading component, pengalaman pengguna menjadi lebih jelas karena mereka tidak hanya melihat layar kosong tanpa penjelasan.
Sederhananya, ini adalah cara mudah untuk memberi “feedback” kepada user agar tetap sabar menunggu sampai konten benar-benar siap ditampilkan.
Baca juga: 7 Rekomendasi Bootcamp Programmer Gratis & Bersertifikat
Struktur yang Dibutuhkan
Sumber: Canva
Biasanya project React dengan loading component sederhana bisa ditata seperti ini:
my-app/ │ ├── src/ │ ├── components/ │ │ └── Loading.js │ ├── pages/ │ │ └── Home.js │ ├── App.js │ ├── index.js │ └── styles.css │ └── package.json |
Penjelasan:
1. components/Loading.js
File ini berisi komponen Loading yang khusus dibuat sebagai indikator sederhana. Dengan dipisahkan ke folder components, kode jadi lebih rapi dan mudah dipakai ulang.
Hal ini juga bikin kita gampang melakukan update tampilan loading di satu tempat tanpa harus ubah banyak file.
2. pages/Home.js
File ini contoh halaman utama yang akan menampilkan data dari API atau sumber lain. Di dalamnya kita pakai Loading saat proses pengambilan data masih berlangsung. Jadi, user tidak melihat halaman kosong, melainkan tahu bahwa aplikasi sedang bekerja.
3. App.js
File utama yang mengatur bagaimana komponen atau halaman digabung jadi satu aplikasi. Di sini biasanya kita pasang routing, layout, atau logika global.
App.js juga bisa dipakai sebagai tempat pertama untuk mencoba Loading sebelum dipakai di halaman lain.
4. index.js
File ini adalah pintu masuk aplikasi React yang merender App ke dalam DOM. Biasanya kode ini jarang diubah, tapi tetap penting karena semua aplikasi dijalankan lewat sini. Kalau ada global provider (misalnya Context atau Redux), biasanya dipasang di file ini juga.
5. styles.css
File CSS global yang digunakan untuk styling di seluruh aplikasi. Kita bisa tambahkan style sederhana untuk komponen Loading, misalnya teks di tengah layar atau animasi kecil. Dengan cara ini, tampilan loading jadi lebih menarik dan profesional.
Baca juga: Cara Membuat Website dengan HTML dan CSS Langkah Mudah
Cara Menggunakan Loading Component di Aplikasi React
Sumber: Canva
Loading paling sering dipakai saat fetch data atau proses berat. Warga Bimbingan butuh pola yang rapi supaya gampang dipakai ulang. Berikut langkah praktisnya.
1) Buat Komponen Loading yang Reusable
Komponen ini jadi indikator saat proses berjalan. Pisahkan ke file sendiri agar mudah dipakai di banyak halaman. Struktur sederhana memudahkan upgrade ke spinner atau animasi.
Kode —Loading.js :
export default function Loading({ label = "Loading..." }) { return ( <div role="status" aria-live="polite" style={{ textAlign: "center", padding: 16 }}> <span>{label}</span> </div> ); } |
2) Kelola State isLoading di Halaman
State menentukan kapan indikator tampil dan kapan konten utama muncul. Biasanya diset true di awal lalu false setelah proses selesai. Gunakan useEffect untuk mensimulasikan atau menjalankan proses async.
Kode — Home.js (versi simulasi) :
import React from "react"; import Loading from "../components/Loading"; export default function Home() { const [isLoading, setIsLoading] = React.useState(true); React.useEffect(() => { const t = setTimeout(() => setIsLoading(false), 1200); // simulasi return () => clearTimeout(t); }, []); return <div>{isLoading ? <Loading /> : <p>Konten berhasil dimuat!</p>}</div>; } |
3) Terapkan Conditional Rendering yang Jelas
Gunakan operator ternary agar maksudnya eksplisit. Hindari kondisi berlapis yang bikin bingung saat membaca kode. Jaga cabang loading dan content tetap ringkas.
Potongan Kode :
{isLoading ? <Loading label="Memuat..." /> : <Content />} |
4) Integrasikan dengan Real Fetch API
Set isLoading(true) sebelum panggil API, lalu set false di finally. Simpan respons ke state data dan tangani error agar pengguna dapat pesan yang tepat. Pola ini mudah diulang untuk endpoint lain.
Kode — src/pages/Home.js (fetch nyata)
import React from "react"; import Loading from "../components/Loading"; export default function Home() { const [isLoading, setIsLoading] = React.useState(true); const [items, setItems] = React.useState([]); const [error, setError] = React.useState(""); React.useEffect(() => { async function getData() { setIsLoading(true); setError(""); try { const res = await fetch("https://jsonplaceholder.typicode.com/posts?_limit=5"); if (!res.ok) throw new Error("Gagal mengambil data"); const data = await res.json(); setItems(data); } catch (e) { setError(e.message || "Terjadi kesalahan"); } finally { setIsLoading(false); } } getData(); }, []); if (isLoading) return <Loading label="Mengambil data..." />; if (error) return <p style={{ color: "crimson" }}>{error}</p>; return ( <ul> {items.map((it) => ( <li key={it.id}><strong>{it.title}</strong></li> ))} </ul> ); } |
5) Tambahkan Styling/Spinner (Opsional)
Tampilan bisa dinaikkan kualitasnya dengan CSS sederhana. Spinner memberi kesan aplikasi “hidup” tanpa banyak kode. Jika butuh cepat, pakai library seperti react-spinners.
Kode — src/styles.css
.loading-spinner { width: 28px; height: 28px; border: 3px solid #ddd; border-top-color: #333; border-radius: 50%; animation: spin .8s linear infinite; margin: 12px auto; } @keyframes spin { to { transform: rotate(360deg); } } |
Update — src/components/Loading.js
export default function Loading({ label = "Loading..." }) { return ( <div role="status" aria-live="polite" style={{ textAlign: "center", padding: 16 }}> <div className="loading-spinner" /> <div style={{ marginTop: 8 }}>{label}</div> </div> ); } |
Baca juga: Cara Membuat Pop Up di HTML: Panduan Mudah untuk Pemula
Ingin Jadi Web Developer Profesional?
Setelah membaca Tutorial React Loading Component Sederhana untuk Pemula, kini saatnya memanfaatkan pemahaman ini untuk membangun aplikasi web yang lebih interaktif dan profesional!
Yuk, ikuti Bootcamp Web Development di dibimbing.id! Di sini, kamu akan mempelajari React, CSS, HTML, hingga praktik membangun komponen modern yang bisa langsung diaplikasikan dalam dunia kerja.
Belajar langsung dari mentor berpengalaman dengan kurikulum aplikatif yang membantu kamu memahami konsep inti pemrograman web, sekaligus melatih keterampilan membuat project nyata.
Dengan lebih dari 840+ hiring partner dan tingkat keberhasilan alumni 96%, peluang kariermu di dunia IT semakin terbuka lebar!
Jadi, tunggu apa lagi? Hubungi kami dan daftar sekarang disini untuk mulai perjalananmu menjadi Web Developer profesional. #BimbingSampeJadi
Referensi
- Lazy Loading in React and How to Implement it ? [Buka]
Tags
Irhan Hisyam Dwi Nugroho
Irhan Hisyam Dwi Nugroho is an SEO Specialist and Content Writer with 4 years of experience in optimizing websites and writing relevant content for various brands and industries. Currently, I also work as a Content Writer at Dibimbing.id and actively share content about technology, SEO, and digital marketing through various platforms.
