Komponen Skeleton Loading (Placeholder Shimmer)
Kerangka efek shimmer untuk transisi pemuatan data yang anggun pada kartu, tabel, dan avatar.
Rikat Declarative / PrimeNG-StyleKomponen kerangka transisi pemuatan data ala <p-skeleton> di PrimeNG. Memberikan umpan balik visual animasi kilau halus (shimmer) yang menyerupai bentuk konten asli sehingga mengurangi rasa menunggu pada pengguna saat data sedang diambil dari server.
Skeleton Baris Paragraf & Tipografi
<!-- Kerangka Teks Multi-Baris -->
<l-skeleton width="100%" height="1.25rem"></l-skeleton>
<l-skeleton width="85%" height="1.25rem"></l-skeleton>
<l-skeleton width="60%" height="1.25rem"></l-skeleton>
Skeleton Profil & Identitas Pengguna
<!-- Skeleton Avatar & Nama Pengguna -->
<div style="display: flex; align-items: center; gap: 1rem;">
<l-skeleton width="48px" height="48px" shape="circle"></l-skeleton>
<div style="flex: 1;">
<l-skeleton width="50%" height="1rem"></l-skeleton>
<l-skeleton width="80%" height="0.8rem"></l-skeleton>
</div>
</div>
Skeleton Kartu Artikel / Produk
<!-- Kerangka Kartu Produk -->
<l-skeleton width="100%" height="140px"></l-skeleton>
<l-skeleton width="70%" height="1.2rem"></l-skeleton>
<l-skeleton width="100%" height="0.8rem"></l-skeleton>
<l-skeleton width="35%" height="1.8rem"></l-skeleton>
Simulasi Pemuatan Data Interaktif
<!-- Pola Kondisional Pengalihan Skeleton & Data -->
<div id="skeletonView">
<l-skeleton width="100%" height="1.25rem"></l-skeleton>
</div>
<div id="realDataView" style="display: none;">
<p>Konten data aktual dari API</p>
</div>