web/docs/history/2026-07-25-skeleton-loading-table.md

Skeleton Loading Table

Tanggal: 2026-07-25 Status: Selesai

Tujuan

Mengganti indikator loading "Memuat data..." pada tabel di halaman Plans dan Business Types dengan skeleton loading.

Yang Dikerjakan

1. Penambahan loading prop di DataTable.vue

• Menambahkan prop loading (boolean, default false)
• Saat loading === true: menampilkan 5 baris skeleton menggunakan komponen Skeleton dengan jumlah kolom sesuai definisi kolom
• Pagination disembunyikan saat loading
• Kolom number dan actions menggunakan lebar kecil (w-6, w-8)

2. Perubahan halaman Plans

• Sebelum: v-if="status === 'pending'" menampilkan teks "Memuat data..."
• Sesudah: DataTable selalu ditampilkan dengan :loading="status === 'pending'"

3. Perubahan halaman Business Types

• Sebelum: v-if="status === 'pending'" menampilkan teks "Memuat data..."
• Sesudah: DataTable selalu ditampilkan dengan :loading="status === 'pending'"

File yang Diubah

File	Aksi	Detail
app/components/data-table/DataTable.vue	Diubah	Tambah loading prop, Skeleton import, skeleton rows, skeletonWidth helper
app/pages/admin/plans/index.vue	Diubah	Ganti v-if="status === 'pending'" dengan :loading prop pada DataTable
app/pages/admin/business-types/index.vue	Diubah	Ganti v-if="status === 'pending'" dengan :loading prop pada DataTable

Notes

• Sama seperti implementasi yang sudah diterapkan di folder core
• Komponen Skeleton tersedia di @/components/ui/skeleton