# 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`