Skeleton (AppSkeleton)
Placeholder berkilau (shimmer) yang menjaga tata letak halaman tetap stabil selama data paket try out, profil tutor, atau riwayat skor sedang dimuat.
import { AppSkeleton } from '#components'Menyusun placeholder sesuai bentuk konten
Pilih type yang meniru bentuk konten aslinya — circle untuk avatar, text untuk baris judul/deskripsi, card untuk thumbnail besar, dan rect untuk blok generik. Susun beberapa skeleton bersama-sama agar layout hasil akhirnya tidak "melompat" begitu data asli selesai dimuat — ini lebih tenang secara visual dibanding spinner tunggal di tengah layar untuk konten berbentuk daftar/kartu.
Skeleton Playground
Pilih bentuk placeholder yang sesuai dengan konten yang sedang dimuat.
Komposisi: kartu profil tutor sedang dimuat
Menggabungkan circle + beberapa text + satu card meniru struktur asli sebuah kartu profil dengan avatar, nama, dan thumbnail — pola paling umum dipakai di katalog paket.
Skeleton Shapes Matrix
Visualisasi perilaku komponen pada seluruh kondisi interaksi antarmuka.