Yoga Pangestu f637eebe70 Add skeleton loading to DataTable component

- 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

2026-07-25 10:31:30 +07:00

1.6 KiB

Raw Blame History

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

1.6 KiB Raw Blame History