f637eebe70
- Introduced `loading` prop to DataTable for handling loading state - Replaced loading text with skeleton rows during data fetch - Updated Business Types and Plans pages to utilize the new loading prop
36 lines
1.6 KiB
Markdown
36 lines
1.6 KiB
Markdown
# 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
|