fix loading Skeleton

src/modules/10_registry/01_Information/06_Ability.vue

@@ -1,33 +1,35 @@
 <script setup lang="ts">
-import { useQuasar, type QTableProps } from "quasar";
 import { ref, onMounted } from "vue";
+import { useQuasar, type QTableProps } from "quasar";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import { useDataStore } from "@/stores/data";
 
+/** import type */
 import type { AbilityRows } from "@/modules/10_registry/interface/index/Main";
-//history dialog
-import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
 
-const link = ref<string>("");
-const rows = ref<AbilityRows[]>([]);
-const rowsData = ref<AbilityRows[]>([]);
-const rowsHistory = ref<AbilityRows[]>([]);
-const rowsHistoryData = ref<AbilityRows[]>([]);
-const idByRow = ref<string>("");
-const filter = ref<string>("");
+/** import components */
+import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
+import SkeletonTable from "@/components/SkeletonTable.vue";
+
 const $q = useQuasar();
-const mode = ref<boolean>($q.screen.gt.xs);
-const mixin = useCounterMixin();
 const dataStore = useDataStore();
 const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
-  mixin;
-
-const modalHistory = ref<boolean>(false);
-/** ตัวแปรข้อมูล */
+  useCounterMixin();
 
+const mode = ref<boolean>($q.screen.gt.xs); // true = desktop mode, false = mobile mode
+const link = ref<string>(""); // ลิงก์สำหรับดึงข้อมูลความสามารถพิเศษ
+const isLoading = ref<boolean>(false); // สถานะการโหลดข้อมูล
+const isLoadingHistory = ref<boolean>(false); // สถานะการโหลดประวัติ
+const rows = ref<AbilityRows[]>([]); // ข้อมูลความสามารถพิเศษ
+const rowsData = ref<AbilityRows[]>([]); // ข้อมูลความสามารถพิเศษสำหรับค้นหา
+const rowsHistory = ref<AbilityRows[]>([]); // ข้อมูลประวัติความสามารถพิเศษ
+const rowsHistoryData = ref<AbilityRows[]>([]); // ข้อมูลประวัติความสามารถพิเศษสำหรับค้นหา
+const idByRow = ref<string>(""); // id ของแถวที่เลือก
+const filter = ref<string>(""); // ค่าที่ใช้สำหรับค้นหาในตาราง
+const modalHistory = ref<boolean>(false); // สถานะการแสดง modal ประวัติการแก้ไข
 const visibleColumns = ref<string[]>([
   "field",
   "detail",
@@ -187,14 +189,9 @@ const columnsHistory = ref<QTableProps["columns"]>([
   },
 ]);
 
-function onHistory(id: string) {
-  modalHistory.value = true;
-  idByRow.value = id;
-}
-
-/** get data */
+/** ฟังก์ชันดึงข้อมูล */
 async function getData() {
-  showLoader();
+  isLoading.value = true;
   http
     .get(config.API.dataUserAbilityByType(link.value))
     .then((res) => {
@@ -206,16 +203,25 @@ async function getData() {
       messageError($q, e);
     })
     .finally(() => {
-      setTimeout(() => {
-        hideLoader();
-      }, 2000);
+      isLoading.value = false;
     });
 }
 
-/** get history */
-function getHistory() {
-  showLoader();
-  http
+/**
+ * ฟังก์ชันเปิด modal ประวัติการแก้ไขความสามารถพิเศษ
+ * @param id ID ของแถวที่ต้องการดูประวัติ
+ */
+function onHistory(id: string) {
+  modalHistory.value = true;
+  idByRow.value = id;
+}
+
+/** ฟังก์ชันดึงข้อมูลประวัติการแก้ไขความสามารถพิเศษ */
+async function getHistory() {
+  isLoadingHistory.value = true;
+  rowsHistory.value = [];
+  rowsHistoryData.value = [];
+  await http
     .get(config.API.dataUserAbilityHistoryByType(link.value, idByRow.value))
     .then((res) => {
       const data = res.data.result;
@@ -226,10 +232,11 @@ function getHistory() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoadingHistory.value = false;
     });
 }
 
+/** ฟังก์ชันค้นหาข้อมูล */
 function onSearch() {
   rows.value = onSearchDataTable(
     filter.value,
@@ -241,6 +248,7 @@ function onSearch() {
 /**
  * ฟังก์ชันโหลไฟลเอกสารหลักฐาน
  * @param id รายการที่ต้องการโหลด
+ * @param profileId ID ของโปรไฟล์ที่ต้องการโหลด
  */
 async function onDownloadFile(id: string, profileId: string) {
   showLoader();
@@ -272,7 +280,6 @@ onMounted(async () => {
 });
 </script>
 <template>
-  <!-- v-if="mode" -->
   <div class="col-12">
     <q-toolbar class="q-px-none q-mt-md">
       <span class="text-blue-6 text-weight-bold text-body1"
@@ -309,7 +316,10 @@ onMounted(async () => {
         :display-value="$q.lang.table.columns"
       />
     </q-toolbar>
+
+    <SkeletonTable v-if="isLoading" :columns="columns" />
     <d-table
+      v-else
       flat
       dense
       bordered
@@ -422,6 +432,7 @@ onMounted(async () => {
       </template>
     </d-table>
   </div>
+
   <DialogHistory
     v-model:modal="modalHistory"
     :title="'ประวัติแก้ไขความสามารถพิเศษ'"
@@ -430,8 +441,10 @@ onMounted(async () => {
     :rows-data="rowsHistoryData"
     :visibleColumns="visibleColumnsHistory"
     :columns="columnsHistory"
+    :is-loading="isLoadingHistory"
   />
 </template>
+
 <style scoped>
 .absolute_button {
   position: absolute;