Apa Itu Skeleton Loading Sebelum Halaman Tampil?
Saat membuka aplikasi belanja atau media sosial, sering muncul kotak-kotak abu-abu berkedip sesaat sebelum foto dan teks asli tampil. Tampilan itu bukan bug — namanya skeleton loading, dan sengaja dirancang supaya jeda tunggu terasa lebih singkat.
Skeleton loading adalah tampilan sementara berupa kotak atau garis abu-abu yang meniru bentuk kasar sebuah halaman, ditampilkan selagi konten aslinya (teks, gambar, data) masih dimuat dari server. Tujuannya membuat waktu tunggu terasa lebih pendek dan halaman terasa “sudah mulai muncul”, dibanding layar kosong atau ikon berputar polos.
Terakhir ditinjau: 15 Agustus 2026.
Cara kerja skeleton loading
Skeleton loading bekerja dengan menampilkan bentuk “kerangka” halaman lebih dulu — kotak persegi untuk area gambar, garis-garis pendek untuk area judul dan teks — sebelum data asli selesai diambil dari server. Begitu data sudah siap, kotak-kotak itu digantikan konten sebenarnya secara langsung.
Bentuk kerangkanya biasanya dibuat semirip mungkin dengan tata letak asli, supaya saat konten muncul tidak terjadi lompatan tata letak yang bikin halaman “meloncat-loncat” — sesuatu yang justru bisa terjadi kalau area kosong tidak diberi ukuran sama sekali sebelumnya.
Beda skeleton loading dan spinner/ikon berputar
Spinner (ikon lingkaran berputar) hanya memberi tahu “sedang memuat”, tanpa memberi gambaran apa pun soal bentuk konten yang akan muncul. Skeleton loading melangkah lebih jauh: memberi petunjuk visual duluan tentang struktur halaman — ada berapa baris teks, di mana posisi gambar — meski isinya belum terlihat.
Beberapa riset pengalaman pengguna (UX) menunjukkan pendekatan skeleton loading membuat waktu tunggu terasa lebih pendek dibanding spinner polos, walau durasi tunggu sebenarnya sama persis. Ini murni soal persepsi: otak manusia cenderung merasa lebih sabar kalau sudah melihat “sesuatu sedang terbentuk”, dibanding menatap layar kosong atau ikon berputar tanpa konteks.
Kapan skeleton loading dipakai, kapan tidak diperlukan
Skeleton loading paling berguna untuk halaman yang kontennya diambil dari server secara bertahap — misalnya daftar produk, linimasa media sosial, atau dasbor dengan banyak data yang dimuat satu per satu. Semakin banyak dan besar data yang perlu diambil, semakin terasa manfaat skeleton loading.
Untuk halaman statis seperti berkas HTML tunggal — semua teks dan tata letaknya sudah ada dalam satu berkas sejak awal, tidak menunggu data tambahan dari server — skeleton loading umumnya tidak diperlukan, karena memang tidak ada jeda pengambilan data untuk disamarkan.
Pertanyaan umum
Apa bedanya skeleton loading dan animasi spinner?
Spinner hanya menunjukkan “sedang memuat” tanpa gambaran bentuk konten. Skeleton loading menampilkan kerangka kasar tata letak halaman (kotak untuk gambar, garis untuk teks) sebelum konten aslinya muncul.
Kenapa skeleton loading terasa lebih cepat padahal waktu tunggunya sama?
Ini soal persepsi, bukan kecepatan sungguhan. Melihat bentuk halaman mulai terbentuk membuat otak merasa progres sedang terjadi, sehingga jeda tunggu terasa lebih pendek dibanding menatap layar kosong atau ikon berputar polos.
Apakah skeleton loading memengaruhi kecepatan sebenarnya sebuah situs?
Tidak secara langsung — skeleton loading tidak mempercepat pengambilan data dari server. Yang berubah hanyalah persepsi pengguna selama menunggu, bukan waktu tunggu aktualnya.
Kenapa halaman statis seperti ini tidak memakai skeleton loading?
Karena seluruh teks dan tata letak halaman ini sudah tersedia dalam satu berkas HTML sejak awal, tanpa menunggu data tambahan diambil dari server — jadi tidak ada jeda pengambilan data yang perlu disamarkan.
Siap lanjut?
Baca dulu FAQ di atas kalau masih ada yang belum jelas — atau langsung lanjut kalau sudah siap.