# Skeleton Loading Table

**Tanggal:** 2026-07-25
**Status:** Selesai

## Tujuan
Mengganti indikator loading "Memuat data..." pada tabel dengan skeleton loading yang menampilkan struktur tabel (header + baris skeleton) saat data sedang dimuat.

## 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` tetap 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
- Komponen `Skeleton` sudah tersedia di `@/components/ui/skeleton`
- Saat loading, DataTable header tetap terlihat + 5 baris skeleton yang menyesuaikan jumlah kolom
