htmlcssjavascriptloadinguxPemula8 mnt baca

Loading Skeleton

Membangun placeholder kerangka berkilau saat konten dimuat, seperti di Facebook dan YouTube.

Kenapa Skeleton?

Spinner hanya berkata "tunggu". Skeleton berkata "tunggu, dan ini bentuk kontennya". Pengguna merasa loading lebih cepat karena otak sudah memproses layout. Facebook, YouTube, dan LinkedIn semuanya memakai pola ini.

Langkah Membangun

HTML: Dua versi daftar: versi skeleton (kotak-kotak abu) dan versi konten asli (tersembunyi awalnya).

CSS: Skeleton memakai gradien abu dengan animasi shimmer: background-position bergerak menciptakan efek kilau berjalan. Bentuknya meniru konten: lingkaran untuk avatar, baris untuk teks.

css

.skeleton {
  background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%);
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite;
}
@keyframes shimmer { to { background-position: -200% 0; } }

JS: Simulasi loading 1.5 detik (atau fetch sungguhan): tampilkan skeleton, sembunyikan konten. Setelah data siap, tukar keduanya.

Kapan Skeleton Cocok?

Untuk konten dengan struktur yang bisa diprediksi (daftar, kartu, artikel). Untuk aksi singkat (tombol kirim), spinner kecil lebih tepat.

Kesalahan Umum

Skeleton tidak mirip konten asli sehingga terjadi layout shift saat konten muncul (samakan ukuran).
Animasi shimmer terlalu cepat/terang hingga mengganggu (1-1.5 detik, warna lembut).
Lupa menangani error: skeleton hilang tapi konten tidak muncul (selalu ada state error).

Live Playground

export default function App(): JSX.Element {
  return <h1>Hello world</h1>
}

Edit kode di kiri, preview kanan ter-update otomatis.

Tantangan

Tantangan: Skeleton Profil

Buat skeleton untuk halaman profil: lingkaran avatar besar, baris nama, dan 3 baris bio, yang digantikan konten profil asli setelah 2 detik.