diff --git a/src/components/PopupDetailInbox.vue b/src/components/PopupDetailInbox.vue
index 29e7647..986a733 100644
--- a/src/components/PopupDetailInbox.vue
+++ b/src/components/PopupDetailInbox.vue
@@ -1,8 +1,18 @@
 <script setup lang="ts">
 import { ref, reactive, watch } from "vue";
+import { useQuasar } from "quasar";
+
+import http from "@/plugins/http";
+import genReport from "@/plugins/genreport";
+import { useCounterMixin } from "@/stores/mixin";
 
 import PopupReplyInbox from "@/components/PopupReplyInbox.vue";
 
+import type { Attachments } from "@/modules/01_dashboard/interface/Main";
+
+const $q = useQuasar();
+const { showLoader, hideLoader, messageError } = useCounterMixin();
+
 const props = defineProps({
   modal: {
     type: Boolean,
@@ -60,9 +70,29 @@ watch(
 
 const modalReply = ref<boolean>(false);
 
-function fileOpen(url: string) {
-  window.open(url, "_blank");
-}
+const fileOpen = async (attachmentsData: Attachments) => {
+  if (attachmentsData.isReport) {
+    showLoader();
+    await http
+      .get(attachmentsData.url)
+      .then(async (res) => {
+        const result = res.data;
+        if (attachmentsData.isTemplate) {
+          await genReport(result.result, attachmentsData.name, "pdf");
+        } else {
+          window.open(result.downloadUrl, "_blank");
+        }
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  } else {
+    window.open(attachmentsData.url, "_blank");
+  }
+};
 </script>
 <template>
   <q-dialog v-model="modal">
@@ -116,7 +146,7 @@ function fileOpen(url: string) {
               v-for="(item, index) in detail.payload.attachments"
               :key="index"
             >
-              <q-item clickable v-close-popup @click.stop="fileOpen(item.url)">
+              <q-item clickable v-close-popup @click.stop="fileOpen(item)">
                 <q-item-section>{{ item.name }}</q-item-section>
               </q-item>
               <q-separator />
diff --git a/src/components/SkeletonTable.vue b/src/components/SkeletonTable.vue
index 652d9f4..ea9da21 100644
--- a/src/components/SkeletonTable.vue
+++ b/src/components/SkeletonTable.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from "vue";
+import { ref } from "vue";
 
 /** importType*/
 import type { QTableProps } from "quasar";
@@ -8,29 +8,55 @@ const columns = defineModel<QTableProps["columns"]>("columns", {
   required: true,
 });
 
-/** จำนวนคอลัมน์ */
-const skeletonColumns = computed(() => columns.value?.length || 5);
+const rows = ref<Array<{ id: string; name: string }>>([
+  {
+    id: "",
+    name: "",
+  },
+]);
 
 /** ตัวอย่างการใช้งาน */
 /// <SkeletonTable v-if="isLoading" :columns="columns" />
 </script>
 
 <template>
-  <q-markup-table flat bordered>
-    <thead>
-      <tr>
-        <th v-for="(n, idx) in skeletonColumns" :key="idx" style="width: 150px">
-          <q-skeleton type="text" />
-        </th>
-      </tr>
-    </thead>
+  <d-table
+    flat
+    bordered
+    :columns="columns"
+    :rows="rows"
+    row-key="id"
+    hide-pagination
+  >
+    <template v-slot:body="props">
+      <q-tr :props="props" class="cursor-pointer">
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <div>
+            <q-skeleton type="text" width="80px" />
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
 
-    <tbody>
-      <tr v-for="n in 5" :key="n" :class="n % 2 === 0 ? 'bg-grey-2' : ''">
-        <td v-for="(col, idx) in skeletonColumns" :key="idx">
-          <q-skeleton type="text" width="80px" />
-        </td>
-      </tr>
-    </tbody>
-  </q-markup-table>
+    <template v-slot:item="props">
+      <div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
+        <q-card bordered flat>
+          <q-list dense class="q-mt-lg relative-position">
+            <q-item v-for="col in props.cols" :key="col.name">
+              <q-item-section>
+                <q-item-label class="text-grey-6 text-weight-medium">{{
+                  col.label
+                }}</q-item-label>
+              </q-item-section>
+              <q-item-section>
+                <q-item-label class="text-dark text-weight-medium">
+                  <q-skeleton type="text" />
+                </q-item-label>
+              </q-item-section>
+            </q-item>
+          </q-list>
+        </q-card>
+      </div>
+    </template>
+  </d-table>
 </template>
diff --git a/src/components/TableD.vue b/src/components/TableD.vue
index b2c5823..a669956 100644
--- a/src/components/TableD.vue
+++ b/src/components/TableD.vue
@@ -10,13 +10,16 @@
     dense
     :pagination-label="paginationLabel"
     v-model:pagination="pagination"
+    @request="onRequest"
     :grid="!$q.screen.gt.xs"
     :rows-per-page-options="[10, 25, 50, 100]"
+    :loading="loading"
   >
     <template v-slot:pagination="scope">
-      ทั้งหมด {{ attrs.rows.length }} รายการ
+      ทั้งหมด {{ pagination.rowsNumber || attrs.rows.length }} รายการ
       <q-pagination
         v-model="pagination.page"
+        @update:model-value="handlePageChange"
         active-color="primary"
         color="dark"
         :max="scope.pagesNumber"
@@ -27,9 +30,25 @@
       ></q-pagination>
     </template>
 
-    <template v-for="(_, slot) in slots" v-slot:[slot]="scope">
+    <template v-for="(_, slot) in slots" v-slot:[slot]="scope" :key="slot">
       <slot :name="slot" v-bind="scope || {}" />
     </template>
+
+    <template v-slot:loading>
+      <q-inner-loading showing class="q-mt-lg">
+        <q-spinner-dots color="primary" size="40px" />
+      </q-inner-loading>
+    </template>
+
+    <template v-slot:no-data>
+      <div
+        v-if="!loading && attrs.rows.length === 0"
+        class="full-width row flex-center q-pa-sm rounded-borders text-weight-medium"
+      >
+        <span> ไม่พบข้อมูล </span>
+      </div>
+    </template>
+
     <!-- <template #item="props">
       <div class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
         <q-card bordered flat>
@@ -55,22 +74,45 @@
   </q-table>
 </template>
 <script setup lang="ts">
-import { ref, useAttrs, useSlots } from "vue";
+import { ref, useAttrs, useSlots, computed, watch } from "vue";
 const attrs = ref<any>(useAttrs());
 const slots = ref<any>(useSlots());
 
+const emit = defineEmits(["update:pagination", "request"]);
+
 const props = defineProps({
   paging: {
     type: Boolean,
-    defualt: false,
+    default: false,
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  pagination: {
+    type: Object,
+    default: () => ({
+      sortBy: "desc",
+      descending: false,
+      page: 1,
+      rowsPerPage: 10,
+      // rowsNumber: 0,
+    }),
   },
 });
 
-const pagination = ref({
-  sortBy: "desc",
-  descending: false,
-  page: 1,
-  rowsPerPage: 10,
+// Internal pagination state ที่จะจัดการเอง
+const internalPagination = ref({
+  ...props.pagination,
+});
+
+// ใช้ computed เพื่อ sync กับ props และ internal state
+const pagination = computed({
+  get: () => internalPagination.value,
+  set: (value) => {
+    internalPagination.value = { ...value };
+    emit("update:pagination", value);
+  },
 });
 
 const paginationLabel = (start: string, end: string, total: string) => {
@@ -78,6 +120,57 @@ const paginationLabel = (start: string, end: string, total: string) => {
     return " " + start + " ถึง " + end + " จากจำนวน " + total + " รายการ";
   else return start + "-" + end + " ใน " + total;
 };
+
+function onRequest(requestProp: any) {
+  if (!requestProp || !requestProp.pagination) {
+    return;
+  }
+
+  const { pagination: newPagination } = requestProp;
+
+  // ถ้าเป็นการเปลี่ยนหน้า (page หรือ rowsPerPage เปลี่ยน) ให้ยิง request
+  const isPageChange =
+    internalPagination.value.page !== newPagination.page ||
+    internalPagination.value.rowsPerPage !== newPagination.rowsPerPage;
+
+  internalPagination.value = {
+    ...internalPagination.value,
+    ...newPagination,
+  };
+
+  if (isPageChange) {
+    emit("request", requestProp);
+  }
+}
+
+function handlePageChange(newPage: number) {
+  if (!newPage || newPage < 1) {
+    return;
+  }
+
+  internalPagination.value = {
+    ...internalPagination.value,
+    page: newPage,
+  };
+
+  // สร้าง request object เหมือนกับ onRequest
+  const requestProp = {
+    pagination: internalPagination.value,
+    filter: null,
+    getCellValue: () => {},
+  };
+
+  emit("request", requestProp);
+}
+
+// Watch props เพื่ออัปเดต internal state เมื่อ parent เปลี่ยน
+watch(
+  () => props.pagination,
+  (newPagination) => {
+    internalPagination.value = { ...newPagination };
+  },
+  { deep: true, immediate: true }
+);
 </script>
 
 <style lang="scss">
@@ -113,5 +206,33 @@ const paginationLabel = (start: string, end: string, total: string) => {
     margin-bottom: 0 !important;
     min-height: 0px !important;
   }
+
+  // Loading styles
+  .loading-overlay {
+    width: 100%;
+  }
+
+  .loading-row {
+    background: white;
+  }
+
+  .loading-cell {
+    text-align: center;
+    padding: 60px 20px;
+    border: none;
+  }
+
+  .loading-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 16px;
+  }
+
+  .loading-text {
+    color: #666;
+    font-size: 14px;
+    font-weight: 500;
+  }
 }
 </style>
diff --git a/src/components/Workflow/Main.vue b/src/components/Workflow/Main.vue
index 6c5f5b4..209a9c2 100644
--- a/src/components/Workflow/Main.vue
+++ b/src/components/Workflow/Main.vue
@@ -10,7 +10,6 @@ import type { Permission } from "@/components/Workflow/interface/index/Main";
 import type { DataListState } from "@/components/Workflow/interface/response/Main";
 
 import DialogSelectPerson from "@/components/Workflow/DialogSelectPerson.vue";
-import Keycloak from "keycloak-js";
 
 const $q = useQuasar();
 const { dialogConfirm, showLoader, hideLoader, messageError } =
@@ -31,6 +30,7 @@ const stateId = ref<string>(""); //id state ปัจุบัน
 const state = ref<number>(1); //state ปัจุบัน
 const isPermission = ref<boolean>(true); //การเข้าถึง Workflow
 const KeycloakId = ref<string>("");
+const isLoading = ref<boolean>(false); //สถานะการโหลดข้อมูล
 
 const permission = ref<Permission>({
   isChangeState: false, //ส่งไปยังผู้บังคับบัญชา/ผู้มีอำนาจ
@@ -48,6 +48,7 @@ const itemState = ref<DataListState[]>([]);
 
 /** ฟังก์ชันเรียกข้อมูล Workflow ที่อยู่ปัจุบัน*/
 async function fetchCheckState() {
+  isLoading.value = true;
   await http
     .post(config.API.workflow + `check-user-now`, {
       refId: id,
@@ -74,6 +75,9 @@ async function fetchCheckState() {
     })
     .catch(() => {
       isPermission.value = false;
+    })
+    .finally(() => {
+      isLoading.value = false;
     });
 }
 
@@ -129,7 +133,22 @@ defineExpose({
       <div class="q-pl-sm text-weight-bold text-dark">สถานะการดำเนินเรื่อง</div>
     </div>
     <div class="col-12"><q-separator /></div>
-    <q-card-section>
+    <q-card-section class="col-12 q-px-lg q-py-md" v-if="isLoading">
+      <q-timeline color="primary">
+        <q-timeline-entry
+          v-for="(step, index) in 4"
+          :key="index"
+          :icon="`mdi-numeric-${index + 1}`"
+          color="grey-4"
+        >
+          <template #title>
+            <q-skeleton type="rect" width="150px" height="20px" />
+          </template>
+        </q-timeline-entry>
+      </q-timeline>
+    </q-card-section>
+
+    <q-card-section v-else>
       <div class="q-px-lg q-py-md">
         <q-timeline color="primary">
           <q-timeline-entry
diff --git a/src/interface/PropsTable.ts b/src/interface/PropsTable.ts
new file mode 100644
index 0000000..b9d4fe0
--- /dev/null
+++ b/src/interface/PropsTable.ts
@@ -0,0 +1,36 @@
+/** Namespace สำหรับ Table-related types */
+export namespace PropsTable {
+  /** Interface สำหรับ pagination object */
+  export interface Pagination {
+    /** หน้าปัจจุบัน (เริ่มจาก 1) */
+    page: number;
+    /** จำนวนแถวต่อหน้า */
+    rowsPerPage: number;
+    /** จำนวนแถวทั้งหมด */
+    rowsNumber?: number;
+    /** คอลัมน์ที่ใช้ sort */
+    sortBy?: string;
+    /** เรียงจากมากไปน้อย */
+    descending?: boolean;
+
+    rowsTotal?: number;
+  }
+
+  /** Interface สำหรับ request props จาก d-table */
+  export interface RequestProps {
+    /** ข้อมูล pagination */
+    pagination: Pagination;
+    /** ตัวกรองข้อมูล */
+    filter?: any;
+    /** function สำหรับดึงค่าจาก cell */
+    getCellValue?: (col: any, row: any) => any;
+  }
+
+  /** Union type สำหรับ handleRequest function */
+  export type HandleRequestProps = RequestProps;
+}
+
+// Export แบบเดิมเพื่อ backward compatibility
+export type TablePagination = PropsTable.Pagination;
+export type TableRequestProps = PropsTable.RequestProps;
+export type HandleRequestProps = PropsTable.HandleRequestProps;
diff --git a/src/modules/01_dashboard/interface/Main.ts b/src/modules/01_dashboard/interface/Main.ts
index faddc39..70cdcec 100644
--- a/src/modules/01_dashboard/interface/Main.ts
+++ b/src/modules/01_dashboard/interface/Main.ts
@@ -31,4 +31,11 @@ interface MenuMainList {
   active: boolean;
 }
 
-export type { InboxList, InboxDetail, MenuMainList };
+interface Attachments {
+  name: string;
+  url: string;
+  isReport: boolean;
+  isTemplate: boolean;
+}
+
+export type { InboxList, InboxDetail, MenuMainList, Attachments };
diff --git a/src/modules/01_dashboard/views/Dashboard.vue b/src/modules/01_dashboard/views/Dashboard.vue
index e3b32af..c1b5d02 100644
--- a/src/modules/01_dashboard/views/Dashboard.vue
+++ b/src/modules/01_dashboard/views/Dashboard.vue
@@ -26,8 +26,9 @@ const { showLoader, hideLoader, date2Thai, messageError } = mixin;
 const fullname = ref<string>(""); // ชื่อผู้ใช้
 const inboxList = ref<InboxDetail[]>([]); // รายการกล่องข้อความ
 const idInboxActive = ref<string>(); // Id ข้อความที่เลือก
-// รายการเมนูหลักของระบบ
+const isLoadingInbox = ref<boolean>(true); // สถานะการโหลดกล่องข้อความ
 
+// รายการเมนูหลักของระบบ
 const filteredItems = computed(() => {
   const isOfficer = dataStore.officerType === "OFFICER";
   const conditions: Record<string, boolean> = {
@@ -148,7 +149,10 @@ const items = ref<MenuMainList[]>([
  * @param index หน้าที่โหลดข้อมูล
  */
 const fetchlistInbox = async (index: number) => {
-  index === 1 && showLoader();
+  if (index === 1) {
+    isLoadingInbox.value = true; // เริ่มโหลดข้อมูลกล่องข้อความ
+  }
+
   index != 0 &&
     (await http
       .get(config.API.msgInbox + `?page=${index}&pageSize=${10}`)
@@ -173,7 +177,7 @@ const fetchlistInbox = async (index: number) => {
         }
       })
       .finally(() => {
-        hideLoader();
+        isLoadingInbox.value = false;
       }));
 };
 
@@ -249,11 +253,17 @@ const totalInbox = ref<number>(0); // จำนวนข้อความทั
  */
 async function onLoad(index: number, done: Function) {
   const num = index === 1 ? 0 : index++;
-  if (inboxList.value.length < totalInbox.value) {
-    setTimeout(() => {
-      fetchlistInbox(num);
-      done();
-    }, 3000);
+  try {
+    // ถ้าโหลดครบแล้ว ให้หยุด infinite scroll
+    if (inboxList.value.length >= totalInbox.value) {
+      done(true);
+      return;
+    }
+
+    await fetchlistInbox(num);
+    done();
+  } catch (error) {
+    done(true);
   }
 }
 
@@ -284,7 +294,16 @@ onMounted(async () => {
           v-for="(item, j) in filteredItems"
           :key="j"
         >
-          <q-card bordered @click="goToPage(item.path)" class="noactive col-12">
+          <q-card v-if="dataStore.isLoadingMenu" bordered class="col-12">
+            <q-skeleton width="100%" height="180px" />
+          </q-card>
+
+          <q-card
+            v-else
+            bordered
+            @click="goToPage(item.path)"
+            class="noactive col-12"
+          >
             <div class="col-12">
               <q-avatar
                 :color="item.color"
@@ -323,12 +342,28 @@ onMounted(async () => {
             กล่องข้อความ
           </div>
           <q-space />
-          <div class="text-grey-5" style="font-size: 12px">
+          <div v-if="isLoadingInbox">
+            <q-skeleton type="text" width="80px" />
+          </div>
+          <div v-else class="text-grey-5" style="font-size: 12px">
             ทั้งหมด {{ totalInbox }} ข้อความ
           </div>
         </div>
+
         <div
-          v-if="totalInbox != 0"
+          class="q-pa-sm"
+          v-if="isLoadingInbox"
+          style="height: calc(100% - 60px)"
+        >
+          <div v-for="(item, index) in 3">
+            <q-skeleton type="text" width="10%" class="text-subtitle1" />
+            <q-skeleton type="text" width="50%" class="text-subtitle1" />
+            <q-skeleton type="text" class="text-caption" />
+          </div>
+        </div>
+
+        <div
+          v-if="totalInbox != 0 && !isLoadingInbox"
           ref="scrollTargetRef"
           style="max-height: 90%; overflow: auto"
         >
@@ -400,7 +435,11 @@ onMounted(async () => {
           </q-infinite-scroll>
         </div>
 
-        <q-banner rounded class="bg-amber-1 text-center q-mx-sm" v-else>
+        <q-banner
+          rounded
+          class="bg-amber-1 text-center q-mx-sm"
+          v-else-if="totalInbox === 0 && !isLoadingInbox"
+        >
           <div class="text-yellow-10">
             <q-icon
               name="mdi-alert-box"
diff --git a/src/modules/02_transfer/views/AddTransfer.vue b/src/modules/02_transfer/views/AddTransfer.vue
index 0d013b1..10adab8 100644
--- a/src/modules/02_transfer/views/AddTransfer.vue
+++ b/src/modules/02_transfer/views/AddTransfer.vue
@@ -15,7 +15,7 @@ const $q = useQuasar();
 const route = useRoute();
 const router = useRouter();
 const mixin = useCounterMixin();
-const { success, messageError, showLoader, hideLoader, dialogConfirm } = mixin;
+const { success, messageError, dialogConfirm ,showLoader,hideLoader} = mixin;
 
 const id = ref<string>(
   router.currentRoute.value.name === "addTransfer"
@@ -23,6 +23,7 @@ const id = ref<string>(
     : route.params.id.toString()
 ); //id path
 
+const isLoading = ref<boolean>(false);
 const files = ref<any>(); //ไฟล์
 const tranferOrg = ref<string>(""); //ชื่อหน่วยงานที่ขอโอนไป
 const noteReason = ref<string>(""); //เหตุผล
@@ -42,7 +43,7 @@ async function saveData() {
 
 /** ฟังก์ชั่นสร้างขอโอน */
 async function createTransfer() {
-  showLoader();
+  showLoader()
   const formData = new FormData();
   formData.append("Organization", tranferOrg.value);
   formData.append("Reason", noteReason.value);
@@ -51,14 +52,14 @@ async function createTransfer() {
     .post(config.API.listtransfer(), formData)
     .then((res) => {
       router.push(`/transfer/` + res.data.result);
+      hideLoader()
       success($q, "บันทึกข้อมูลสำเร็จ");
     })
     .catch((e) => {
       messageError($q, e);
+      hideLoader()
     })
-    .finally(() => {
-      hideLoader();
-    });
+    .finally(() => {});
 }
 
 /**
@@ -66,7 +67,7 @@ async function createTransfer() {
  * @param id ไอดีของข้อมูล
  */
 async function fecthDataTransfer(id: string) {
-  showLoader();
+  isLoading.value = true;
   await http
     .get(config.API.transferByid(id))
     .then((res: any) => {
@@ -74,13 +75,13 @@ async function fecthDataTransfer(id: string) {
       tranferOrg.value = data.organization;
       noteReason.value = data.reason;
       files.value = data.docs;
+      isLoading.value = false;
     })
     .catch((e: any) => {
       messageError($q, e);
+      isLoading.value = false;
     })
-    .finally(() => {
-      hideLoader();
-    });
+    .finally(() => {});
 }
 
 /**
@@ -129,6 +130,7 @@ onMounted(() => {
             <div class="row">
               <div class="col-12 row q-col-gutter-sm">
                 <q-input
+                  v-if="!isLoading"
                   :class="
                     routeName != 'addTransfer' ? 'col-12' : 'col-12 inputgreen'
                   "
@@ -140,8 +142,11 @@ onMounted(() => {
                   :readonly="routeName != 'addTransfer'"
                   :rules="[(val:string) => !!val || `${'กรุณากรอกหน่วยงานที่ขอโอนไป'}`]"
                 />
-
+                <div class="col-12" v-else>
+                  <q-skeleton type="QInput" height="40px" />
+                </div>
                 <q-input
+                  v-if="!isLoading"
                   :class="
                     routeName != 'addTransfer' ? 'col-12' : 'col-12 inputgreen'
                   "
@@ -154,7 +159,9 @@ onMounted(() => {
                   :readonly="routeName != 'addTransfer'"
                   :rules="[(val:string) => !!val || `${'กรุณากรอกเหตุผล'}`]"
                 />
-
+                <div class="col-12" v-else>
+                  <q-skeleton type="QInput" height="120px" />
+                </div>
                 <div class="col-12 row" v-if="routeName == 'addTransfer'">
                   <q-file
                     v-model="files"
diff --git a/src/modules/02_transfer/views/Main.vue b/src/modules/02_transfer/views/Main.vue
index 5d4c3b5..1d9f150 100644
--- a/src/modules/02_transfer/views/Main.vue
+++ b/src/modules/02_transfer/views/Main.vue
@@ -20,8 +20,7 @@ const mixin = useCounterMixin();
 const transferData = useTransferDataStore();
 
 const { statusText } = transferData;
-const { date2Thai, messageError, showLoader, hideLoader, onSearchDataTable } =
-  mixin;
+const { date2Thai, messageError, onSearchDataTable } = mixin;
 
 const pagination = ref({
   sortBy: "desc",
@@ -30,6 +29,7 @@ const pagination = ref({
   rowsPerPage: 10,
 });
 
+const isLoading = ref<boolean>(false);
 const rows = ref<TransferMain[]>([]);
 const rowsData = ref<TransferMain[]>([]);
 const filter = ref<string>("");
@@ -120,7 +120,7 @@ const columns = ref<QTableProps["columns"]>([
 
 //นำข้อมูลมาแสดง
 async function fecthListTransfer() {
-  showLoader();
+  isLoading.value = true;
   await http
     .get(config.API.listUserTransfer())
     .then((res) => {
@@ -139,12 +139,11 @@ async function fecthListTransfer() {
       }));
       rows.value = listData;
       rowsData.value = listData;
+      isLoading.value = false;
     })
     .catch((e: any) => {
       messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
+      isLoading.value = false;
     });
 }
 
@@ -251,27 +250,13 @@ onMounted(async () => {
               dense
               :paging="true"
               row-key="id"
-              class="custom-table2"
-              style="max-height: 80vh"
               :rows="rows"
               :columns="columns"
               :visible-columns="visibleColumns"
               :rows-per-page-options="[10, 25, 50, 100]"
-              v-model:pagination="pagination"
+              :pagination="pagination"
+              :loading="isLoading"
             >
-              <template v-slot:pagination="scope">
-                ทั้งหมด {{ rows.length }} รายการ
-                <q-pagination
-                  v-model="pagination.page"
-                  active-color="primary"
-                  color="dark"
-                  :max="scope.pagesNumber"
-                  :max-pages="5"
-                  size="sm"
-                  boundary-links
-                  direction-links
-                ></q-pagination>
-              </template>
               <template v-slot:header="props">
                 <q-tr :props="props">
                   <q-th
@@ -345,4 +330,5 @@ onMounted(async () => {
     </div>
   </div>
 </template>
+
 <style scoped lang="scss"></style>
diff --git a/src/modules/03_retire/views/addRetire.vue b/src/modules/03_retire/views/addRetire.vue
index 64080f6..7cedc59 100644
--- a/src/modules/03_retire/views/addRetire.vue
+++ b/src/modules/03_retire/views/addRetire.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
-import { useQuasar } from "quasar";
+import { is, useQuasar } from "quasar";
 import type { QForm, QTableProps } from "quasar";
 import { useRouter, useRoute } from "vue-router";
 
@@ -20,6 +20,8 @@ import Dialog from "@/modules/03_retire/views/DialogRetire.vue";
 import Header from "@/components/DialogHeader.vue";
 import Workflow from "@/components/Workflow/Main.vue";
 
+
+
 const $q = useQuasar();
 const route = useRoute();
 const router = useRouter();
@@ -44,6 +46,7 @@ const id = ref<string>(
     ? route.params.id.toString()
     : ""
 ); //เก็บ id path
+const isLoad = ref<boolean>(false);
 const rowsApprover = ref<RowsType>();
 const myform = ref<QForm | null>(null); //form
 const tranferOrg = ref(""); //สถานที่ยื่นขอลาออกจากราชการ
@@ -201,7 +204,7 @@ function cancelResing() {
  * @param id ไอดีของข้อมูล
  */
 async function fectDataresign(id: string) {
-  showLoader();
+  isLoad.value = true;
   await http
     .get(config.API.resingByidType(link.value, id))
     .then((res) => {
@@ -225,13 +228,12 @@ async function fectDataresign(id: string) {
       };
       files.value = data.docs;
       dataDetail.value = data;
+      isLoad.value = false;
     })
     .catch((e) => {
       messageError($q, e);
     })
-    .finally(() => {
-      hideLoader();
-    });
+    .finally(() => {});
 }
 
 /**
@@ -318,6 +320,7 @@ onMounted(async () => {
 
           <div class="col-12 row q-col-gutter-sm q-pa-md">
             <q-input
+              v-if="!isLoad"
               :class="
                 routeName !== 'AddRetire'
                   ? 'col-md-9 col-xs-12'
@@ -332,7 +335,9 @@ onMounted(async () => {
               :readonly="routeName != 'AddRetire'"
               :rules="[(val:string) => !!val || `${'กรุณากรอกสถานที่ยื่นขอลาออกจากราชการ'}`]"
             />
-
+            <div class="col-md-9 col-xs-12 inputgreen" v-else>
+              <q-skeleton type="QInput" height="40px" />
+            </div>
             <!-- <datepicker
                     :class="
                       routeName !== 'AddRetire'
@@ -383,6 +388,7 @@ onMounted(async () => {
                   </datepicker> -->
 
             <datepicker
+              v-if="!isLoad"
               :class="
                 routeName !== 'AddRetire'
                   ? 'col-md-3 col-xs-12'
@@ -428,7 +434,11 @@ onMounted(async () => {
                 </q-input>
               </template>
             </datepicker>
+            <div v-else class="col-md-3 col-xs-12">
+              <q-skeleton type="QInput" height="40px" />
+            </div>
             <q-select
+              v-if="!isLoad"
               v-model="noteReason"
               :class="
                 routeName !== 'AddRetire' ? 'col-12' : 'col-12 inputgreen'
@@ -448,6 +458,9 @@ onMounted(async () => {
                     ]"
             >
             </q-select>
+            <div v-else class="col-12">
+              <q-skeleton type="QInput" height="40px" />
+            </div>
             <q-input
               :class="
                 routeName !== 'AddRetire' ? 'col-12' : 'col-12 inputgreen'
@@ -604,6 +617,8 @@ onMounted(async () => {
                         :paging="true"
                         dense
                         :rows-per-page-options="[1, 25, 50, 100]"
+                        :pagination="{ page: 1, rowsPerPage: 10 }"
+                        :loading="isLoad"
                       >
                         <template v-slot:header="props">
                           <q-tr :props="props">
@@ -647,7 +662,6 @@ onMounted(async () => {
                   </q-card>
                 </div>
 
-                <!-- ผลการพิจารณาของผู้มีอำนาจ -->
                 <div class="col-12 row" v-if="routeName != 'AddRetire'">
                   <q-card bordered class="row col-12 text-dark q-mt-sm">
                     <div
@@ -662,7 +676,7 @@ onMounted(async () => {
                       <div class="col-12 row bg-white q-col-gutter-md">
                         <div class="col-xs-6 row items-start">
                           <div class="col-12 text-top">ชื่อ - นามสกุล</div>
-                          <div class="col-12 text-detail">
+                          <div class="col-12 text-detail" v-if="!isLoad">
                             {{
                               rowsApprover &&
                               rowsApprover.approvers &&
@@ -671,10 +685,11 @@ onMounted(async () => {
                                 : "-"
                             }}
                           </div>
+                          <q-skeleton v-else type="text" width="150px" />
                         </div>
                         <div class="col-xs-6 row items-start">
                           <div class="col-12 text-top">สถานะ</div>
-                          <div class="col-12 text-detail">
+                          <div v-if="!isLoad" class="col-12 text-detail">
                             {{
                               rowsApprover &&
                               rowsApprover.approvers &&
@@ -685,12 +700,13 @@ onMounted(async () => {
                                 : "-"
                             }}
                           </div>
+                          <q-skeleton v-else type="text" width="150px" />
                         </div>
                         <div class="col-xs-6 row items-start">
                           <div class="col-12 text-top">
                             วันสุดท้ายที่ยับยั้ง
                           </div>
-                          <div class="col-12 text-detail">
+                          <div v-if="!isLoad" class="col-12 text-detail">
                             {{
                               rowsApprover &&
                               rowsApprover.approvers &&
@@ -701,12 +717,13 @@ onMounted(async () => {
                                 : "-"
                             }}
                           </div>
+                          <q-skeleton v-else type="text" width="150px" />
                         </div>
                         <div class="col-xs-12 row items-start">
                           <div class="col-12 text-top">
                             ความคิดเห็นและเหตุผล
                           </div>
-                          <div class="col-12 text-detail">
+                          <div v-if="!isLoad" class="col-12 text-detail">
                             {{
                               rowsApprover &&
                               rowsApprover.approvers &&
@@ -715,6 +732,7 @@ onMounted(async () => {
                                 : "-"
                             }}
                           </div>
+                          <q-skeleton v-else type="text" width="150px" />
                         </div>
                       </div>
                     </div>
@@ -760,6 +778,8 @@ onMounted(async () => {
                         :paging="true"
                         dense
                         :rows-per-page-options="[1, 25, 50, 100]"
+                        :pagination="{ page: 1, rowsPerPage: 10 }"
+                        :loading="isLoad"
                       >
                         <template v-slot:header="props">
                           <q-tr :props="props">
@@ -803,7 +823,6 @@ onMounted(async () => {
                   </q-card>
                 </div>
 
-                <!-- ผลการพิจารณาของผู้มีอำนาจ -->
                 <div class="col-12 row" v-if="routeName != 'AddRetire'">
                   <q-card bordered class="row col-12 text-dark q-mt-sm">
                     <div
diff --git a/src/modules/03_retire/views/main.vue b/src/modules/03_retire/views/main.vue
index 5ef5e4b..118c2a1 100644
--- a/src/modules/03_retire/views/main.vue
+++ b/src/modules/03_retire/views/main.vue
@@ -20,11 +20,13 @@ const router = useRouter();
 const link = ref<string>("");
 const dataStore = useDataStore();
 const mixin = useCounterMixin();
-const { date2Thai, messageError, showLoader, hideLoader } = mixin;
+const { date2Thai, messageError, onSearchDataTable } = mixin;
 const RestData = useRestDataStore();
 const { statusText } = RestData; //Func แปลง status to text
 
+const isLoad = ref<boolean>(false);
 const rows = ref<MainList[]>([]);
+const rowsData = ref<MainList[]>([]);
 const filter = ref<string>("");
 const pagination = ref({
   sortBy: "desc",
@@ -91,11 +93,12 @@ const columns = ref<QTableProps["columns"]>([
 
 /** ดึงข้อมูล */
 async function fectListleave() {
+  isLoad.value = true;
   await http
     .get(config.API.listUserByType(link.value))
     .then(async (res) => {
       let data = await res.data.result;
-      rows.value = data.map((e: MainListResponse) => ({
+      const list = data.map((e: MainListResponse) => ({
         id: e.id,
         placeLeave: e.location,
         dateStartLeave: date2Thai(e.sendDate),
@@ -103,9 +106,13 @@ async function fectListleave() {
         status: e.status,
         statustext: statusText(e.status),
       }));
+      rowsData.value = list;
+      rows.value = list;
+      isLoad.value = false;
     })
     .catch((e: any) => {
       messageError($q, e);
+      isLoad.value = false;
     })
     .finally(() => {});
 }
@@ -117,10 +124,13 @@ async function clickAdd() {
   router.push(`/retire/add`);
 }
 
-/** ทำก่อน mounted */
-onBeforeMount(() => {
-  showLoader();
-});
+function onSearch() {
+  rows.value = onSearchDataTable(
+    filter.value,
+    rowsData.value,
+    columns.value ? columns.value : []
+  );
+}
 
 /**
  * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
@@ -128,7 +138,6 @@ onBeforeMount(() => {
 onMounted(async () => {
   link.value = await dataStore.getProFileType();
   await fectListleave();
-  hideLoader();
 });
 </script>
 <template>
@@ -161,15 +170,10 @@ onMounted(async () => {
                 debounce="300"
                 placeholder="ค้นหา"
                 style="max-width: 200px"
+                @keydown.enter.prevent="onSearch"
               >
                 <template v-slot:append>
-                  <q-icon v-if="filter == ''" name="search" />
-                  <q-icon
-                    v-if="filter !== ''"
-                    name="clear"
-                    class="cursor-pointer"
-                    @click="filter = ''"
-                  />
+                  <q-icon name="search" />
                 </template>
               </q-input>
               <!-- แสดงคอลัมน์ใน table -->
@@ -193,7 +197,7 @@ onMounted(async () => {
           </div>
           <div>
             <d-table
-              flat
+              fla
               bordered
               dense
               row-key="id"
@@ -202,20 +206,8 @@ onMounted(async () => {
               :visible-columns="visibleColumns"
               :rows-per-page-options="[10, 25, 50, 100]"
               v-model:pagination="pagination"
+              :loading="isLoad"
             >
-              <template v-slot:pagination="scope">
-                ทั้งหมด {{ rows.length }} รายการ
-                <q-pagination
-                  v-model="pagination.page"
-                  active-color="primary"
-                  color="dark"
-                  :max="scope.pagesNumber"
-                  :max-pages="5"
-                  size="sm"
-                  boundary-links
-                  direction-links
-                ></q-pagination>
-              </template>
               <template v-slot:header="props">
                 <q-tr :props="props">
                   <q-th
diff --git a/src/modules/05_leave/components/Calendar.vue b/src/modules/05_leave/components/Calendar.vue
index 7150f73..572fded 100644
--- a/src/modules/05_leave/components/Calendar.vue
+++ b/src/modules/05_leave/components/Calendar.vue
@@ -26,7 +26,7 @@ import DialogDetail from "@/modules/05_leave/components/DialogDetail.vue";
 const $q = useQuasar();
 const store = useLeaveStore();
 const mixin = useCounterMixin();
-const { showLoader, hideLoader, messageError, monthYear2Thai } = mixin;
+const { messageError, monthYear2Thai } = mixin;
 const emit = defineEmits(["update:dateYear"]);
 
 const mainData = ref<DataCalendar[]>([]);
@@ -37,10 +37,10 @@ const leaveId = ref<string>("");
 /** filter calendar left */
 const filterLists = ref<any>([]);
 const filterVal = ref<any>([keycloakId.value]);
+const isLoading = ref<boolean>(false);
+const isLoadingHoliday = ref<boolean>(false);
 
-/**
- * Option ของปฏิทิน
- */
+/** Option ของปฏิทิน */
 const fullCalendar = ref<any>(); //ref calendar
 const calendarOptions = ref<any>({
   plugins: [
@@ -76,6 +76,7 @@ const dateMonth = ref<DataDateMonthObject>({
 
 /** function เรียกข้อมูล calendar*/
 async function fetchDataCalendar() {
+  isLoading.value = true;
   await http
     .post(config.API.leaveCalendar(), {
       year: dateMonth.value.year,
@@ -119,6 +120,9 @@ async function fetchDataCalendar() {
     })
     .catch((err) => {
       messageError($q, err);
+    })
+    .finally(() => {
+      isLoading.value = false;
     });
 }
 
@@ -126,6 +130,7 @@ async function fetchDataCalendar() {
  * fetch วันหยุดในปฏิทิน
  */
 async function fetchData() {
+  isLoadingHoliday.value = true;
   await http
     .get(
       config.API.listHolidayHistoryYearMonth(
@@ -154,6 +159,9 @@ async function fetchData() {
     })
     .catch((e) => {
       messageError($q, e);
+    })
+    .finally(() => {
+      isLoadingHoliday.value = false;
     });
 }
 
@@ -193,7 +201,6 @@ async function updateMonth() {
   } catch (error) {
     messageError($q, error);
   } finally {
-    hideLoader();
   }
 }
 
@@ -215,7 +222,6 @@ async function onClickClose() {
 watch(
   () => filterVal.value,
   async () => {
-    showLoader();
     const eventData = filterVal.value.map((item: any) => {
       return mainData.value
         .filter(
@@ -236,14 +242,13 @@ watch(
     const allEventData = [].concat(...eventData);
     calendarOptions.value.events = allEventData;
     await fetchData();
-    hideLoader();
   }
 );
 
 /**Hook */
 onMounted(async () => {
   try {
-    showLoader();
+    isLoading.value = true;
     // เรียกข้อมูล keycloakId
     const user = await tokenParsed();
     keycloakId.value = await (user ? user.sub : "");
@@ -253,7 +258,7 @@ onMounted(async () => {
   } catch (error) {
     messageError($q, error);
   } finally {
-    hideLoader();
+    isLoading.value = false;
   }
 });
 </script>
@@ -262,7 +267,19 @@ onMounted(async () => {
   <div class="row">
     <div class="col-xs-12 col-md-3 q-mt-sm q-pr-sm row">
       <q-card class="col-12" flat bordered>
-        <q-scroll-area style="height: 38vw">
+        <q-card-section v-if="isLoading">
+          <q-item>
+            <q-item-section avatar>
+              <q-skeleton type="QToggle" height="20px" width="25px" />
+            </q-item-section>
+
+            <q-item-section>
+              <q-skeleton type="text" class="text-subtitle1" />
+            </q-item-section>
+          </q-item>
+        </q-card-section>
+
+        <q-scroll-area style="height: 38vw" v-else>
           <div class="q-gutter-sm col-12">
             <q-list class="rounded-borders q-pt-sm" dense>
               <q-item
@@ -333,7 +350,13 @@ onMounted(async () => {
             </q-card>
 
             <div class="main-content">
+              <q-skeleton
+                height="100%"
+                square
+                v-if="isLoading || isLoadingHoliday"
+              />
               <FullCalendar
+                v-else
                 ref="fullCalendar"
                 class="demo-app-calendar"
                 :options="calendarOptions"
diff --git a/src/modules/05_leave/components/DialogDetail.vue b/src/modules/05_leave/components/DialogDetail.vue
index 1a37468..2c05ebd 100644
--- a/src/modules/05_leave/components/DialogDetail.vue
+++ b/src/modules/05_leave/components/DialogDetail.vue
@@ -164,6 +164,7 @@ const formDataCancle = reactive<FromCancelDetail>({
   leaveRangeEnd: "",
   leaveDirectorComment: "",
 });
+const isLoading = ref<boolean>(false);
 
 /** form ขอยกเลิก*/
 const formDelete = reactive<FormDelete>({
@@ -187,7 +188,7 @@ const formDeleteRef: FormDeleteRef = {
  * @param id การลา
  */
 async function fetchDataDetail(id: string) {
-  showLoader();
+  isLoading.value = true;
   await http
     .get(config.API.leaveUserId(id), {})
     .then((res) => {
@@ -280,7 +281,7 @@ async function fetchDataDetail(id: string) {
       messageError($q, err);
     })
     .finally(() => {
-      hideLoader();
+      isLoading.value = false;
     });
 }
 
@@ -308,10 +309,7 @@ function checkLeaveType(leaveTypeId: string) {
       checkForm.value = "FormHajj";
     } else if (type === "LV-007") {
       checkForm.value = "FormCheckSelect";
-    } else if (
-      type === "LV-008" &&
-      formData.leaveSubTypeName === "ศึกษาต่อ"
-    ) {
+    } else if (type === "LV-008" && formData.leaveSubTypeName === "ศึกษาต่อ") {
       checkForm.value = "FormStudy";
     } else if (
       (type === "LV-008" && formData.leaveSubTypeName === "ฝึกอบรม") ||
@@ -334,7 +332,7 @@ function checkLeaveType(leaveTypeId: string) {
  * @param id ยกเลิกการลา
  */
 async function fetchDataCancelDetail(id: string) {
-  showLoader();
+  isLoading.value = true;
   await http
     .get(config.API.leaveCancelById(id))
     .then((res) => {
@@ -362,7 +360,7 @@ async function fetchDataCancelDetail(id: string) {
       messageError($q, err);
     })
     .finally(() => {
-      hideLoader();
+      isLoading.value = false;
     });
 }
 
@@ -401,7 +399,8 @@ async function onSubmit() {
   formData.append("doc", formDelete.doc);
   await http
     .post(config.API.leaveCancelById(id), formData)
-    .then(() => {
+    .then(async () => {
+      await props.fetchDataTable?.();
       success($q, "บันทึกข้อมูลสำเร็จ");
       props.onClickClose?.();
     })
@@ -409,7 +408,6 @@ async function onSubmit() {
       messageError($q, err);
     })
     .finally(() => {
-      props.fetchDataTable?.();
       hideLoader();
     });
 }
@@ -443,8 +441,13 @@ watch(
       />
 
       <q-separator />
+      <q-card-section v-if="isLoading">
+        <div v-for="i in 10" :key="i">
+          <q-skeleton type="text" class="text-subtitle1" />
+        </div>
+      </q-card-section>
 
-      <q-card-section class="scroll" style="max-height: 60vh">
+      <q-card-section v-else class="scroll" style="max-height: 60vh">
         <div class="row">
           <div
             flat
@@ -571,6 +574,7 @@ watch(
           label="ยืนยัน"
           unelevated
           color="secondary"
+          :loading="isLoading"
           @click="onClickSave"
         />
       </q-card-section>
@@ -583,7 +587,12 @@ watch(
       />
 
       <q-separator />
-      <q-card-section class="q-p-md row q-gutter-y-md">
+      <q-card-section v-if="isLoading">
+        <div v-for="i in 10" :key="i">
+          <q-skeleton type="text" class="text-subtitle1" />
+        </div>
+      </q-card-section>
+      <q-card-section class="q-p-md row q-gutter-y-md" v-else>
         <div flat class="col-12">
           <div class="col-12 q-col-gutter-sm row items-center"></div>
           <FormCancel :data="formDataCancle" />
diff --git a/src/modules/05_leave/components/FormLeave/01_SickForm.vue b/src/modules/05_leave/components/FormLeave/01_SickForm.vue
index 42ebfc1..5f3759a 100644
--- a/src/modules/05_leave/components/FormLeave/01_SickForm.vue
+++ b/src/modules/05_leave/components/FormLeave/01_SickForm.vue
@@ -15,8 +15,7 @@ const typeForm = defineModel<string>("type", { required: true });
 const $q = useQuasar();
 const dataStore = useLeaveStore();
 const mixin = useCounterMixin();
-const { date2Thai, messageError, convertDateToAPI, showLoader, hideLoader } =
-  mixin;
+const { date2Thai, messageError, convertDateToAPI } = mixin;
 const edit = ref<boolean>(true);
 const leaveDocumentRef = ref<any>(null);
 
@@ -66,6 +65,8 @@ const leaveNumberRef = ref<object | null>(null);
 const leaveAddressRef = ref<object | null>(null);
 const leaveDetailRef = ref<object | null>(null);
 
+const isLoadLeaveDate = ref<boolean>(false);
+
 /** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
 const FormRef: FormRef = {
   leaveWrote: leaveWroteRef,
@@ -149,7 +150,7 @@ const checkDate = computed(() => {
 // const totalCheck = ref<number | null>(null);
 async function fetchCheck() {
   if (formDataSick.leaveStartDate && formDataSick.leaveEndDate) {
-    showLoader();
+    isLoadLeaveDate.value = true;
     await http
       .post(config.API.leaveCheck(), {
         type: dataStore.typeId ?? null,
@@ -177,11 +178,10 @@ async function fetchCheck() {
       .catch((e: any) => {
         messageError($q, e);
         // totalCheck.value = null;
-        hideLoader();
       })
       .finally(() => {
-        hideLoader();
         leaveDocumentRef.value.resetValidation();
+        isLoadLeaveDate.value = false;
       });
   }
 }
@@ -425,6 +425,7 @@ onMounted(() => {
                 v-model="formDataSick.leaveTotal"
                 label="จำนวนวันที่ลา (วัน)"
                 readonly
+                :loading="isLoadLeaveDate"
               >
                 <template v-slot:hint>
                   <span style="color: red">
@@ -626,8 +627,10 @@ onMounted(() => {
         :disable="!isLeave"
         class="q-px-md items-center btnBlue"
         label="บันทึก"
-        ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
+        :loading="isLoadLeaveDate"
       >
+        <q-tooltip>บันทึกแบบร่าง</q-tooltip>
+      </q-btn>
       <q-btn
         v-if="data && statusCheck != 'NEW'"
         id="onSubmit"
@@ -637,8 +640,10 @@ onMounted(() => {
         color="primary"
         label="ยื่นใบลา"
         @click="onConfirm()"
-        ><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
+        :loading="isLoadLeaveDate"
       >
+        <q-tooltip>ยื่นใบลา</q-tooltip>
+      </q-btn>
     </q-card-actions>
   </q-form>
 </template>
diff --git a/src/modules/05_leave/components/FormLeave/03_Birth.vue b/src/modules/05_leave/components/FormLeave/03_Birth.vue
index ce3533b..5b11938 100644
--- a/src/modules/05_leave/components/FormLeave/03_Birth.vue
+++ b/src/modules/05_leave/components/FormLeave/03_Birth.vue
@@ -13,14 +13,7 @@ import type { FormRef } from "@/modules/05_leave/interface/request/BirthForm";
 const $q = useQuasar();
 const dataStore = useLeaveStore();
 const mixin = useCounterMixin();
-const {
-  date2Thai,
-  dateToISO,
-  messageError,
-  convertDateToAPI,
-  showLoader,
-  hideLoader,
-} = mixin;
+const { date2Thai, messageError, convertDateToAPI } = mixin;
 
 const edit = ref<boolean>(true);
 const leaveId = ref<string>("");
@@ -45,6 +38,8 @@ const props = defineProps({
   },
 });
 
+const isLoadCheck = ref<boolean>(false);
+
 /** ข้อมูล v-model ของฟอร์ม */
 const formDataBirth = reactive<any>({
   type: dataStore.typeId,
@@ -145,14 +140,10 @@ const checkDate = computed(() => {
   }
 });
 
-/**
- * check ว่าลาได้ไหม จาก api
- * @param formData
- */
-// const totalCheck = ref<number | null>(null);
+/**  ตรวจสอบวันลา */
 async function fetchCheck() {
   if (formDataBirth.leaveStartDate && formDataBirth.leaveEndDate) {
-    showLoader();
+    isLoadCheck.value = true;
     const checkDate = computed(() => {
       if (
         convertDateToAPI(formDataBirth.leaveEndDate) ==
@@ -163,9 +154,7 @@ async function fetchCheck() {
         return false;
       }
     });
-    // console.log("checkDate.value", checkDate.value);
-    // console.log("formDataBirth.leaveRangeEnd", formDataBirth.leaveRangeEnd);
-    // console.log("formDataBirth.leaveRange", formDataBirth.leaveRange);
+
     await http
       .post(config.API.leaveCheck(), {
         type: dataStore.typeId ?? null,
@@ -176,11 +165,9 @@ async function fetchCheck() {
           ? formDataBirth.leaveRange
           : formDataBirth.leaveRangeEnd,
       })
-      .then((res: any) => {
-        hideLoader();
+      .then((res) => {
         const data = res.data.result;
         formDataBirth.leaveTotal = data.totalDate;
-        // totalCheck.value = data.totalDate;
         reasonLeave.value =
           data.message != ""
             ? data.message
@@ -189,10 +176,11 @@ async function fetchCheck() {
             : "ช่วงวันลาที่ระบุไม่ถูกต้อง";
         isLeave.value = formDataBirth.leaveTotal > 0 ? data.isLeave : false;
       })
-      .catch((e: any) => {
-        hideLoader();
-        // totalCheck.value = null;
+      .catch((e) => {
         messageError($q, e);
+      })
+      .finally(() => {
+        isLoadCheck.value = false;
       });
   }
 }
@@ -433,6 +421,7 @@ onMounted(() => {
                 v-model="formDataBirth.leaveTotal"
                 label="จำนวนวันที่ลา (วัน)"
                 readonly
+                :loading="isLoadCheck"
               >
                 <template v-slot:hint>
                   <span style="color: red">
@@ -596,30 +585,31 @@ onMounted(() => {
 
     <div class="row col-12 q-pt-md">
       <q-space />
-      <!-- <div v-if="totalCheck == 0" class="text-red q-mr-sm">**จำนวนวันลาของท่านไม่ถูกต้อง หรือวันที่ยื่นลาของท่านตรงกับวันหยุด</div> -->
       <q-btn
         v-if="!props.data || props.data.status == 'DRAFT'"
         id="onSubmit"
         type="submit"
         unelevated
-        dense
         :disable="!isLeave"
         class="q-px-md items-center btnBlue"
         label="บันทึก"
-        ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
+        :loading="isLoadCheck"
       >
+        <q-tooltip>บันทึกแบบร่าง</q-tooltip>
+      </q-btn>
       <q-btn
         v-if="data && statusCheck != 'NEW'"
         id="onSubmit"
         type="button"
         unelevated
-        dense
         class="q-px-md items-center q-ml-sm"
         color="primary"
         label="ยื่นใบลา"
         @click="onConfirm()"
-        ><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
+        :loading="isLoadCheck"
       >
+        <q-tooltip>ยื่นใบลา</q-tooltip>
+      </q-btn>
     </div>
   </form>
 </template>
diff --git a/src/modules/05_leave/components/FormLeave/04_HelpWifeBirthForm.vue b/src/modules/05_leave/components/FormLeave/04_HelpWifeBirthForm.vue
index e3e29fe..9f8739c 100644
--- a/src/modules/05_leave/components/FormLeave/04_HelpWifeBirthForm.vue
+++ b/src/modules/05_leave/components/FormLeave/04_HelpWifeBirthForm.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted, computed, watch } from "vue";
 import { useQuasar } from "quasar";
-import { useRouter } from "vue-router";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -14,17 +13,8 @@ import type { FormRef } from "@/modules/05_leave/interface/request/HelpWifeForm"
 const $q = useQuasar();
 const dataStore = useLeaveStore();
 const mixin = useCounterMixin();
-const {
-  date2Thai,
-  calculateDurationYmd,
-  dateToISO,
-  messageError,
-  convertDateToAPI,
-  showLoader,
-  hideLoader,
-} = mixin;
+const { date2Thai, messageError, convertDateToAPI } = mixin;
 
-const leaveText = ref<string>("");
 const edit = ref<boolean>(true);
 const leaveId = ref<string>("");
 
@@ -161,14 +151,12 @@ const checkDate = computed(() => {
   }
 });
 
-/**
- * check ว่าลาได้ไหม จาก api
- * @param formData
- */
-// const totalCheck = ref<number | null>(null);
+const isLoadCheck = ref<boolean>(false);
+
+/** fetchCheck ว่าลาได้ไหม จาก api */
 async function fetchCheck() {
   if (formDataHelpWife.leaveStartDate && formDataHelpWife.leaveEndDate) {
-    showLoader();
+    isLoadCheck.value = true;
     await http
       .post(config.API.leaveCheck(), {
         type: dataStore.typeId ?? null,
@@ -184,8 +172,6 @@ async function fetchCheck() {
         const data = res.data.result;
         formDataHelpWife.leaveTotal =
           data.totalDate - data.sumDateWork - data.sumDateHoliday;
-        // totalCheck.value =
-        //   data.totalDate - data.sumDateWork - data.sumDateHoliday;
         reasonLeave.value =
           data.message != ""
             ? data.message
@@ -193,23 +179,21 @@ async function fetchCheck() {
             ? "จำนวนวันลาเกินที่กำหนด"
             : "ช่วงวันลาที่ระบุไม่ถูกต้อง";
         isLeave.value = formDataHelpWife.leaveTotal > 0 ? data.isLeave : false;
-        hideLoader();
       })
-      .catch((e: any) => {
+      .catch((e) => {
         messageError($q, e);
-        // totalCheck.value = null;
-        hideLoader();
+      })
+      .finally(() => {
+        isLoadCheck.value = false;
       });
   }
 }
 
 /** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
-
 watch(
   () => props.data,
   async () => {
     if (props.data) {
-      // totalCheck.value = null;
       formDataHelpWife.leaveWrote = props.data.leaveWrote;
       formDataHelpWife.wifeDayName = props.data.wifeDayName;
       formDataHelpWife.wifeDayDateBorn = props.data.wifeDayDateBorn;
@@ -229,7 +213,6 @@ watch(
 /**Hook */
 onMounted(async () => {
   if (props.data) {
-    // totalCheck.value = null;
     formDataHelpWife.leaveWrote = props.data.leaveWrote;
     formDataHelpWife.wifeDayName = props.data.wifeDayName;
     formDataHelpWife.wifeDayDateBorn = props.data.wifeDayDateBorn;
@@ -438,6 +421,7 @@ onMounted(async () => {
                 v-model="formDataHelpWife.leaveTotal"
                 label="จำนวนวันที่ลา (วัน)"
                 readonly
+                :loading="isLoadCheck"
               >
                 <template v-slot:hint>
                   <span style="color: red">
@@ -656,24 +640,26 @@ onMounted(async () => {
         id="onSubmit"
         type="submit"
         unelevated
-        dense
         :disable="!isLeave"
         class="q-px-md items-center btnBlue"
         label="บันทึก"
-        ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
+        :loading="isLoadCheck"
       >
+        <q-tooltip>บันทึกแบบร่าง</q-tooltip>
+      </q-btn>
       <q-btn
         v-if="data && statusCheck != 'NEW'"
         id="onSubmit"
         type="button"
         unelevated
-        dense
         class="q-px-md items-center q-ml-sm"
         color="primary"
         label="ยื่นใบลา"
         @click="onConfirm()"
-        ><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
+        :loading="isLoadCheck"
       >
+        <q-tooltip>ยื่นใบลา</q-tooltip>
+      </q-btn>
     </div>
   </form>
 </template>
diff --git a/src/modules/05_leave/components/FormLeave/05_VacationForm.vue b/src/modules/05_leave/components/FormLeave/05_VacationForm.vue
index 8603957..87b440d 100644
--- a/src/modules/05_leave/components/FormLeave/05_VacationForm.vue
+++ b/src/modules/05_leave/components/FormLeave/05_VacationForm.vue
@@ -14,14 +14,7 @@ import type { DataOption } from "@/modules/14_IDP/interface/Main";
 const $q = useQuasar();
 const dataStore = useLeaveStore();
 const mixin = useCounterMixin();
-const {
-  date2Thai,
-  dateToISO,
-  messageError,
-  convertDateToAPI,
-  showLoader,
-  hideLoader,
-} = mixin;
+const { date2Thai, messageError, convertDateToAPI } = mixin;
 
 const edit = ref<boolean>(true);
 const leaveId = ref<string>("");
@@ -164,10 +157,11 @@ const checkDate = computed(() => {
   }
 });
 
-// const totalCheck = ref<number | null>(null);
+const isLoadCheck = ref<boolean>(false);
+
 async function fetchCheck() {
   if (formDataVacation.leaveStartDate && formDataVacation.leaveEndDate) {
-    showLoader();
+    isLoadCheck.value = true;
     await http
       .post(config.API.leaveCheck(), {
         type: dataStore.typeId ?? null,
@@ -183,8 +177,6 @@ async function fetchCheck() {
         const data = res.data.result;
         formDataVacation.leaveTotal =
           data.totalDate - data.sumDateWork - data.sumDateHoliday;
-        // totalCheck.value =
-        //   data.totalDate - data.sumDateWork - data.sumDateHoliday;
 
         reasonLeave.value =
           data.message != ""
@@ -193,12 +185,12 @@ async function fetchCheck() {
             ? "จำนวนวันลาเกินที่กำหนด"
             : "ช่วงวันลาที่ระบุไม่ถูกต้อง";
         isLeave.value = formDataVacation.leaveTotal > 0 ? data.isLeave : false;
-        hideLoader();
       })
       .catch((e: any) => {
         messageError($q, e);
-        // totalCheck.value = null;
-        hideLoader();
+      })
+      .finally(() => {
+        isLoadCheck.value = false;
       });
   }
 }
@@ -207,7 +199,6 @@ watch(
   () => props.data,
   () => {
     if (props.data) {
-      // totalCheck.value = null;
       formDataVacation.leaveWrote = props.data.leaveWrote;
       formDataVacation.restDayOldTotal = props.data.restDayOldTotal;
       formDataVacation.restDayCurrentTotal = props.data.restDayCurrentTotal;
@@ -456,6 +447,7 @@ onMounted(() => {
             v-model="formDataVacation.leaveTotal"
             label="จำนวนวันที่ลา (วัน)"
             readonly
+            :loading="isLoadCheck"
           >
             <template v-slot:hint>
               <span style="color: red">
@@ -630,30 +622,31 @@ onMounted(() => {
     <q-separator class="q-mt-sm" />
     <div class="row col-12 q-pt-md items-center">
       <q-space />
-      <!-- <div v-if="totalCheck == 0" class="text-red q-mr-sm">**จำนวนวันลาของท่านไม่ถูกต้อง หรือวันที่ยื่นลาของท่านตรงกับวันหยุด</div> -->
       <q-btn
         v-if="!props.data || props.data.status == 'DRAFT'"
         id="onSubmit"
         type="submit"
         unelevated
-        dense
         :disable="!isLeave"
         class="q-px-md items-center btnBlue"
         label="บันทึก"
-        ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
+        :loading="isLoadCheck"
       >
+        <q-tooltip>บันทึกแบบร่าง</q-tooltip>
+      </q-btn>
       <q-btn
         v-if="data && statusCheck != 'NEW'"
         id="onSubmit"
         type="button"
         unelevated
-        dense
         class="q-px-md items-center q-ml-sm"
         color="primary"
         label="ยื่นใบลา"
         @click="onConfirm()"
-        ><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
+        :loading="isLoadCheck"
       >
+        <q-tooltip>ยื่นใบลา</q-tooltip>
+      </q-btn>
     </div>
   </form>
 </template>
diff --git a/src/modules/05_leave/components/FormLeave/06_OrdinationForm.vue b/src/modules/05_leave/components/FormLeave/06_OrdinationForm.vue
index 64eeb67..64f6500 100644
--- a/src/modules/05_leave/components/FormLeave/06_OrdinationForm.vue
+++ b/src/modules/05_leave/components/FormLeave/06_OrdinationForm.vue
@@ -13,8 +13,7 @@ import type { OrdinationForm } from "@/modules/05_leave/interface/request/AddAbs
 const $q = useQuasar();
 const dataStore = useLeaveStore();
 const mixin = useCounterMixin();
-const { date2Thai, messageError, convertDateToAPI, showLoader, hideLoader } =
-  mixin;
+const { date2Thai, messageError, convertDateToAPI } = mixin;
 const edit = ref<boolean>(true);
 const leaveId = ref<string>("");
 /** รับ props มาจากหน้าหลัก */
@@ -179,14 +178,12 @@ const checkDate = computed(() => {
   }
 });
 
-/**
- * check ว่าลาได้ไหม จาก api
- * @param formData
- */
-//  const totalCheck = ref<number|null>(null)
+const isLoadCheck = ref<boolean>(false);
+
+/** check ว่าลาได้ไหม จาก api*/
 async function fetchCheck() {
   if (formDataOrdination.leaveStartDate && formDataOrdination.leaveEndDate) {
-    showLoader();
+    isLoadCheck.value = true;
     await http
       .post(config.API.leaveCheck(), {
         type: dataStore.typeId ?? null,
@@ -201,7 +198,6 @@ async function fetchCheck() {
       .then((res: any) => {
         const data = res.data.result;
         formDataOrdination.leaveTotal = data.totalDate;
-        // totalCheck.value = data.totalDate;
         reasonLeave.value =
           data.message != ""
             ? data.message
@@ -210,12 +206,12 @@ async function fetchCheck() {
             : "ช่วงวันลาที่ระบุไม่ถูกต้อง";
         isLeave.value =
           formDataOrdination.leaveTotal > 0 ? data.isLeave : false;
-        hideLoader();
       })
       .catch((e: any) => {
         messageError($q, e);
-        // totalCheck.value = null;
-        hideLoader();
+      })
+      .finally(() => {
+        isLoadCheck.value = false;
       });
   }
 }
@@ -488,6 +484,7 @@ onMounted(async () => {
                 v-model="formDataOrdination.leaveTotal"
                 label="จำนวนวันที่ลา (วัน)"
                 readonly
+                :loading="isLoadCheck"
               >
                 <template v-slot:hint>
                   <span style="color: red">
@@ -843,24 +840,26 @@ onMounted(async () => {
         id="onSubmit"
         type="submit"
         unelevated
-        dense
         class="q-px-md items-center btnBlue"
         label="บันทึก"
         :disable="!isLeave"
-        ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
+        :loading="isLoadCheck"
       >
+        <q-tooltip>บันทึกแบบร่าง</q-tooltip>
+      </q-btn>
       <q-btn
         v-if="data && statusCheck != 'NEW'"
         id="onSubmit"
         type="button"
         unelevated
-        dense
         class="q-px-md items-center q-ml-sm"
         color="primary"
         label="ยื่นใบลา"
         @click="onConfirm()"
-        ><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
+        :loading="isLoadCheck"
       >
+        <q-tooltip>ยื่นใบลา</q-tooltip>
+      </q-btn>
     </div>
   </form>
 </template>
diff --git a/src/modules/05_leave/components/FormLeave/07_HajjForm.vue b/src/modules/05_leave/components/FormLeave/07_HajjForm.vue
index b19441c..475c8a9 100644
--- a/src/modules/05_leave/components/FormLeave/07_HajjForm.vue
+++ b/src/modules/05_leave/components/FormLeave/07_HajjForm.vue
@@ -17,10 +17,8 @@ const {
   date2Thai,
   calculateDurationYmd,
   messageError,
-  dateToISO,
+
   convertDateToAPI,
-  showLoader,
-  hideLoader,
 } = mixin;
 
 const edit = ref<boolean>(true);
@@ -79,7 +77,6 @@ const formRef: HajiForm = {
 };
 
 /** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
-const nameFile = ref<string>("");
 const fileDocDataUpload = ref<File[]>([]);
 const fileUploadDoc = async (files: any) => {
   files.forEach((file: any) => {
@@ -145,10 +142,10 @@ const checkDate = computed(() => {
   }
 });
 
-// const totalCheck = ref<number | null>(null);
+const isLoadCheck = ref<boolean>(false);
 async function fetchCheck() {
   if (formDataHaji.leaveStartDate && formDataHaji.leaveEndDate) {
-    showLoader();
+    isLoadCheck.value = true;
     await http
       .post(config.API.leaveCheck(), {
         type: dataStore.typeId ?? null,
@@ -161,9 +158,7 @@ async function fetchCheck() {
       })
       .then((res: any) => {
         const data = res.data.result;
-        // isLeave.value = data.isLeave;
         formDataHaji.leaveTotal = data.totalDate;
-        // totalCheck.value = data.totalDate;
         leaveText.value = calculateDurationYmd(
           convertDateToAPI(formDataHaji.leaveStartDate),
           convertDateToAPI(formDataHaji.leaveEndDate)
@@ -175,12 +170,12 @@ async function fetchCheck() {
             ? "จำนวนวันลาเกินที่กำหนด"
             : "ช่วงวันลาที่ระบุไม่ถูกต้อง";
         isLeave.value = formDataHaji.leaveTotal > 0 ? data.isLeave : false;
-        hideLoader();
       })
       .catch((e: any) => {
         messageError($q, e);
-        // totalCheck.value = null;
-        hideLoader();
+      })
+      .finally(() => {
+        isLoadCheck.value = false;
       });
   }
 }
@@ -415,6 +410,7 @@ onMounted(async () => {
                 v-model="formDataHaji.leaveTotal"
                 label="จำนวนวันที่ลา (วัน)"
                 readonly
+                :loading="isLoadCheck"
               >
                 <template v-slot:hint>
                   <span style="color: red">
@@ -589,24 +585,26 @@ onMounted(async () => {
         id="onSubmit"
         type="submit"
         unelevated
-        dense
         class="q-px-md items-center btnBlue"
         label="บันทึก"
         :disable="!isLeave"
-        ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
+        :loading="isLoadCheck"
       >
+        <q-tooltip>บันทึกแบบร่าง</q-tooltip>
+      </q-btn>
       <q-btn
         v-if="data && statusCheck != 'NEW'"
         id="onSubmit"
         type="button"
         unelevated
-        dense
         class="q-px-md items-center q-ml-sm"
         color="primary"
         label="ยื่นใบลา"
         @click="onConfirm()"
-        ><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
+        :loading="isLoadCheck"
       >
+        <q-tooltip>ยื่นใบลา</q-tooltip>
+      </q-btn>
     </div>
   </form>
 </template>
diff --git a/src/modules/05_leave/components/FormLeave/08_MilitaryForm.vue b/src/modules/05_leave/components/FormLeave/08_MilitaryForm.vue
index 9f1d176..aa3b740 100644
--- a/src/modules/05_leave/components/FormLeave/08_MilitaryForm.vue
+++ b/src/modules/05_leave/components/FormLeave/08_MilitaryForm.vue
@@ -13,15 +13,8 @@ import type { MilitaryForm } from "@/modules/05_leave/interface/request/AddAbsen
 const dataStore = useLeaveStore();
 const $q = useQuasar();
 const mixin = useCounterMixin();
-const {
-  date2Thai,
-  calculateDurationYmd,
-  dateToISO,
-  messageError,
-  convertDateToAPI,
-  showLoader,
-  hideLoader,
-} = mixin;
+const { date2Thai, calculateDurationYmd, messageError, convertDateToAPI } =
+  mixin;
 const edit = ref<boolean>(true);
 const leaveId = ref<string>("");
 const leaveText = ref<string>("");
@@ -163,14 +156,12 @@ const checkDate = computed(() => {
   }
 });
 
-/**
- * check ว่าลาได้ไหม จาก api
- * @param formData
- */
-//  const totalCheck = ref<number|null>(null)
+const isLoadCheck = ref<boolean>(false);
+
+/** check ว่าลาได้ไหม จาก api*/
 async function fetchCheck() {
   if (formDataMilitary.leaveStartDate && formDataMilitary.leaveEndDate) {
-    showLoader();
+    isLoadCheck.value = true;
     await http
       .post(config.API.leaveCheck(), {
         type: dataStore.typeId ?? null,
@@ -186,35 +177,22 @@ async function fetchCheck() {
         const data = res.data.result;
         isLeave.value = data.isLeave;
         formDataMilitary.leaveTotal = data.totalDate;
-        // totalCheck.value = data.totalDate;
         leaveText.value = calculateDurationYmd(
           convertDateToAPI(formDataMilitary.leaveStartDate),
           convertDateToAPI(formDataMilitary.leaveEndDate)
         );
         reasonLeave.value =
           data.message != "" ? data.message : "จำนวนวันลาเกินที่กำหนด";
-
-        hideLoader();
       })
       .catch((e: any) => {
         messageError($q, e);
-        // totalCheck.value = null
-        hideLoader();
+      })
+      .finally(() => {
+        isLoadCheck.value = false;
       });
   }
 }
 
-// /**
-//  * function อัพเดทค่า LeaveTotal
-//  */
-// function updateLeaveTotal() {
-//   const newLeaveTotal = calculateDurationYmd(
-//     formDataMilitary.leaveStartDate,
-//     formDataMilitary.leaveEndDate
-//   );
-//   formDataMilitary.leaveTotal = newLeaveTotal;
-// }
-
 watch(
   () => props.data,
   async () => {
@@ -463,6 +441,7 @@ onMounted(async () => {
                 v-model="leaveText"
                 label="จำนวนวันที่ลา"
                 readonly
+                :loading="isLoadCheck"
               >
                 <template v-slot:hint>
                   <span style="color: red">
@@ -675,24 +654,26 @@ onMounted(async () => {
         id="onSubmit"
         type="submit"
         unelevated
-        dense
         class="q-px-md items-center btnBlue"
         label="บันทึก"
         :disable="!isLeave"
-        ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
+        :loading="isLoadCheck"
       >
+        <q-tooltip>บันทึกแบบร่าง</q-tooltip>
+      </q-btn>
       <q-btn
         v-if="data && statusCheck != 'NEW'"
         id="onSubmit"
         type="button"
         unelevated
-        dense
         class="q-px-md items-center q-ml-sm"
         color="primary"
         label="ยื่นใบลา"
         @click="onConfirm()"
-        ><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
+        :loading="isLoadCheck"
       >
+        <q-tooltip>ยื่นใบลา</q-tooltip>
+      </q-btn>
     </div>
   </form>
 </template>
diff --git a/src/modules/05_leave/components/FormLeave/09_StudyForm.vue b/src/modules/05_leave/components/FormLeave/09_StudyForm.vue
index df99247..4252799 100644
--- a/src/modules/05_leave/components/FormLeave/09_StudyForm.vue
+++ b/src/modules/05_leave/components/FormLeave/09_StudyForm.vue
@@ -16,12 +16,9 @@ const mixin = useCounterMixin();
 const {
   date2Thai,
   calculateDurationYmd,
-  dateToISO,
   messageError,
   arabicNumberToText,
   convertDateToAPI,
-  showLoader,
-  hideLoader,
 } = mixin;
 
 const leaveText = ref<string>("");
@@ -182,10 +179,10 @@ const checkDate = computed(() => {
   }
 });
 
-// const totalCheck = ref<number | null>(null);
+const isLoadCheck = ref<boolean>(false);
 async function fetchCheck() {
   if (formDataStudy.leaveStartDate && formDataStudy.leaveEndDate) {
-    showLoader();
+    isLoadCheck.value = true;
     await http
       .post(config.API.leaveCheck(), {
         type: dataStore.typeId ?? null,
@@ -200,7 +197,7 @@ async function fetchCheck() {
         const data = res.data.result;
         isLeave.value = data.isLeave;
         formDataStudy.leaveTotal = data.totalDate;
-        // totalCheck.value = data.totalDate;
+
         leaveText.value = calculateDurationYmd(
           convertDateToAPI(formDataStudy.leaveStartDate),
           convertDateToAPI(formDataStudy.leaveEndDate)
@@ -208,27 +205,16 @@ async function fetchCheck() {
         reasonLeave.value = data.message
           ? data.message
           : "จำนวนวันลาเกินที่กำหนด";
-        hideLoader();
       })
       .catch((e: any) => {
         messageError($q, e);
-        // totalCheck.value = null;
-        hideLoader();
+      })
+      .finally(() => {
+        isLoadCheck.value = false;
       });
   }
 }
 
-// /**
-//  * function อัพเดทค่า LeaveTotal
-//  */
-// function updateLeaveTotal() {
-//   const newLeaveTotal = calculateDurationYmd(
-//     formDataStudy.leaveStartDate,
-//     formDataStudy.leaveEndDate
-//   );
-//   formDataStudy.leaveTotal = newLeaveTotal;
-// }
-
 /** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
 watch(
   () => props.data,
@@ -490,6 +476,7 @@ onMounted(async () => {
                 v-model="leaveText"
                 label="มีกำหนด"
                 readonly
+                :loading="isLoadCheck"
               >
                 <template v-slot:hint>
                   <span style="color: red">
@@ -828,24 +815,26 @@ onMounted(async () => {
         id="onSubmit"
         type="submit"
         unelevated
-        dense
         class="q-px-md items-center btnBlue"
         label="บันทึก"
         :disable="!isLeave"
-        ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
+        :loading="isLoadCheck"
       >
+        <q-tooltip>บันทึกแบบร่าง</q-tooltip>
+      </q-btn>
       <q-btn
         v-if="data && statusCheck != 'NEW'"
         id="onSubmit"
         type="button"
         unelevated
-        dense
         class="q-px-md items-center q-ml-sm"
         color="primary"
         label="ยื่นใบลา"
         @click="onConfirm()"
-        ><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
+        :loading="isLoadCheck"
       >
+        <q-tooltip>ยื่นใบลา</q-tooltip>
+      </q-btn>
     </div>
   </form>
 </template>
diff --git a/src/modules/05_leave/components/FormLeave/10_TrainForm.vue b/src/modules/05_leave/components/FormLeave/10_TrainForm.vue
index 42553e9..9da1296 100644
--- a/src/modules/05_leave/components/FormLeave/10_TrainForm.vue
+++ b/src/modules/05_leave/components/FormLeave/10_TrainForm.vue
@@ -19,8 +19,6 @@ const {
   calculateDurationYmd,
   messageError,
   convertDateToAPI,
-  showLoader,
-  hideLoader,
 } = mixin;
 
 const leaveText = ref<string>("");
@@ -167,10 +165,11 @@ const checkDate = computed(() => {
   }
 });
 
-// const totalCheck = ref<number | null>(null);
+const isLoadCheck = ref<boolean>(false);
+
 async function fetchCheck() {
   if (formDataTrain.leaveStartDate && formDataTrain.leaveEndDate) {
-    showLoader();
+    isLoadCheck.value = true;
     await http
       .post(config.API.leaveCheck(), {
         type: dataStore.typeId ?? null,
@@ -185,7 +184,7 @@ async function fetchCheck() {
         const data = res.data.result;
         isLeave.value = data.isLeave;
         formDataTrain.leaveTotal = data.totalDate;
-        // totalCheck.value = data.totalDate;
+
         leaveText.value = calculateDurationYmd(
           convertDateToAPI(formDataTrain.leaveStartDate),
           convertDateToAPI(formDataTrain.leaveEndDate)
@@ -193,32 +192,20 @@ async function fetchCheck() {
         reasonLeave.value = data.message
           ? data.message
           : "จำนวนวันลาเกินที่กำหนด";
-        hideLoader();
       })
       .catch((e: any) => {
-        // totalCheck.value = null;
         messageError($q, e);
-        hideLoader();
+      })
+      .finally(() => {
+        isLoadCheck.value = false;
       });
   }
 }
 
-/**
- * function อัพเดทค่า LeaveTotal
- */
-function updateLeaveTotal() {
-  const newLeaveTotal = calculateDurationYmd(
-    formDataTrain.leaveStartDate,
-    formDataTrain.leaveEndDate
-  );
-  formDataTrain.leaveTotal = newLeaveTotal;
-}
-
 watch(
   () => props.data,
   async () => {
     if (props.data) {
-      // totalCheck.value = null;
       formDataTrain.leaveWrote = props.data.leaveWrote;
       formDataTrain.leaveStartDate = props.data.leaveStartDate;
       formDataTrain.leaveEndDate = props.data.leaveEndDate;
@@ -470,6 +457,7 @@ onMounted(async () => {
                 v-model="leaveText"
                 label="มีกำหนด"
                 readonly
+                :loading="isLoadCheck"
               >
                 <template v-slot:hint>
                   <span style="color: red">
@@ -789,24 +777,26 @@ onMounted(async () => {
         id="onSubmit"
         type="submit"
         unelevated
-        dense
         class="q-px-md items-center btnBlue"
         label="บันทึก"
         :disable="!isLeave"
-        ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
+        :loading="isLoadCheck"
       >
+        <q-tooltip>บันทึกแบบร่าง</q-tooltip>
+      </q-btn>
       <q-btn
         v-if="data && statusCheck != 'NEW'"
         id="onSubmit"
         type="button"
         unelevated
-        dense
         class="q-px-md items-center q-ml-sm"
         color="primary"
         label="ยื่นใบลา"
         @click="onConfirm()"
-        ><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
+        :loading="isLoadCheck"
       >
+        <q-tooltip>ยื่นใบลา</q-tooltip>
+      </q-btn>
     </div>
   </form>
 </template>
diff --git a/src/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue b/src/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue
index 1455a29..140a25d 100644
--- a/src/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue
+++ b/src/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { ref, reactive, watch, onMounted, computed } from "vue";
-import { useRouter } from "vue-router";
 import { useQuasar } from "quasar";
 
 import http from "@/plugins/http";
@@ -79,8 +78,6 @@ const FormRef: FormRef = {
 };
 
 /** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
-const nameFile = ref<string>("");
-const nameFileDraft = ref<string>("");
 const fileDocDataUpload = ref<File[]>([]);
 const fileUploadDoc = async (files: any) => {
   files.forEach((file: any) => {
@@ -171,12 +168,13 @@ const checkDate = computed(() => {
  * @param formData
  */
 const isLeave = ref<boolean>(true);
-// const totalCheck = ref<number|null>(null)
+const isLoadCheck = ref<boolean>(false);
 async function fetchCheck() {
   if (
     formDataWorkInternational.leaveStartDate &&
     formDataWorkInternational.leaveEndDate
   ) {
+    isLoadCheck.value = true;
     await http
       .post(config.API.leaveCheck(), {
         type: dataStore.typeId ?? null,
@@ -193,7 +191,6 @@ async function fetchCheck() {
         const data = res.data.result;
         isLeave.value = data.isLeave;
         formDataWorkInternational.leaveTotal = data.totalDate;
-        // totalCheck.value = data.totalDate;
         leaveText.value = calculateDurationYmd(
           convertDateToAPI(formDataWorkInternational.leaveStartDate),
           convertDateToAPI(formDataWorkInternational.leaveEndDate)
@@ -203,8 +200,10 @@ async function fetchCheck() {
           : "จำนวนวันลาเกินที่กำหนด";
       })
       .catch((e: any) => {
-        // totalCheck.value = null;
         messageError($q, e);
+      })
+      .finally(() => {
+        isLoadCheck.value = false;
       });
   }
 }
@@ -249,17 +248,17 @@ watch(
   }
 );
 
-watch(
-  () => formDataWorkInternational.leaveEndDate,
-  () => {
-    if (
-      formDataWorkInternational.leaveStartDate !== null &&
-      formDataWorkInternational.leaveEndDate !== null
-    ) {
-      fetchCheck();
-    }
-  }
-);
+// watch(
+//   () => formDataWorkInternational.leaveEndDate,
+//   () => {
+//     if (
+//       formDataWorkInternational.leaveStartDate !== null &&
+//       formDataWorkInternational.leaveEndDate !== null
+//     ) {
+//       fetchCheck();
+//     }
+//   }
+// );
 
 /**Hook */
 onMounted(async () => {
@@ -475,6 +474,7 @@ onMounted(async () => {
                 v-model="leaveText"
                 label="มีกำหนด"
                 readonly
+                :loading="isLoadCheck"
               >
                 <template v-slot:hint>
                   <span style="color: red">
@@ -644,24 +644,26 @@ onMounted(async () => {
           id="onSubmit"
           type="submit"
           unelevated
-          dense
           class="q-px-md items-center btnBlue"
           label="บันทึก"
           :disable="!isLeave"
-          ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
+          :loading="isLoadCheck"
         >
+          <q-tooltip>บันทึกแบบร่าง</q-tooltip>
+        </q-btn>
         <q-btn
           v-if="data && statusCheck != 'NEW'"
           id="onSubmit"
           type="button"
           unelevated
-          dense
           class="q-px-md items-center q-ml-sm"
           color="primary"
           label="ยื่นใบลา"
           @click="onConfirm()"
-          ><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
+          :loading="isLoadCheck"
         >
+          <q-tooltip>ยื่นใบลา</q-tooltip>
+        </q-btn>
       </div>
     </div>
   </form>
diff --git a/src/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue b/src/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue
index fc3785c..5dced28 100644
--- a/src/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue
+++ b/src/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue
@@ -4,7 +4,6 @@ import { useQuasar } from "quasar";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
-import { useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 import { useLeaveStore } from "@/modules/05_leave/store";
 
@@ -15,15 +14,8 @@ const dataStore = useLeaveStore();
 const $q = useQuasar();
 const mixin = useCounterMixin();
 
-const {
-  date2Thai,
-  calculateDurationYmd,
-  dateToISO,
-  messageError,
-  convertDateToAPI,
-  showLoader,
-  hideLoader,
-} = mixin;
+const { date2Thai, calculateDurationYmd, messageError, convertDateToAPI } =
+  mixin;
 
 const leaveText = ref<string>("");
 const edit = ref<boolean>(true);
@@ -209,13 +201,13 @@ const reasonLeave = ref<string>("");
  * @param formData
  */
 const isLeave = ref<boolean>(true);
-// const totalCheck = ref<number | null>(null);
+const isLoadCheck = ref<boolean>(false);
 async function fetchCheck() {
   if (
     formDataFollowSpouse.leaveStartDate &&
     formDataFollowSpouse.leaveEndDate
   ) {
-    showLoader();
+    isLoadCheck.value = true;
     await http
       .post(config.API.leaveCheck(), {
         type: dataStore.typeId ?? null,
@@ -241,12 +233,12 @@ async function fetchCheck() {
           ? data.message
           : "จำนวนวันลาเกินที่กำหนด";
         checkTotalHistory();
-        hideLoader();
       })
       .catch((e: any) => {
         messageError($q, e);
-        // totalCheck.value = null
-        hideLoader();
+      })
+      .finally(() => {
+        isLoadCheck.value = false;
       });
   }
 }
@@ -568,6 +560,7 @@ onMounted(async () => {
                 v-model="leaveText"
                 label="เป็นเวลา"
                 readonly
+                :loading="isLoadCheck"
               >
                 <template v-slot:hint>
                   <span style="color: red">
@@ -917,24 +910,26 @@ onMounted(async () => {
         id="onSubmit"
         type="submit"
         unelevated
-        dense
         class="q-px-md items-center btnBlue"
         label="บันทึก"
         :disable="!isLeave"
-        ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
+        :loading="isLoadCheck"
       >
+        <q-tooltip>บันทึกแบบร่าง</q-tooltip>
+      </q-btn>
       <q-btn
         v-if="data && statusCheck != 'NEW'"
         id="onSubmit"
         type="button"
         unelevated
-        dense
         class="q-px-md items-center q-ml-sm"
         color="primary"
         label="ยื่นใบลา"
         @click="onConfirm()"
-        ><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
+        :loading="isLoadCheck"
       >
+        <q-tooltip>ยื่นใบลา</q-tooltip>
+      </q-btn>
     </div>
   </form>
 </template>
diff --git a/src/modules/05_leave/components/FormLeave/13_RehabilitationForm.vue b/src/modules/05_leave/components/FormLeave/13_RehabilitationForm.vue
index bc17d96..0aba695 100644
--- a/src/modules/05_leave/components/FormLeave/13_RehabilitationForm.vue
+++ b/src/modules/05_leave/components/FormLeave/13_RehabilitationForm.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { reactive, ref, onMounted, computed, watch } from "vue";
-import { useQuasar } from "quasar";
+import { is, useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 
 import type { RehabilitationForm } from "@/modules/05_leave/interface/request/AddAbsence";
@@ -8,6 +8,7 @@ import { useLeaveStore } from "@/modules/05_leave/store";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import genReport from "@/plugins/genreport";
+import { load } from "@/router/loader";
 
 const $q = useQuasar();
 const dataStore = useLeaveStore();
@@ -125,17 +126,14 @@ const checkDate = computed(() => {
   }
 });
 
-/**
- * check ว่าลาได้ไหม จาก api
- * @param formData
- */
-//  const totalCheck = ref<number|null>(null)
+const isLoadCheck = ref<boolean>(false);
+/** check ว่าลาได้ไหม จาก api */
 async function fetchCheck() {
   if (
     formDataRehabilitation.leaveStartDate &&
     formDataRehabilitation.leaveEndDate
   ) {
-    showLoader();
+    isLoadCheck.value = true;
     await http
       .post(config.API.leaveCheck(), {
         type: dataStore.typeId ?? null,
@@ -167,7 +165,7 @@ async function fetchCheck() {
         // totalCheck.value = null
       })
       .finally(() => {
-        hideLoader();
+        isLoadCheck.value = false;
       });
   }
 }
@@ -438,6 +436,7 @@ onMounted(async () => {
                 v-model="leaveText"
                 label="เป็นเวลา"
                 readonly
+                :loading="isLoadCheck"
               >
                 <template v-slot:hint>
                   <span style="color: red">
@@ -600,24 +599,26 @@ onMounted(async () => {
           id="onSubmit"
           type="submit"
           unelevated
-          dense
           class="q-px-md items-center btnBlue"
           label="บันทึก"
           :disable="!isLeave"
-          ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
+          :loading="isLoadCheck"
         >
+          <q-tooltip>บันทึกแบบร่าง</q-tooltip>
+        </q-btn>
         <q-btn
           v-if="data && statusCheck != 'NEW'"
           id="onSubmit"
           type="button"
           unelevated
-          dense
           class="q-px-md items-center q-ml-sm"
           color="primary"
           label="ยื่นใบลา"
           @click="onConfirm()"
-          ><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
+          :loading="isLoadCheck"
         >
+          <q-tooltip>ยื่นใบลา</q-tooltip>
+        </q-btn>
       </div>
     </div>
   </q-form>
diff --git a/src/modules/05_leave/components/FormLeave/Form.vue b/src/modules/05_leave/components/FormLeave/Form.vue
index e0fd86a..db9bd7b 100644
--- a/src/modules/05_leave/components/FormLeave/Form.vue
+++ b/src/modules/05_leave/components/FormLeave/Form.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { onMounted, ref, watch } from "vue";
+import { ref } from "vue";
+import { useQuasar, type QTableProps } from "quasar";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -7,15 +8,16 @@ import { useCounterMixin } from "@/stores/mixin";
 import { useLeaveStore } from "@/modules/05_leave/store";
 import { useDataStore } from "@/stores/data";
 
-import DialogHeader from "@/components/DialogHeader.vue";
-import { useQuasar, type QTableProps } from "quasar";
+import type { PropsTable } from "@/interface/PropsTable";
+import type { DataCommander } from "@/modules/05_leave/interface/response/main";
 
-const mixin = useCounterMixin();
+import DialogHeader from "@/components/DialogHeader.vue";
+
+const $q = useQuasar();
 const dataStore = useLeaveStore();
 const storeData = useDataStore();
-const { date2Thai, showLoader, hideLoader, messageError } = mixin;
+const { date2Thai, messageError } = useCounterMixin();
 
-const modal = ref<boolean>(false);
 /** รับ props มาจากหน้าหลัก */
 const props = defineProps({
   model: {
@@ -24,20 +26,13 @@ const props = defineProps({
   },
 });
 
-const $q = useQuasar();
-const isAct = ref<boolean>(false);
-const search = ref<string>("");
-const total = ref<number>(0);
-const totalList = ref<number>(1);
-const pagination = ref({
-  sortBy: "createdAt",
-  descending: true,
-  page: 1,
-  rowsPerPage: 10,
-});
+const modal = ref<boolean>(false);
 
-const selected = ref<any[]>([]);
-const rows = ref<any[]>([]);
+const isAct = ref<boolean>(false);
+const selected = ref<DataCommander[]>([]);
+const search = ref<string>("");
+const isLoading = ref<boolean>(false);
+const rows = ref<DataCommander[]>([]);
 const columns = ref<QTableProps["columns"]>([
   {
     name: "posNo",
@@ -70,30 +65,17 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
 ]);
+const pagination = ref<PropsTable.Pagination>({
+  sortBy: "createdAt",
+  descending: true,
+  page: 1,
+  rowsPerPage: 10,
+  rowsNumber: 0,
+});
 
-function onPerson() {
-  modal.value = true;
-  getCommander();
-}
-
-function onSubmit() {
-  modal.value = false;
-  dataStore.dear = selected.value[0].firstName
-    ? `${selected.value[0].prefix}${selected.value[0].firstName} ${selected.value[0].lastName}`
-    : "";
-
-  dataStore.commanderPosition = selected.value[0].posExecutiveName;
-}
-
-function closeDialog() {
-  modal.value = false;
-  search.value = "";
-  rows.value = [];
-  selected.value = [];
-}
-
+/** ฟังก์ชันสำหรับดึงข้อมูลผู้บังคับบัญชา */
 async function getCommander() {
-  showLoader();
+  isLoading.value = true;
   await http
     .put(config.API.commanderOperate, {
       isAct: isAct.value,
@@ -107,37 +89,68 @@ async function getCommander() {
           : "employee",
     })
     .then((res) => {
-      rows.value = res.data.result.data;
+      const result = res.data.result;
+      rows.value = result.data;
+      pagination.value = {
+        ...pagination.value,
+        rowsNumber: result.total,
+      };
     })
     .catch((e) => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoading.value = false;
     });
 }
 
-function updatePagination(newPagination: any) {
-  pagination.value.page = 1;
-  pagination.value.rowsPerPage = newPagination.rowsPerPage;
+/*** ฟังก์ชันสำหรับเปิด Modal และดึงข้อมูลผู้บังคับบัญชา */
+function onPerson() {
+  modal.value = true;
+  getCommander();
 }
 
+/*** ฟังก์ชันสำหรับปิด Modal และล้างข้อมูล */
+function closeDialog() {
+  modal.value = false;
+  search.value = "";
+  rows.value = [];
+  selected.value = [];
+  pagination.value = {
+    sortBy: "createdAt",
+    descending: true,
+    page: 1,
+    rowsPerPage: 10,
+    rowsNumber: 0,
+  };
+}
+
+/** ฟังก์ชันสำหรับยืนยันการเลือกผู้บังคับบัญชา */
+function onSubmit() {
+  modal.value = false;
+  dataStore.dear = selected.value[0].firstName
+    ? `${selected.value[0].prefix}${selected.value[0].firstName} ${selected.value[0].lastName}`
+    : "";
+
+  dataStore.commanderPosition = selected.value[0].posExecutiveName;
+}
+
+/**
+ * ฟังก์ชันรับ request จากตาราง เมื่อมีการเปลี่ยน pagination
+ * @param requestProps ข้อมูลการร้องขอจากตาราง
+ */
+function onTableRequest(requestProps: PropsTable.RequestProps) {
+  const newPagination = requestProps?.pagination || requestProps;
+  if (!newPagination?.page || !newPagination?.rowsPerPage) return;
+  pagination.value = { ...newPagination };
+  getCommander();
+}
+
+/** ฟังก์ชันสำหรับค้นหาข้อมูล*/
 function getSearch() {
   pagination.value.page = 1;
   getCommander();
 }
-
-watch(
-  () => pagination.value.rowsPerPage,
-  async () => {
-    getSearch();
-  }
-);
-
-/**Hook */
-onMounted(() => {
-  dataStore.typeLeave = "";
-});
 </script>
 
 <template>
@@ -223,15 +236,6 @@ onMounted(() => {
         v-model="dataStore.typeLeave"
         label="เรื่อง"
       />
-      <!-- <q-input
-        class="col-12 col-sm-4"
-        dense
-        outlined
-        readonly
-        bg-color="white"
-        v-model="dataStore.commanderPosition"
-        label="เรียน"
-      /> -->
 
       <q-input
         class="col-12 col-sm-4"
@@ -311,7 +315,7 @@ onMounted(() => {
           <div class="row q-col-gutter-sm">
             <div class="col-12">
               <div class="row q-col-gutter-md items-start">
-                <div class="col-12 col-sm-4 col-md-4">
+                <div class="col-12 col-sm-6 col-md-4">
                   <q-input
                     v-model="search"
                     outlined
@@ -321,17 +325,20 @@ onMounted(() => {
                     @keydown.enter.prevent="getSearch()"
                   />
                 </div>
-                <q-checkbox
-                  keep-color
-                  v-model="isAct"
-                  label="แสดงเฉพาะรักษาการแทน"
-                  color="primary"
-                >
-                  <q-tooltip>แสดงเฉพาะรักษาการแทน </q-tooltip>
-                </q-checkbox>
-                <q-space />
+                <div class="col-12 col-sm-6 col-md-4">
+                  <q-checkbox
+                    keep-color
+                    v-model="isAct"
+                    label="แสดงเฉพาะรักษาการแทน"
+                    color="primary"
+                    @update:model-value="getSearch()"
+                  >
+                    <q-tooltip>แสดงเฉพาะรักษาการแทน </q-tooltip>
+                  </q-checkbox>
+                </div>
+                <q-space v-if="$q.screen.gt.sm" />
 
-                <div class="col-12 col-sm-6 col-md-3">
+                <div class="col-12 col-md-3">
                   <q-btn
                     color="primary"
                     icon="search"
@@ -356,24 +363,11 @@ onMounted(() => {
                 dense
                 :rows-per-page-options="[10, 25, 50, 100]"
                 selection="single"
-                @update:pagination="updatePagination"
+                v-model:pagination="pagination"
                 v-model:selected="selected"
+                :loading="isLoading"
+                @request="onTableRequest"
               >
-                <template v-slot:pagination="scope">
-                  ทั้งหมด {{ total }} รายการ
-                  <q-pagination
-                    v-model="pagination.page"
-                    active-color="primary"
-                    color="dark"
-                    :max="Number(totalList)"
-                    size="sm"
-                    boundary-links
-                    direction-links
-                    :max-pages="5"
-                    @update:model-value="getSearch"
-                  ></q-pagination>
-                </template>
-
                 <template v-slot:header-selection="scope">
                   <q-checkbox
                     keep-color
@@ -410,11 +404,7 @@ onMounted(() => {
                       :props="props"
                     >
                       <div v-if="col.name == 'no'">
-                        {{
-                          (pagination.page - 1) * pagination.rowsPerPage +
-                          props.rowIndex +
-                          1
-                        }}
+                        {{ props.rowIndex + 1 }}
                       </div>
                       <div v-else>
                         {{ col.value ? col.value : "-" }}
diff --git a/src/modules/05_leave/components/ListView.vue b/src/modules/05_leave/components/ListView.vue
index 8fbb085..3f4235a 100644
--- a/src/modules/05_leave/components/ListView.vue
+++ b/src/modules/05_leave/components/ListView.vue
@@ -30,6 +30,7 @@ const year = ref<number>(new Date().getFullYear());
 const type = ref<string>("00000000-0000-0000-0000-000000000000");
 const status = ref<string>("ALL");
 const filter = ref<string>("");
+const isLoading = ref<boolean>(false);
 
 /** pagination*/
 const maxPage = ref<number>(1);
@@ -38,7 +39,7 @@ const pageSize = ref<number>(10);
 const total = ref<number>(0);
 /** function เรียกข้อมูลการลา*/
 async function fetchDataTable() {
-  showLoader();
+  isLoading.value = true;
   const body = {
     year: year.value, //*ปีในการยื่นขอใบลา(ใช้เป็น คศ.)
     type: LeaveData.type, //*Id ประเภทการลา
@@ -59,7 +60,7 @@ async function fetchDataTable() {
       messageError($q, err);
     })
     .finally(() => {
-      hideLoader();
+      isLoading.value = false;
     });
 }
 
@@ -128,10 +129,10 @@ async function onClickClose() {
  */
 async function updateFilterTable(y: number, t: string, s: string, k: string) {
   if (t && s) {
-    year.value = await y;
-    type.value = await t;
-    status.value = await s;
-    filter.value = await k;
+    year.value = y;
+    type.value = t;
+    status.value = s;
+    filter.value = k;
     await fetchDataTable();
   }
 }
@@ -142,7 +143,7 @@ async function updateFilterTable(y: number, t: string, s: string, k: string) {
  * @param ps แถวต่อหน้า
  */
 async function updatePagination(p: number, ps: number) {
-  (page.value = await p), (pageSize.value = await ps);
+  (page.value = p), (pageSize.value = ps);
   await fetchDataTable();
 }
 
@@ -168,15 +169,8 @@ function convert(val: any) {
  * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
  */
 onMounted(async () => {
-  try {
-    showLoader();
-    await fectOptionType();
-    await fetchDataTable();
-  } catch (error) {
-    messageError($q, error);
-  } finally {
-    hideLoader();
-  }
+  await fectOptionType();
+  await fetchDataTable();
 });
 </script>
 <template>
@@ -194,6 +188,7 @@ onMounted(async () => {
     :pageSize="pageSize"
     :leaveType="leaveType"
     :total="total"
+    :isloadingData="isLoading"
   >
     <template #columns="props">
       <q-tr :props="props" class="cursor-pointer">
@@ -202,7 +197,7 @@ onMounted(async () => {
           :props="props"
           @click="onClickView(props.row.id, props.row.status)"
         >
-          {{ (page - 1) * pageSize + props.rowIndex + 1 }}
+          {{ props.rowIndex + 1 }}
         </q-td>
         <q-td
           key="leaveTypeName"
diff --git a/src/modules/05_leave/components/Table.vue b/src/modules/05_leave/components/Table.vue
index ad36ea9..4a11409 100644
--- a/src/modules/05_leave/components/Table.vue
+++ b/src/modules/05_leave/components/Table.vue
@@ -2,6 +2,7 @@
 import { ref, useAttrs, watch } from "vue";
 import { useQuasar } from "quasar";
 
+import type { PropsTable } from "@/interface/PropsTable";
 import { useLeaveStore } from "@/modules/05_leave/store";
 
 const $q = useQuasar();
@@ -15,7 +16,6 @@ const props = defineProps({
   pass: Number,
   notpass: Number,
   total: Number,
-
   name: String,
   icon: String,
   inputvisible: Array,
@@ -34,6 +34,10 @@ const props = defineProps({
     type: Object,
     require: true,
   },
+  isloadingData: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 /**
@@ -48,17 +52,28 @@ const emit = defineEmits([
 
 const table = ref<any>(null);
 
-/**
- * ตั้งค่า pagination
- */
+/** ตั้งค่า pagination*/
 const currentPage = ref<number>(1);
-const pagination = ref({
+
+const pagination = ref<PropsTable.Pagination>({
   sortBy: "dateSendLeave",
   descending: true,
   page: 1,
   rowsPerPage: Number(props.pageSize),
+
+  rowsNumber: Number(props.total),
 });
 
+// Watch props เพื่ออัปเดต pagination เมื่อค่าเปลี่ยน (เฉพาะ props)
+watch(
+  () => [props.pageSize, props.total],
+  ([newPageSize, newTotal]) => {
+    pagination.value.rowsPerPage = Number(newPageSize);
+    pagination.value.rowsNumber = Number(newTotal);
+  },
+  { immediate: true }
+);
+
 /** filter */
 const year = ref<number>(new Date().getFullYear());
 const filter = ref<string>("");
@@ -84,15 +99,17 @@ function updatePagination(p: number, ps: number) {
   emit("update:Pagination", p, ps);
 }
 
-/** function updatePageSize*/
-function updatePageSize(newPageSize: any) {
-  currentPage.value = 1;
-  pagination.value.rowsPerPage = newPageSize.rowsPerPage;
+/**
+ * ฟังก์ชันรับ request จากตาราง เมื่อมีการเปลี่ยน pagination
+ * @param requestProps ข้อมูลการร้องขอจากตาราง
+ */
+function onTableRequest(requestProps: PropsTable.RequestProps) {
+  const newPagination = requestProps?.pagination || requestProps;
+  if (!newPagination?.page || !newPagination?.rowsPerPage) return;
+  currentPage.value = newPagination.page;
+  pagination.value = { ...newPagination };
+  updatePagination(newPagination.page, newPagination.rowsPerPage);
 }
-
-watch([() => currentPage.value, () => pagination.value.rowsPerPage], () => {
-  updatePagination(currentPage.value, pagination.value.rowsPerPage);
-});
 </script>
 
 <template>
@@ -245,8 +262,9 @@ watch([() => currentPage.value, () => pagination.value.rowsPerPage], () => {
       dense
       :rows-per-page-options="[10, 25, 50, 100]"
       v-model:pagination="pagination"
-      @update:pagination="updatePageSize"
+      @request="onTableRequest"
       :grid="$q.screen.gt.xs ? false : true"
+      :loading="isloadingData"
     >
       <template v-slot:header="props">
         <q-tr :props="props">
@@ -255,18 +273,6 @@ watch([() => currentPage.value, () => pagination.value.rowsPerPage], () => {
           </q-th>
         </q-tr>
       </template>
-      <template v-slot:pagination="scope">
-        ทั้งหมด {{ props.total }} รายการ
-        <q-pagination
-          v-model="currentPage"
-          active-color="primary"
-          color="dark"
-          :max="Number(props.maxPage)"
-          size="sm"
-          boundary-links
-          direction-links
-        ></q-pagination>
-      </template>
       <template #body="props">
         <slot v-bind="props" name="columns"></slot>
       </template>
diff --git a/src/modules/05_leave/interface/response/main.ts b/src/modules/05_leave/interface/response/main.ts
new file mode 100644
index 0000000..f3fdb81
--- /dev/null
+++ b/src/modules/05_leave/interface/response/main.ts
@@ -0,0 +1,34 @@
+interface DataCommander {
+  actFullName: string;
+  actFullNameId: string;
+  actFullNameKeycloakId: string;
+  citizenId: string;
+  firstName: string;
+  id: string;
+  isDeputy: number;
+  isDirector: number;
+  isOfficer: boolean;
+  key: string;
+  keycloakId: string;
+  lastName: string;
+  orgChild1: string;
+  orgChild1Id: string;
+  orgChild2: string;
+  orgChild2Id: string;
+  orgChild3: string;
+  orgChild3Id: string;
+  orgChild4: string;
+  orgChild4Id: string;
+  orgRevisionId: string;
+  orgRoot: string;
+  orgRootId: string;
+  posExecutiveName: string;
+  posExecutiveNameOrg: string;
+  posLevel: string;
+  posNo: string;
+  posType: string;
+  position: string;
+  prefix: string;
+}
+
+export type { DataCommander };
diff --git a/src/modules/05_leave/store.ts b/src/modules/05_leave/store.ts
index 2ee8f9f..e56c9cd 100644
--- a/src/modules/05_leave/store.ts
+++ b/src/modules/05_leave/store.ts
@@ -28,6 +28,7 @@ export const useLeaveStore = defineStore("Leave", () => {
   const fiscalYearyear = ref<Number | null>(new Date().getFullYear());
   const rows = ref<ListLeaveTable[]>([]);
   const leaveTypeData = ref<TypeLeave[]>([]);
+  const isLoadingProfile = ref<boolean>(false); // สถานะการโหลดข้อมูลโปรไฟล์
 
   /**
    * function เรียกข้อมูลรายการลา Table
@@ -307,13 +308,15 @@ export const useLeaveStore = defineStore("Leave", () => {
 
   //ดึงข้อมูล profile จาก API
   async function fetchProfile() {
-    showLoader();
+    // showLoader();
+    isLoadingProfile.value = true;
     await http
       .post(config.API.leaveProfile(), { type: typeId.value })
       .then((res: any) => {
         const data = res.data.result;
         dateSendLeave.value = data.dateSendLeave;
         leaveTypeName.value = data.leaveTypeName;
+        typeLeave.value = data.leaveTypeName;
         fullName.value = data.fullName;
         positionName.value = data.positionName;
         positionLevelName.value = data.positionLevelName;
@@ -345,7 +348,8 @@ export const useLeaveStore = defineStore("Leave", () => {
         console.log(e);
       })
       .finally(() => {
-        hideLoader();
+        // hideLoader();
+        isLoadingProfile.value = false;
       });
   }
 
@@ -474,5 +478,6 @@ export const useLeaveStore = defineStore("Leave", () => {
     converstType,
 
     fetchLeaveTypeData,
+    isLoadingProfile,
   };
 });
diff --git a/src/modules/05_leave/views/AddPage.vue b/src/modules/05_leave/views/AddPage.vue
index 72dedf6..af1a538 100644
--- a/src/modules/05_leave/views/AddPage.vue
+++ b/src/modules/05_leave/views/AddPage.vue
@@ -106,6 +106,8 @@ function filterOptionFn(val: string, update: Function) {
 }
 
 onMounted(async () => {
+  dataStore.typeLeave = "";
+
   if (dataStore.options.length == 0) {
     await fectOptionType();
   }
@@ -209,11 +211,92 @@ onMounted(async () => {
                     ข้อมูลการลา
                   </div>
                 </div>
-                <FormPart2 :model="model" />
+                <q-card
+                  bordered
+                  class="q-pa-md bg-grey-1"
+                  v-if="dataStore.isLoadingProfile"
+                >
+                  <div class="row q-col-gutter-sm">
+                    <div class="col-12">
+                      <div class="row q-col-gutter-sm">
+                        <div class="col-md-4 col-xs-12">
+                          <q-skeleton height="40px" />
+                        </div>
+                        <div class="col-md-4 col-xs-12">
+                          <q-skeleton height="40px" />
+                        </div>
+                      </div>
+                    </div>
+                    <div class="col-md-6 col-xs-12">
+                      <q-skeleton height="40px" />
+                    </div>
+                    <div class="col-md-6 col-xs-12">
+                      <q-skeleton height="40px" />
+                    </div>
+                    <div class="col-md-4 col-xs-12">
+                      <q-skeleton height="40px" />
+                    </div>
+                    <div class="col-md-4 col-xs-12">
+                      <q-skeleton height="40px" />
+                    </div>
+                    <div class="col-md-4 col-xs-12">
+                      <q-skeleton height="40px" />
+                    </div>
+                    <div class="col-md-4 col-xs-12">
+                      <q-skeleton height="40px" />
+                    </div>
+                  </div>
+                </q-card>
+
+                <FormPart2 v-else :model="model" />
               </div>
             </div>
 
-            <div class="col-12">
+            <div class="col-12" v-if="dataStore.isLoadingProfile">
+              <div style="display: flex; align-items: center">
+                <q-icon
+                  name="mdi-numeric-3-circle"
+                  size="20px"
+                  color="primary"
+                />
+                <div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
+              </div>
+              <q-card bordered class="q-pa-md bg-grey-1">
+                <div class="row q-col-gutter-sm">
+                  <div class="col-12">
+                    <q-skeleton height="40px" />
+                  </div>
+                  <div class="col-12">
+                    <div class="row q-col-gutter-sm">
+                      <div class="col-md-3 col-xs-6">
+                        <q-skeleton height="40px" />
+                      </div>
+                      <div class="col-md-3 col-xs-6">
+                        <q-skeleton height="40px" />
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-12">
+                    <div class="row q-col-gutter-sm">
+                      <div class="col-md-3 col-xs-12">
+                        <q-skeleton height="40px" />
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-12">
+                    <q-skeleton height="40px" />
+                  </div>
+                  <div class="col-12">
+                    <q-skeleton height="120px" />
+                  </div>
+                  <div class="col-12">
+                    <q-skeleton height="40px" />
+                  </div>
+                </div>
+              </q-card>
+            </div>
+
+            <div class="col-12" v-else>
               <SickForm
                 v-if="model === 'LV-001' || model === 'LV-002'"
                 v-model:type="model"
diff --git a/src/modules/05_leave/views/EditPage.vue b/src/modules/05_leave/views/EditPage.vue
index 129a61c..e9f90a9 100644
--- a/src/modules/05_leave/views/EditPage.vue
+++ b/src/modules/05_leave/views/EditPage.vue
@@ -320,6 +320,8 @@ async function fectOptionType() {
  * เรียกใช้งาน fetchData เพื่อดึงข้อมูล
  */
 onMounted(async () => {
+  dataStore.typeLeave = "";
+
   if (dataStore.options.length == 0) {
     fectOptionType();
   }
diff --git a/src/modules/05_leave/views/Main.vue b/src/modules/05_leave/views/Main.vue
index 6628a59..4e36478 100644
--- a/src/modules/05_leave/views/Main.vue
+++ b/src/modules/05_leave/views/Main.vue
@@ -118,11 +118,11 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 
-const isloading = ref<boolean>(false);
+const isloadingSummary = ref<boolean>(false);
 
 /** function เรียกข้อมูลตารางสถิติการลา*/
 async function fetchStatsTable() {
-  isloading.value = true;
+  isloadingSummary.value = true;
   await http
     .get(config.API.leaveStats())
     .then((res) => {
@@ -171,11 +171,12 @@ async function fetchStatsTable() {
         leaveCountReject: e.leaveCountReject,
         leaveCountDelete: e.leaveCountDelete,
       }));
-      isloading.value = false;
     })
     .catch((err) => {
       messageError($q, err);
-      isloading.value = true;
+    })
+    .finally(() => {
+      isloadingSummary.value = false;
     });
 }
 
@@ -215,7 +216,7 @@ onMounted(async () => {
     <div class="col-xs-12 col-sm-12 col-md-11 row">
       <!-- สถิติการลา -->
       <div class="col-12 row q-pb-sm">
-        <q-card bordered class="col-12 row" v-if="!isloading">
+        <q-card bordered class="col-12 row" v-if="!isloadingSummary">
           <div class="row col-12 items-center q-px-md q-py-sm">
             <div class="text-weight-bold">สถิติการลา</div>
             <q-space />
@@ -278,6 +279,7 @@ onMounted(async () => {
               </q-card>
             </div>
           </div>
+
           <div class="col-6 row">
             <div
               bordered
diff --git a/src/modules/06_evaluate/components/EvaluateStepMain.vue b/src/modules/06_evaluate/components/EvaluateStepMain.vue
index a497936..638556c 100644
--- a/src/modules/06_evaluate/components/EvaluateStepMain.vue
+++ b/src/modules/06_evaluate/components/EvaluateStepMain.vue
@@ -198,7 +198,7 @@ const formDataStep1 = ref<PersonInformation>();
  * @param id id ประเมิน
  */
 async function fetchDataStep1(id: string) {
-  showLoader();
+  // showLoader();
   showLoadStatus.value = false;
   await http
     .get(config.API.evaluationCheckspecByid(id))
@@ -211,9 +211,6 @@ async function fetchDataStep1(id: string) {
     })
     .finally(() => {
       showLoadStatus.value = true;
-      setTimeout(() => {
-        hideLoader();
-      }, 3000);
     });
 }
 
@@ -581,7 +578,9 @@ async function saveStep7() {
     .then(() => {
       route.params.id && fetchCheckStep(route.params.id.toString());
     })
-    .catch(() => {})
+    .catch((err) => {
+      messageError($q, err);
+    })
     .finally(() => {
       hideLoader();
     });
diff --git a/src/modules/06_evaluate/components/ExpertPage.vue b/src/modules/06_evaluate/components/ExpertPage.vue
index 8779d66..29f1e27 100644
--- a/src/modules/06_evaluate/components/ExpertPage.vue
+++ b/src/modules/06_evaluate/components/ExpertPage.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { reactive, onMounted } from "vue";
+import { reactive, ref, onMounted } from "vue";
 import { useRouter } from "vue-router";
 import { useQuasar } from "quasar";
 
@@ -25,11 +25,12 @@ const formData = reactive<FormCommandSe>({
   commanderAbovePosition: "",
 });
 
-/**
- * ยืนยันการบันทึกข้อมูล
- */
+const isLoading = ref(false);
+
+/** ยืนยันการบันทึกข้อมูล */
 function onSubmit() {
-  dialogConfirm($q, () => {
+  dialogConfirm($q, async () => {
+    showLoader();
     const body = {
       ...formData,
       citizenId: dataPerson.formData.citizenId,
@@ -40,8 +41,7 @@ function onSubmit() {
       posNo: dataPerson.formData.posNo,
       birthDate: dataPerson.formData.birthDate,
     };
-    showLoader();
-    http
+    await http
       .post(config.API.evaluationExpertise, body)
       .then((res) => {
         router.push(`/evaluate/detail/expertise/${res.data.result.id}`);
@@ -55,12 +55,10 @@ function onSubmit() {
   });
 }
 
-/**
- * fetch รายชื่อ ผู้บังคับบัญชาชั้นต้น,
- */
-function getData() {
-  showLoader();
-  http
+/** ฟังก์ชันดึงข้อมูลรายชื่อ ผู้บังคับบัญชาชั้นต้น */
+async function getData() {
+  isLoading.value = true;
+  await http
     .get(config.API.orgSearchCommander())
     .then(async (res) => {
       const data = await res.data.result;
@@ -74,12 +72,12 @@ function getData() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoading.value = false;
     });
 }
 
-onMounted(() => {
-  getData();
+onMounted(async () => {
+  await getData();
 });
 </script>
 
@@ -103,7 +101,14 @@ onMounted(() => {
       </div>
       <div class="col-xs-12 col-sm-12 col-md-11 row q-col-gutter-md">
         <div class="col-12">
-          <q-card bordered>
+          <q-skeleton
+            v-if="isLoading"
+            height="230px"
+            square
+            style="border-radius: 8px"
+          />
+
+          <q-card bordered v-else>
             <div class="col-12 row q-pa-md q-col-gutter-y-md">
               <div class="col-12">
                 <q-card bordered class="col-12">
diff --git a/src/modules/06_evaluate/components/ExpertPageDetail.vue b/src/modules/06_evaluate/components/ExpertPageDetail.vue
index 22e5b8b..b6cf795 100644
--- a/src/modules/06_evaluate/components/ExpertPageDetail.vue
+++ b/src/modules/06_evaluate/components/ExpertPageDetail.vue
@@ -1,5 +1,6 @@
+divdivdiv
 <script setup lang="ts">
-import { ref, reactive, watch, onMounted } from "vue";
+import { ref, reactive, onMounted } from "vue";
 import { useRouter, useRoute } from "vue-router";
 import { useQuasar } from "quasar";
 import axios from "axios";
@@ -8,31 +9,24 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 import genReport from "@/plugins/genreport";
 import { useCounterMixin } from "@/stores/mixin";
-import { useDataStore } from "@/stores/data";
 
 import type {
-  FormRef,
   FormCommand,
   FormData,
 } from "@/modules/06_evaluate/interface/evalute";
 
 const $q = useQuasar();
 const mixin = useCounterMixin();
-const dataPerson = useDataStore();
 const {
-  dialogConfirm,
   messageError,
   showLoader,
   hideLoader,
-  date2Thai,
+
   success,
-  findOrgName,
 } = mixin;
 const router = useRouter();
 const route = useRoute();
-const currentYear = new Date().getFullYear();
 const evaluateId = ref<string>(route.params.id as string);
-let profile = ref<any>();
 
 /** form ผู้เซ็นเอกสาร*/
 const formCommand = reactive<FormCommand>({
@@ -82,8 +76,6 @@ const fileEvaluation3Ref = ref<object | null>(null);
 const fileEvaluation4Ref = ref<object | null>(null);
 const fileEvaluation5Ref = ref<object | null>(null);
 const fileEvaluation6Ref = ref<object | null>(null);
-const performanceRef = ref<object | null>(null);
-const performanceOwnerRef = ref<object | null>(null);
 
 const subjectRef = ref<Object | null>(null);
 const authorRef = ref<Object | null>(null);
@@ -92,22 +84,47 @@ const commanderPositionRef = ref<Object | null>(null);
 const commanderAboveFullnameRef = ref<Object | null>(null);
 const commanderAbovePositionRef = ref<Object | null>(null);
 
-/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
-const objectRef: FormRef = {
-  subject: subjectRef,
-  author: authorRef,
-  commanderFullname: commanderFullnameRef,
-  commanderPosition: commanderPositionRef,
-  commanderAboveFullname: commanderAboveFullnameRef,
-  commanderAbovePosition: commanderAbovePositionRef,
+const fileMapping = {
+  "1-แบบพิจารณาคุณสมบัติบุคคล": {
+    loading: "fileEvaluation1",
+  },
+  "2-แบบแสดงรายละเอียดการเสนอผลงาน": {
+    loading: "fileEvaluation2",
+  },
+  "3-แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก)":
+    { loading: "fileEvaluation3" },
+  "4-แบบประเมินคุณลักษณะบุคคล": {
+    loading: "fileEvaluation4",
+  },
+  "5-แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)": {
+    loading: "fileEvaluation5",
+  },
+  "6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)": {
+    loading: "fileEvaluation6",
+  },
 };
 
+const isLoading = ref<boolean>(false);
+const isLoadingFile = reactive({
+  fileEvaluation1: false,
+  fileEvaluation2: false,
+  fileEvaluation3: false,
+  fileEvaluation4: false,
+  fileEvaluation5: false,
+  fileEvaluation6: false,
+});
+
 /**
  * function ดาวน์โหลดไฟล์
  * @param fileName ชื่อไฟล์
  */
 async function downloadFile(fileName: string) {
-  showLoader();
+  const mapping = fileMapping[fileName as keyof typeof fileMapping];
+  if (!mapping) return;
+
+  const loadingKey = mapping.loading as keyof typeof isLoadingFile;
+  isLoadingFile[loadingKey] = true;
+
   await http
     .get(
       config.API.loadFileDocument(
@@ -117,66 +134,34 @@ async function downloadFile(fileName: string) {
       )
     )
     .then((res) => {
-      if (fileName === "1-แบบพิจารณาคุณสมบัติบุคคล") {
-        downloadFile1.value = res.data.downloadUrl;
-      } else if (fileName === "2-แบบแสดงรายละเอียดการเสนอผลงาน") {
-        downloadFile2.value = res.data.downloadUrl;
-      } else if (
-        fileName ===
-        "3-แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก)"
-      ) {
-        downloadFile3.value = res.data.downloadUrl;
-      } else if (fileName === "4-แบบประเมินคุณลักษณะบุคคล") {
-        downloadFile4.value = res.data.downloadUrl;
-      } else if (
-        fileName === "5-แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)"
-      ) {
-        downloadFile5.value = res.data.downloadUrl;
-      } else if (fileName === "6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)") {
-        downloadFile6.value = res.data.downloadUrl;
+      switch (fileName) {
+        case "1-แบบพิจารณาคุณสมบัติบุคคล":
+          downloadFile1.value = res.data.downloadUrl;
+          break;
+        case "2-แบบแสดงรายละเอียดการเสนอผลงาน":
+          downloadFile2.value = res.data.downloadUrl;
+          break;
+        case "3-แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก)":
+          downloadFile3.value = res.data.downloadUrl;
+          break;
+        case "4-แบบประเมินคุณลักษณะบุคคล":
+          downloadFile4.value = res.data.downloadUrl;
+          break;
+        case "5-แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)":
+          downloadFile5.value = res.data.downloadUrl;
+          break;
+        case "6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)":
+          downloadFile6.value = res.data.downloadUrl;
+          break;
       }
     })
     .finally(() => {
-      hideLoader();
+      isLoadingFile[loadingKey] = false;
     });
 }
 
-function onSubmit() {
-  dialogConfirm($q, () => {
-    showLoader();
-    http
-      .post(config.API.evaluationExpertise, formData)
-      .then((res) => {})
-      .catch((err) => {
-        messageError($q, err);
-      })
-      .finally(async () => {
-        await close();
-        await hideLoader();
-      });
-  });
-}
-
-/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
-function validateForm() {
-  const hasError = [];
-  for (const key in objectRef) {
-    if (Object.prototype.hasOwnProperty.call(objectRef, key)) {
-      const property = objectRef[key];
-      if (property.value && typeof property.value.validate === "function") {
-        const isValid = property.value.validate();
-        hasError.push(isValid);
-      }
-    }
-  }
-  if (hasError.every((result) => result === true)) {
-    onSubmit();
-  } else {
-  }
-}
-
 /**
- * funcion ดาวน์โหลดไฟล์
+ *  ดาวน์โหลดไฟล์
  * @param tp templatname
  * @param templateName
  * @param fileName ชือ่ไฟล์
@@ -187,156 +172,18 @@ async function onClickDowloadFile(
   fileName: string
 ) {
   showLoader();
-  // let educations: any = [];
-  // if (profile.value != null) {
-  //   profile.value.educations.map((e: any) => {
-  //     educations.push({
-  //       educationLevel: e.educationLevel ?? "",
-  //       finishYear:
-  //         e.finishDate == null
-  //           ? ""
-  //           : new Date(e.finishDate).getFullYear() + 543,
-  //       institute: e.institute ?? "",
-  //     });
-  //   });
-  // }
-  // let certificates: any = [];
-  // if (profile.value != null) {
-  //   profile.value.certificates.map((e: any) => {
-  //     certificates.push({
-  //       certificateNo: e.certificateNo ?? "",
-  //       certificateType: e.certificateType ?? "",
-  //       issuer: e.issuer ?? "",
-  //     });
-  //   });
-  // }
-  // let salaries: any = [];
-  // if (profile.value != null) {
-  //   profile.value.salaries.map((e: any) => {
-  //     salaries.push({
-  //       date: e.date == null ? "" : date2Thai(new Date(e.date)),
-  //       position: e.position ?? "",
-  //       amount: e.amount ?? "",
-  //     });
-  //   });
-  // }
-  // let trainings: any = [];
-  // if (profile.value != null) {
-  //   profile.value.trainings.map((e: any) => {
-  //     trainings.push({
-  //       yearly: e.yearly ?? "",
-  //       startDate: e.startDate == null ? "" : date2Thai(new Date(e.startDate)),
-  //       endDate: e.endDate == null ? "" : date2Thai(new Date(e.endDate)),
-  //       name: e.name ?? "",
-  //       topic: e.topic ?? "",
-  //     });
-  //   });
-  // }
-  // const data = Object.assign(
-  //   { educations: educations },
-  //   { certificates: certificates },
-  //   { salaries: salaries },
-  //   { trainings: trainings },
-  //   {
-  //     fullName: dataPerson.formData.firstName
-  //       ? `${dataPerson.formData.prefix}${dataPerson.formData.firstName} ${dataPerson.formData.lastName}`
-  //       : "",
-  //   },
-  //   {
-  //     position: dataPerson.formData.position
-  //       ? dataPerson.formData.position
-  //       : "",
-  //   },
-  //   {
-  //     positionLevel: dataPerson.formData.posLevelName
-  //       ? dataPerson.formData.posLevelName
-  //       : "",
-  //   },
-  //   { posNo: dataPerson.formData.posNo ? dataPerson.formData.posNo : "" },
-  //   { org: dataPerson.formData ? dataPerson.formData.org : "" },
-  //   {
-  //     birthDate: dataPerson.formData.birthDate
-  //       ? date2Thai(new Date(dataPerson.formData.birthDate))
-  //       : "",
-  //   },
-  //   {
-  //     govAge: profile.value.government
-  //       ? `${
-  //           profile.value.government.govAge.year !== 0
-  //             ? `${profile.value.government.govAge.year} ปี`
-  //             : ""
-  //         } ${
-  //           profile.value.government.govAge.month !== 0
-  //             ? `${profile.value.government.govAge.month} เดือน`
-  //             : ""
-  //         } ${
-  //           profile.value.government.govAge.day !== 0
-  //             ? `${profile.value.government.govAge.day} วัน`
-  //             : ""
-  //         }`
-  //       : ``,
-  //   },
-  //   {
-  //     positionLevelNew:
-  //       profile.value == null
-  //         ? ""
-  //         : profile.value.type == "EXPERT"
-  //         ? "ชำนาญการ"
-  //         : "ชำนาญการพิเศษ",
-  //   },
-
-  //   tp === "EV1_005"
-  //     ? { salary: dataPerson.formData.salary ? dataPerson.formData.salary : "" }
-  //     : null,
-
-  //   tp === "EV1_006"
-  //     ? {
-  //         years: {
-  //           lastTwoYear: toThaiNumber(currentYear - 2 + 543),
-  //           lastOneYear: toThaiNumber(currentYear - 1 + 543),
-  //           currentYear: toThaiNumber(currentYear + 543),
-  //         },
-  //       }
-  //     : null,
-  //   tp === "EV1_006" || tp === "EV1_008"
-  //     ? { commanderFullname: formData.commanderFullname }
-  //     : null,
-  //   tp === "EV1_006" || tp === "EV1_008"
-  //     ? { commanderPosition: formData.commanderPosition }
-  //     : null,
-  //   tp === "EV1_006" ? { commanderOrg: "" } : null,
-  //   tp === "EV1_006" || tp === "EV1_008"
-  //     ? { commanderAboveFullname: formData.commanderAboveFullname }
-  //     : null,
-  //   tp === "EV1_006" || tp === "EV1_008"
-  //     ? { commanderAbovePosition: formData.commanderAbovePosition }
-  //     : null,
-  //   tp === "EV1_006" ? { commanderAboveOrg: "" } : null,
-
-  //   tp === "EV1_007" ? { positionName: "-" } : null,
-  //   tp === "EV1_007" ? { positionLeaveName: "-" } : null,
-
-  //   tp === "EV1_009" ? { dateStart: dataPerson.formData.dateStart } : null,
-  //   tp === "EV1_009"
-  //     ? { dateRetireLaw: dataPerson.formData.dateRetireLaw }
-  //     : null,
-
-  //   tp === "EV1_010" ? { subject: formData.subject } : null,
-  //   { typeTh: "เชี่ยวชาญ" },
-  //   { posNoWithSym: `(${dataPerson.formData.posNo})` },
-  //   { orgNoNewLine: dataPerson.formData.org }
-  // );
-
-  const body = {
-    template: tp,
-    reportName: templateName,
-    data: reportData.value,
-  };
-  await genReport(body, fileName); //สร้างไฟล์ต้นแบบ
-}
-
-function toThaiNumber(input: number | string) {
-  return input.toString().replace(/\d/g, (d) => "๐๑๒๓๔๕๖๗๘๙"[parseInt(d)]);
+  try {
+    const body = {
+      template: tp,
+      reportName: templateName,
+      data: reportData.value,
+    };
+    await genReport(body, fileName); //สร้างไฟล์ต้นแบบ
+  } catch (error) {
+    messageError($q, error);
+  } finally {
+    hideLoader();
+  }
 }
 
 /**
@@ -409,8 +256,8 @@ async function uploadfile(uploadUrl: string, file: any) {
 }
 
 async function getData() {
-  showLoader();
-  http
+  isLoading.value = true;
+  await http
     .get(config.API.evaluationExpertise + `/${evaluateId.value}`)
     .then((res) => {
       const data = res.data.result;
@@ -424,747 +271,740 @@ async function getData() {
     })
     .catch((e) => {
       messageError($q, e);
-      hideLoader();
     })
-    .finally(() => {});
+    .finally(() => {
+      isLoading.value = false;
+    });
 }
 
-function getDetail(type: any) {
-  http.get(config.API.dataUserEvaByType(type)).then((res) => {
-    profile.value = {
-      ...profile.value, // รักษาข้อมูลเดิมที่เก็บไว้ก่อนหน้านี้
-      [type === "salary"
-        ? "salaries"
-        : type === "certificate"
-        ? "certificates"
-        : type === "training"
-        ? "trainings"
-        : type]: res.data.result, // เก็บข้อมูลตามประเภท (type)
-    };
-  });
-}
-
-const keyObject = ref<string[]>([
-  "educations",
-  "certificate",
-  "salary",
-  "training",
-  "assessments",
-  "government",
-]);
 const reportData = ref<any>();
 async function getCheckSpace() {
-  http
+  await http
     .get(config.API.evaluationReportCheckspecByid(evaluateId.value))
     .then((res) => {
       reportData.value = res.data.result;
     })
     .catch((e) => {
       messageError($q, e);
-      hideLoader();
-    })
-    .finally(() => {});
+    });
+}
+
+function fetchDataFile() {
+  Object.keys(fileMapping).forEach((fileName) => {
+    downloadFile(fileName);
+  });
 }
 
 onMounted(() => {
-  showLoader();
-  Promise.all([getData(), getCheckSpace(), ...keyObject.value.map(getDetail)])
-    .then(() => {})
-    .catch((e) => {
-      hideLoader();
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-
-  [
-    "1-แบบพิจารณาคุณสมบัติบุคคล",
-    "2-แบบแสดงรายละเอียดการเสนอผลงาน",
-    "3-แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก)",
-    "4-แบบประเมินคุณลักษณะบุคคล",
-    "5-แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)",
-    "6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)",
-  ].forEach((fileName) => downloadFile(fileName));
+  Promise.all([getData(), getCheckSpace(), fetchDataFile()]);
 });
 </script>
 
 <template>
-  <q-form @submit.prevent="validateForm">
-    <div class="col-12 row justify-center">
-      <div class="col-xs-12 col-sm-12 col-md-11 q-mb-sm">
-        <div class="toptitle text-white col-12 row items-center">
-          <q-btn
-            icon="mdi-arrow-left"
-            unelevated
-            round
-            dense
-            flat
-            color="primary"
-            class="q-mr-sm"
-            @click="router.push(`/evaluate`)"
-          />
-          <div>ประเมินเชี่ยวชาญ</div>
-        </div>
+  <div class="col-12 row justify-center">
+    <div class="col-xs-12 col-sm-12 col-md-11 q-mb-sm">
+      <div class="toptitle text-white col-12 row items-center">
+        <q-btn
+          icon="mdi-arrow-left"
+          unelevated
+          round
+          dense
+          flat
+          color="primary"
+          class="q-mr-sm"
+          @click="router.push(`/evaluate`)"
+        />
+        <div>ประเมินเชี่ยวชาญ</div>
       </div>
+    </div>
 
-      <div class="col-xs-12 col-sm-12 col-md-11 row q-col-gutter-md">
-        <div class="col-12">
-          <q-card bordered>
-            <div class="col-12 row q-pa-md q-col-gutter-y-md">
-              <div class="col-12">
-                <q-card bordered class="col-12">
-                  <div
-                    class="text-weight-medium bg-grey-1 col-12 q-py-sm q-px-md"
-                  >
-                    ผลงาน
-                    <br />
-                  </div>
-                  <div class="col-12"><q-separator /></div>
-                  <div class="col-12 q-pa-sm">
-                    <div class="row q-col-gutter-sm">
-                      <q-input
-                        ref="subjectRef"
-                        dense
-                        readonly
-                        class="col-xs-12 col-sm-6"
-                        outlined
-                        label="ชื่อผลงาน"
-                        v-model="formData.subject"
-                        :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อผลงาน'}`]"
-                        lazy-rules
-                        hide-bottom-space
-                      />
-                      <q-input
-                        ref="authorRef"
-                        class="col-xs-12 col-sm-6"
-                        dense
-                        readonly
-                        outlined
-                        v-model="formData.author"
-                        label="เจ้าของผลงาน"
-                        :rules="[
+    <div class="col-xs-12 col-sm-12 col-md-11 row q-col-gutter-md">
+      <div class="col-12">
+        <q-card bordered>
+          <div class="col-12 row q-pa-md q-col-gutter-y-md">
+            <div v-if="isLoading" class="col-12">
+              <q-skeleton height="40px" square style="border-radius: 8px" />
+            </div>
+            <div v-else class="col-12">
+              <q-card bordered class="col-12">
+                <div
+                  class="text-weight-medium bg-grey-1 col-12 q-py-sm q-px-md"
+                >
+                  ผลงาน
+                  <br />
+                </div>
+                <div class="col-12"><q-separator /></div>
+                <div class="col-12 q-pa-sm">
+                  <div class="row q-col-gutter-sm">
+                    <q-input
+                      ref="subjectRef"
+                      dense
+                      readonly
+                      class="col-xs-12 col-sm-6"
+                      outlined
+                      label="ชื่อผลงาน"
+                      v-model="formData.subject"
+                      :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อผลงาน'}`]"
+                      lazy-rules
+                      hide-bottom-space
+                    />
+                    <q-input
+                      ref="authorRef"
+                      class="col-xs-12 col-sm-6"
+                      dense
+                      readonly
+                      outlined
+                      v-model="formData.author"
+                      label="เจ้าของผลงาน"
+                      :rules="[
                           (val:string) => !!val || `${'กรุณากรอกเจ้าของผลงาน'}`,
                         ]"
-                        lazy-rules
-                        hide-bottom-space
-                      />
-                    </div>
+                      lazy-rules
+                      hide-bottom-space
+                    />
                   </div>
-                </q-card>
-              </div>
+                </div>
+              </q-card>
+            </div>
 
-              <!-- เลือกผู้เซ็นเอกสาร -->
-              <div class="col-12">
-                <q-card bordered class="col-12">
-                  <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
-                    เลือกผู้เซ็นเอกสาร
-                  </div>
-                  <div class="col-12"><q-separator /></div>
-                  <div class="col-12 q-pa-sm">
-                    <div class="row q-col-gutter-sm">
-                      <div class="col-xs-12 col-sm-12 row">
-                        <div class="text-weight-medium q-pt-xs q-pl-sm">
-                          ผู้บังคับบัญชาชั้นต้น
-                        </div>
-                        <div class="row col-12 q-col-gutter-sm q-pa-sm">
-                          <q-input
-                            ref="commanderFullnameRef"
-                            dense
-                            class="col-xs-12 col-sm-6"
-                            readonly
-                            outlined
-                            label="ชื่อ-นามสกุล"
-                            v-model="formData.commanderFullname"
-                            :rules="[
-                              (val:string) => !!val || `${'กรุณากรอกชื่อ-นามสกุล'}`,
-                            ]"
-                            lazy-rules
-                            hide-bottom-space
-                          />
-                          <q-input
-                            ref="commanderPositionRef"
-                            class="col-xs-12 col-sm-6"
-                            readonly
-                            dense
-                            outlined
-                            v-model="formData.commanderPosition"
-                            label="ตำแหน่ง"
-                            :rules="[(val:string) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
-                            lazy-rules
-                            hide-bottom-space
-                          />
-                        </div>
+            <!-- เลือกผู้เซ็นเอกสาร -->
+            <div v-if="isLoading" class="col-12">
+              <q-skeleton height="200px" square style="border-radius: 8px" />
+            </div>
+            <div v-else class="col-12">
+              <q-card bordered class="col-12">
+                <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
+                  เลือกผู้เซ็นเอกสาร
+                </div>
+                <div class="col-12"><q-separator /></div>
+                <div class="col-12 q-pa-sm">
+                  <div class="row q-col-gutter-sm">
+                    <div class="col-xs-12 col-sm-12 row">
+                      <div class="text-weight-medium q-pt-xs q-pl-sm">
+                        ผู้บังคับบัญชาชั้นต้น
                       </div>
-                    </div>
-                    <div class="row q-col-gutter-sm col-12">
-                      <div class="col-xs-12 col-sm-12 row">
-                        <div class="text-weight-medium q-pl-sm q-pt-sm">
-                          ผู้บังคับบัญชาเหนือขึ้นไป 1 ระดับ
-                        </div>
-                        <div class="row col-12 q-col-gutter-md q-pa-sm">
-                          <q-input
-                            ref="commanderAboveFullnameRef"
-                            dense
-                            class="col-xs-12 col-sm-6"
-                            outlined
-                            readonly
-                            v-model="formData.commanderAboveFullname"
-                            label="ชื่อ-นามสกุล"
-                            :rules="[
+                      <div class="row col-12 q-col-gutter-sm q-pa-sm">
+                        <q-input
+                          ref="commanderFullnameRef"
+                          dense
+                          class="col-xs-12 col-sm-6"
+                          readonly
+                          outlined
+                          label="ชื่อ-นามสกุล"
+                          v-model="formData.commanderFullname"
+                          :rules="[
                               (val:string) => !!val || `${'กรุณากรอกชื่อ-นามสกุล'}`,
                             ]"
-                            lazy-rules
-                            hide-bottom-space
-                          />
-                          <q-input
-                            ref="commanderAbovePositionRef"
-                            class="col-xs-12 col-sm-6"
-                            dense
-                            readonly
-                            outlined
-                            v-model="formData.commanderAbovePosition"
-                            label="ตำแหน่ง"
-                            :rules="[(val:string) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
-                            lazy-rules
-                            hide-bottom-space
-                          />
-                        </div>
+                          lazy-rules
+                          hide-bottom-space
+                        />
+                        <q-input
+                          ref="commanderPositionRef"
+                          class="col-xs-12 col-sm-6"
+                          readonly
+                          dense
+                          outlined
+                          v-model="formData.commanderPosition"
+                          label="ตำแหน่ง"
+                          :rules="[(val:string) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
+                          lazy-rules
+                          hide-bottom-space
+                        />
                       </div>
                     </div>
                   </div>
-                </q-card>
-              </div>
-              <div class="col-12">
-                <div class="row q-col-gutter-sm">
-                  <!-- แบบพิจารณาคุณสมบัติบุคคล -->
-                  <div class="col-6">
-                    <q-card bordered>
-                      <div
-                        class="text-weight-medium bg-grey-1 q-py-sm q-pl-md q-pr-sm col-12 row items-center"
-                      >
-                        <div>แบบพิจารณาคุณสมบัติบุคคล</div>
-                        <q-space />
-                        <div>
-                          <q-btn
-                            flat
-                            dense
-                            icon="download"
-                            color="indigo"
-                            @click="
-                              onClickDowloadFile(
-                                'EV1_005',
-                                'template-1',
-                                'แบบพิจารณาคุณสมบัติบุคคล'
-                              )
-                            "
-                          >
-                            <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
-                          >
-                        </div>
-                        <div>
-                          <q-btn
-                            v-if="downloadFile1 != ''"
-                            :href="downloadFile1"
-                            target="_blank"
-                            class="q-ml-sm"
-                            color="blue"
-                            flat
-                            dense
-                            icon="visibility"
-                          >
-                            <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
-                          >
-                        </div>
+                  <div class="row q-col-gutter-sm col-12">
+                    <div class="col-xs-12 col-sm-12 row">
+                      <div class="text-weight-medium q-pl-sm q-pt-sm">
+                        ผู้บังคับบัญชาเหนือขึ้นไป 1 ระดับ
                       </div>
-                      <div class="col-12"><q-separator /></div>
-                      <div class="row">
-                        <div class="col-12 q-pa-sm">
-                          <div class="row q-col-gutter-md col-12">
-                            <q-file
-                              ref="fileEvaluation1Ref"
-                              v-model="fileEvaluation1"
-                              class="col-xs-12 col-sm-12"
-                              outlined
-                              dense
-                              label="อัปโหลดไฟล์"
-                              lazy-rules
-                              hide-bottom-space
-                              accept=".pdf"
-                              :rules="
+                      <div class="row col-12 q-col-gutter-md q-pa-sm">
+                        <q-input
+                          ref="commanderAboveFullnameRef"
+                          dense
+                          class="col-xs-12 col-sm-6"
+                          outlined
+                          readonly
+                          v-model="formData.commanderAboveFullname"
+                          label="ชื่อ-นามสกุล"
+                          :rules="[
+                              (val:string) => !!val || `${'กรุณากรอกชื่อ-นามสกุล'}`,
+                            ]"
+                          lazy-rules
+                          hide-bottom-space
+                        />
+                        <q-input
+                          ref="commanderAbovePositionRef"
+                          class="col-xs-12 col-sm-6"
+                          dense
+                          readonly
+                          outlined
+                          v-model="formData.commanderAbovePosition"
+                          label="ตำแหน่ง"
+                          :rules="[(val:string) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
+                          lazy-rules
+                          hide-bottom-space
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </q-card>
+            </div>
+
+            <div class="col-12">
+              <div class="row q-col-gutter-sm">
+                <!-- แบบพิจารณาคุณสมบัติบุคคล -->
+                <div class="col-6">
+                  <q-skeleton
+                    v-if="isLoadingFile['fileEvaluation1']"
+                    height="120px"
+                  />
+                  <q-card v-else bordered>
+                    <div
+                      class="text-weight-medium bg-grey-1 q-py-sm q-pl-md q-pr-sm col-12 row items-center"
+                    >
+                      <div>แบบพิจารณาคุณสมบัติบุคคล</div>
+                      <q-space />
+                      <div>
+                        <q-btn
+                          flat
+                          dense
+                          icon="download"
+                          color="indigo"
+                          @click="
+                            onClickDowloadFile(
+                              'EV1_005',
+                              'template-1',
+                              'แบบพิจารณาคุณสมบัติบุคคล'
+                            )
+                          "
+                        >
+                          <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
+                        >
+                      </div>
+                      <div>
+                        <q-btn
+                          v-if="downloadFile1 != ''"
+                          :href="downloadFile1"
+                          target="_blank"
+                          class="q-ml-sm"
+                          color="blue"
+                          flat
+                          dense
+                          icon="visibility"
+                        >
+                          <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
+                        >
+                      </div>
+                    </div>
+                    <div class="col-12"><q-separator /></div>
+                    <div class="row">
+                      <div class="col-12 q-pa-sm">
+                        <div class="row q-col-gutter-md col-12">
+                          <q-file
+                            ref="fileEvaluation1Ref"
+                            v-model="fileEvaluation1"
+                            class="col-xs-12 col-sm-12"
+                            outlined
+                            dense
+                            label="อัปโหลดไฟล์"
+                            lazy-rules
+                            hide-bottom-space
+                            accept=".pdf"
+                            :rules="
                                 downloadFile1 === ''
                                   ? [(val:string) => !!val || 'กรุณาเลือกไฟล์']
                                   : []
                               "
-                            >
-                              <template v-slot:prepend>
-                                <q-icon name="attach_file" />
-                              </template>
-                              <template v-slot:after>
-                                <q-btn
-                                  flat
-                                  round
-                                  dense
-                                  color="primary"
-                                  icon="mdi-upload"
-                                  @click="
-                                    fetchPathUpload(
-                                      'ประเมินเชี่ยวชาญ',
-                                      evaluateId,
-                                      '1-แบบพิจารณาคุณสมบัติบุคคล',
-                                      fileEvaluation1
-                                    )
-                                  "
-                                  ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
-                                >
-                              </template>
-                            </q-file>
-                          </div>
+                          >
+                            <template v-slot:prepend>
+                              <q-icon name="attach_file" />
+                            </template>
+                            <template v-slot:after>
+                              <q-btn
+                                flat
+                                round
+                                dense
+                                color="primary"
+                                icon="mdi-upload"
+                                @click="
+                                  fetchPathUpload(
+                                    'ประเมินเชี่ยวชาญ',
+                                    evaluateId,
+                                    '1-แบบพิจารณาคุณสมบัติบุคคล',
+                                    fileEvaluation1
+                                  )
+                                "
+                                ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
+                              >
+                            </template>
+                          </q-file>
                         </div>
                       </div>
-                    </q-card>
-                  </div>
+                    </div>
+                  </q-card>
+                </div>
 
-                  <!-- แบบแสดงรายละเอียดการเสนอผลงาน     -->
-                  <div class="col-6">
-                    <q-card bordered>
-                      <div
-                        class="text-weight-medium bg-grey-1 q-py-sm q-pl-md q-pr-sm col-12 row items-center"
-                      >
-                        <div>แบบแสดงรายละเอียดการเสนอผลงาน</div>
-                        <q-space />
-                        <div>
-                          <q-btn
-                            flat
-                            dense
-                            icon="download"
-                            color="indigo"
-                            @click="
-                              onClickDowloadFile(
-                                'EV1_006',
-                                'template-2',
-                                'แบบแสดงรายละเอียดการเสนอผลงาน'
-                              )
-                            "
-                          >
-                            <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
-                          >
-                        </div>
-                        <div>
-                          <q-btn
-                            v-if="downloadFile2 != ''"
-                            :href="downloadFile2"
-                            target="_blank"
-                            class="q-ml-sm"
-                            color="blue"
-                            flat
-                            dense
-                            icon="visibility"
-                          >
-                            <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
-                          >
-                        </div>
+                <!-- แบบแสดงรายละเอียดการเสนอผลงาน     -->
+                <div class="col-6">
+                  <q-skeleton
+                    v-if="isLoadingFile['fileEvaluation2']"
+                    height="120px"
+                  />
+                  <q-card v-else bordered>
+                    <div
+                      class="text-weight-medium bg-grey-1 q-py-sm q-pl-md q-pr-sm col-12 row items-center"
+                    >
+                      <div>แบบแสดงรายละเอียดการเสนอผลงาน</div>
+                      <q-space />
+                      <div>
+                        <q-btn
+                          flat
+                          dense
+                          icon="download"
+                          color="indigo"
+                          @click="
+                            onClickDowloadFile(
+                              'EV1_006',
+                              'template-2',
+                              'แบบแสดงรายละเอียดการเสนอผลงาน'
+                            )
+                          "
+                        >
+                          <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
+                        >
                       </div>
-                      <div class="col-12"><q-separator /></div>
-                      <div class="row">
-                        <div class="col-12 q-pa-sm">
-                          <div class="row q-col-gutter-md col-12">
-                            <q-file
-                              ref="fileEvaluation2Ref"
-                              v-model="fileEvaluation2"
-                              class="col-12"
-                              outlined
-                              dense
-                              label="อัปโหลดไฟล์"
-                              lazy-rules
-                              accept=".pdf"
-                              hide-bottom-space
-                              :rules="
+                      <div>
+                        <q-btn
+                          v-if="downloadFile2 != ''"
+                          :href="downloadFile2"
+                          target="_blank"
+                          class="q-ml-sm"
+                          color="blue"
+                          flat
+                          dense
+                          icon="visibility"
+                        >
+                          <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
+                        >
+                      </div>
+                    </div>
+                    <div class="col-12"><q-separator /></div>
+                    <div class="row">
+                      <div class="col-12 q-pa-sm">
+                        <div class="row q-col-gutter-md col-12">
+                          <q-file
+                            ref="fileEvaluation2Ref"
+                            v-model="fileEvaluation2"
+                            class="col-12"
+                            outlined
+                            dense
+                            label="อัปโหลดไฟล์"
+                            lazy-rules
+                            accept=".pdf"
+                            hide-bottom-space
+                            :rules="
                                 downloadFile2 === ''
                                   ? [(val:string) => !!val || 'กรุณาเลือกไฟล์']
                                   : []
                               "
-                            >
-                              <template v-slot:prepend>
-                                <q-icon name="attach_file" />
-                              </template>
-                              <template v-slot:after>
-                                <q-btn
-                                  flat
-                                  round
-                                  dense
-                                  color="primary"
-                                  icon="mdi-upload"
-                                  @click="
-                                    fetchPathUpload(
-                                      'ประเมินเชี่ยวชาญ',
-                                      evaluateId,
-                                      '2-แบบแสดงรายละเอียดการเสนอผลงาน',
-                                      fileEvaluation2
-                                    )
-                                  "
-                                  ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
-                                >
-                              </template>
-                            </q-file>
-                          </div>
+                          >
+                            <template v-slot:prepend>
+                              <q-icon name="attach_file" />
+                            </template>
+                            <template v-slot:after>
+                              <q-btn
+                                flat
+                                round
+                                dense
+                                color="primary"
+                                icon="mdi-upload"
+                                @click="
+                                  fetchPathUpload(
+                                    'ประเมินเชี่ยวชาญ',
+                                    evaluateId,
+                                    '2-แบบแสดงรายละเอียดการเสนอผลงาน',
+                                    fileEvaluation2
+                                  )
+                                "
+                                ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
+                              >
+                            </template>
+                          </q-file>
                         </div>
                       </div>
-                    </q-card>
-                  </div>
+                    </div>
+                  </q-card>
+                </div>
 
-                  <!-- แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก) -->
-                  <div class="col-6">
-                    <q-card bordered>
-                      <div
-                        class="col-12 row text-weight-medium bg-grey-1 q-py-sm q-pl-md q-pr-sm no-wrap"
-                      >
-                        <div>
-                          แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล
-                          (เอกสารแบบ ก.)
-                        </div>
-                        <q-space />
-                        <div>
-                          <q-btn
-                            flat
-                            dense
-                            icon="download"
-                            color="indigo"
-                            @click="
-                              onClickDowloadFile(
-                                'EV1_007',
-                                'template-3',
-                                'แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก)'
-                              )
-                            "
-                          >
-                            <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
-                          >
-                        </div>
-                        <div v-if="downloadFile3 != ''">
-                          <q-btn
-                            :href="downloadFile3"
-                            target="_blank"
-                            flat
-                            dense
-                            icon="visibility"
-                            class="q-ml-sm"
-                            color="blue"
-                          >
-                            <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
-                          >
-                        </div>
+                <!-- แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก) -->
+                <div class="col-6">
+                  <q-skeleton
+                    v-if="isLoadingFile['fileEvaluation3']"
+                    height="120px"
+                  />
+                  <q-card v-else bordered>
+                    <div
+                      class="col-12 row text-weight-medium bg-grey-1 q-py-sm q-pl-md q-pr-sm no-wrap"
+                    >
+                      <div>
+                        แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล
+                        (เอกสารแบบ ก.)
                       </div>
-                      <div class="col-12"><q-separator /></div>
-                      <div class="row">
-                        <div class="col-12 q-pa-sm">
-                          <q-file
-                            ref="fileEvaluation3Ref"
-                            v-model="fileEvaluation3"
-                            class="col-12"
-                            outlined
-                            dense
-                            label="อัปโหลดไฟล์"
-                            lazy-rules
-                            hide-bottom-space
-                            accept=".pdf"
-                            :rules="
+                      <q-space />
+                      <div>
+                        <q-btn
+                          flat
+                          dense
+                          icon="download"
+                          color="indigo"
+                          @click="
+                            onClickDowloadFile(
+                              'EV1_007',
+                              'template-3',
+                              'แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก)'
+                            )
+                          "
+                        >
+                          <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
+                        >
+                      </div>
+                      <div v-if="downloadFile3 != ''">
+                        <q-btn
+                          :href="downloadFile3"
+                          target="_blank"
+                          flat
+                          dense
+                          icon="visibility"
+                          class="q-ml-sm"
+                          color="blue"
+                        >
+                          <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
+                        >
+                      </div>
+                    </div>
+                    <div class="col-12"><q-separator /></div>
+                    <div class="row">
+                      <div class="col-12 q-pa-sm">
+                        <q-file
+                          ref="fileEvaluation3Ref"
+                          v-model="fileEvaluation3"
+                          class="col-12"
+                          outlined
+                          dense
+                          label="อัปโหลดไฟล์"
+                          lazy-rules
+                          hide-bottom-space
+                          accept=".pdf"
+                          :rules="
                               downloadFile3 === ''
                                 ? [(val:string) => !!val || 'กรุณาเลือกไฟล์']
                                 : []
                             "
-                          >
-                            <template v-slot:prepend>
-                              <q-icon name="attach_file" />
-                            </template>
-                            <template v-slot:after>
-                              <q-btn
-                                flat
-                                round
-                                dense
-                                color="primary"
-                                icon="mdi-upload"
-                                @click="
-                                  fetchPathUpload(
-                                    'ประเมินเชี่ยวชาญ',
-                                    evaluateId,
-                                    '3-แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก)',
-                                    fileEvaluation3
-                                  )
-                                "
-                                ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
-                              >
-                            </template>
-                          </q-file>
-                        </div>
+                        >
+                          <template v-slot:prepend>
+                            <q-icon name="attach_file" />
+                          </template>
+                          <template v-slot:after>
+                            <q-btn
+                              flat
+                              round
+                              dense
+                              color="primary"
+                              icon="mdi-upload"
+                              @click="
+                                fetchPathUpload(
+                                  'ประเมินเชี่ยวชาญ',
+                                  evaluateId,
+                                  '3-แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก)',
+                                  fileEvaluation3
+                                )
+                              "
+                              ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
+                            >
+                          </template>
+                        </q-file>
                       </div>
-                    </q-card>
-                  </div>
+                    </div>
+                  </q-card>
+                </div>
 
-                  <!-- แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9) -->
-                  <div class="col-6">
-                    <q-card bordered>
-                      <div
-                        class="col-12 row text-weight-medium bg-grey-1 q-py-sm q-pl-md q-pr-sm no-wrap"
-                      >
-                        <div class="col-7">
-                          แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)
-                        </div>
-                        <q-space />
-                        <div>
-                          <q-btn
-                            flat
-                            dense
-                            icon="download"
-                            color="indigo"
-                            @click="
-                              onClickDowloadFile(
-                                'EV1_009',
-                                'template-5',
-                                'แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)'
-                              )
-                            "
-                            ><q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
-                          >
-                        </div>
-                        <div>
-                          <q-btn
-                            v-if="downloadFile5 != ''"
-                            :href="downloadFile5"
-                            target="_blank"
-                            flat
-                            dense
-                            icon="visibility"
-                            class="q-ml-sm"
-                            color="blue"
-                          >
-                            <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
-                          >
-                        </div>
+                <!-- แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9) -->
+                <div class="col-6">
+                  <q-skeleton
+                    v-if="isLoadingFile['fileEvaluation5']"
+                    height="120px"
+                  />
+                  <q-card v-else bordered>
+                    <div
+                      class="col-12 row text-weight-medium bg-grey-1 q-py-sm q-pl-md q-pr-sm no-wrap"
+                    >
+                      <div class="col-7">
+                        แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)
                       </div>
-                      <div class="col-12"><q-separator /></div>
-                      <div class="row">
-                        <div class="col-12 q-pa-sm">
-                          <q-file
-                            ref="fileEvaluation5Ref"
-                            v-model="fileEvaluation5"
-                            class="col-12"
-                            outlined
-                            label="อัปโหลดไฟล์"
-                            dense
-                            lazy-rules
-                            accept=".pdf"
-                            hide-bottom-space
-                            :rules="
+                      <q-space />
+                      <div>
+                        <q-btn
+                          flat
+                          dense
+                          icon="download"
+                          color="indigo"
+                          @click="
+                            onClickDowloadFile(
+                              'EV1_009',
+                              'template-5',
+                              'แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)'
+                            )
+                          "
+                          ><q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
+                        >
+                      </div>
+                      <div>
+                        <q-btn
+                          v-if="downloadFile5 != ''"
+                          :href="downloadFile5"
+                          target="_blank"
+                          flat
+                          dense
+                          icon="visibility"
+                          class="q-ml-sm"
+                          color="blue"
+                        >
+                          <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
+                        >
+                      </div>
+                    </div>
+                    <div class="col-12"><q-separator /></div>
+                    <div class="row">
+                      <div class="col-12 q-pa-sm">
+                        <q-file
+                          ref="fileEvaluation5Ref"
+                          v-model="fileEvaluation5"
+                          class="col-12"
+                          outlined
+                          label="อัปโหลดไฟล์"
+                          dense
+                          lazy-rules
+                          accept=".pdf"
+                          hide-bottom-space
+                          :rules="
                               downloadFile5 === ''
                                 ? [(val:string) => !!val || 'กรุณาเลือกไฟล์']
                                 : []
                             "
-                          >
-                            <template v-slot:prepend>
-                              <q-icon name="attach_file" />
-                            </template>
-                            <template v-slot:after>
-                              <q-btn
-                                flat
-                                round
-                                dense
-                                color="primary"
-                                icon="mdi-upload"
-                                @click="
-                                  fetchPathUpload(
-                                    'ประเมินเชี่ยวชาญ',
-                                    evaluateId,
-                                    '5-แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)',
-                                    fileEvaluation5
-                                  )
-                                "
-                                ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
-                              >
-                            </template>
-                          </q-file>
-                        </div>
+                        >
+                          <template v-slot:prepend>
+                            <q-icon name="attach_file" />
+                          </template>
+                          <template v-slot:after>
+                            <q-btn
+                              flat
+                              round
+                              dense
+                              color="primary"
+                              icon="mdi-upload"
+                              @click="
+                                fetchPathUpload(
+                                  'ประเมินเชี่ยวชาญ',
+                                  evaluateId,
+                                  '5-แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)',
+                                  fileEvaluation5
+                                )
+                              "
+                              ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
+                            >
+                          </template>
+                        </q-file>
                       </div>
-                    </q-card>
-                  </div>
+                    </div>
+                  </q-card>
+                </div>
 
-                  <!-- แบบประเมินคุณลักษณะบุคคล -->
-                  <div class="col-6">
-                    <q-card bordered>
-                      <div
-                        class="col-12 row text-weight-medium bg-grey-1 q-py-sm q-pl-md q-pr-sm items-center"
-                      >
-                        <div>แบบประเมินคุณลักษณะบุคคล</div>
-                        <q-space />
-                        <div>
-                          <q-btn
-                            flat
-                            dense
-                            icon="download"
-                            color="indigo"
-                            @click="
-                              onClickDowloadFile(
-                                'EV1_008',
-                                'template-4',
-                                'แบบประเมินคุณลักษณะบุคคล'
-                              )
-                            "
-                          >
-                            <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
-                          >
-                        </div>
-                        <div>
-                          <q-btn
-                            v-if="downloadFile4 != ''"
-                            :href="downloadFile4"
-                            target="_blank"
-                            flat
-                            dense
-                            icon="visibility"
-                            class="q-ml-sm"
-                            color="blue"
-                          >
-                            <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
-                          >
-                        </div>
+                <!-- แบบประเมินคุณลักษณะบุคคล -->
+                <div class="col-6">
+                  <q-skeleton
+                    v-if="isLoadingFile['fileEvaluation4']"
+                    height="120px"
+                  />
+                  <q-card v-else bordered>
+                    <div
+                      class="col-12 row text-weight-medium bg-grey-1 q-py-sm q-pl-md q-pr-sm items-center"
+                    >
+                      <div>แบบประเมินคุณลักษณะบุคคล</div>
+                      <q-space />
+                      <div>
+                        <q-btn
+                          flat
+                          dense
+                          icon="download"
+                          color="indigo"
+                          @click="
+                            onClickDowloadFile(
+                              'EV1_008',
+                              'template-4',
+                              'แบบประเมินคุณลักษณะบุคคล'
+                            )
+                          "
+                        >
+                          <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
+                        >
                       </div>
-                      <div class="col-12"><q-separator /></div>
-                      <div class="row">
-                        <div class="col-12 q-pa-sm">
-                          <q-file
-                            ref="fileEvaluation4Ref"
-                            v-model="fileEvaluation4"
-                            class="col-12"
-                            outlined
-                            dense
-                            lazy-rules
-                            label="อัปโหลดไฟล์"
-                            hide-bottom-space
-                            accept=".pdf"
-                            :rules="
+                      <div>
+                        <q-btn
+                          v-if="downloadFile4 != ''"
+                          :href="downloadFile4"
+                          target="_blank"
+                          flat
+                          dense
+                          icon="visibility"
+                          class="q-ml-sm"
+                          color="blue"
+                        >
+                          <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
+                        >
+                      </div>
+                    </div>
+                    <div class="col-12"><q-separator /></div>
+                    <div class="row">
+                      <div class="col-12 q-pa-sm">
+                        <q-file
+                          ref="fileEvaluation4Ref"
+                          v-model="fileEvaluation4"
+                          class="col-12"
+                          outlined
+                          dense
+                          lazy-rules
+                          label="อัปโหลดไฟล์"
+                          hide-bottom-space
+                          accept=".pdf"
+                          :rules="
                               downloadFile4 === ''
                                 ? [(val:string) => !!val || 'กรุณาเลือกไฟล์']
                                 : []
                             "
-                          >
-                            <template v-slot:prepend>
-                              <q-icon name="attach_file" />
-                            </template>
-                            <template v-slot:after>
-                              <q-btn
-                                flat
-                                round
-                                dense
-                                color="primary"
-                                icon="mdi-upload"
-                                @click="
-                                  fetchPathUpload(
-                                    'ประเมินเชี่ยวชาญ',
-                                    evaluateId,
-                                    '4-แบบประเมินคุณลักษณะบุคคล',
-                                    fileEvaluation4
-                                  )
-                                "
-                                ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
-                              >
-                            </template>
-                          </q-file>
-                        </div>
+                        >
+                          <template v-slot:prepend>
+                            <q-icon name="attach_file" />
+                          </template>
+                          <template v-slot:after>
+                            <q-btn
+                              flat
+                              round
+                              dense
+                              color="primary"
+                              icon="mdi-upload"
+                              @click="
+                                fetchPathUpload(
+                                  'ประเมินเชี่ยวชาญ',
+                                  evaluateId,
+                                  '4-แบบประเมินคุณลักษณะบุคคล',
+                                  fileEvaluation4
+                                )
+                              "
+                              ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
+                            >
+                          </template>
+                        </q-file>
                       </div>
-                    </q-card>
-                  </div>
+                    </div>
+                  </q-card>
+                </div>
 
-                  <!--ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11) -->
-                  <div class="col-6">
-                    <q-card bordered>
-                      <div
-                        class="col-12 row text-weight-medium bg-grey-1 q-py-sm q-pl-md q-pr-sm items-center"
-                      >
-                        <div>ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)</div>
-                        <q-space />
-                        <div>
-                          <q-btn
-                            flat
-                            dense
-                            icon="download"
-                            color="indigo"
-                            @click="
-                              onClickDowloadFile(
-                                'EV1_010',
-                                'template-6',
-                                'ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)'
-                              )
-                            "
-                          >
-                            <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
-                          >
-                        </div>
-                        <div>
-                          <q-btn
-                            v-if="downloadFile6 != ''"
-                            :href="downloadFile6"
-                            target="_blank"
-                            flat
-                            dense
-                            icon="visibility"
-                            class="q-ml-sm"
-                            color="blue"
-                          >
-                            <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
-                          >
-                        </div>
+                <!--ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11) -->
+                <div class="col-6">
+                  <q-skeleton
+                    v-if="isLoadingFile['fileEvaluation6']"
+                    height="120px"
+                  />
+                  <q-card v-else bordered>
+                    <div
+                      class="col-12 row text-weight-medium bg-grey-1 q-py-sm q-pl-md q-pr-sm items-center"
+                    >
+                      <div>ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)</div>
+                      <q-space />
+                      <div>
+                        <q-btn
+                          flat
+                          dense
+                          icon="download"
+                          color="indigo"
+                          @click="
+                            onClickDowloadFile(
+                              'EV1_010',
+                              'template-6',
+                              'ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)'
+                            )
+                          "
+                        >
+                          <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
+                        >
                       </div>
-                      <div class="col-12"><q-separator /></div>
-                      <div class="row">
-                        <div class="col-12 q-pa-sm">
-                          <q-file
-                            ref="fileEvaluation6Ref"
-                            v-model="fileEvaluation6"
-                            class="col-12"
-                            outlined
-                            label="อัปโหลดไฟล์"
-                            hide-bottom-space
-                            dense
-                            lazy-rules
-                            accept=".pdf"
-                            :rules="
+                      <div>
+                        <q-btn
+                          v-if="downloadFile6 != ''"
+                          :href="downloadFile6"
+                          target="_blank"
+                          flat
+                          dense
+                          icon="visibility"
+                          class="q-ml-sm"
+                          color="blue"
+                        >
+                          <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
+                        >
+                      </div>
+                    </div>
+                    <div class="col-12"><q-separator /></div>
+                    <div class="row">
+                      <div class="col-12 q-pa-sm">
+                        <q-file
+                          ref="fileEvaluation6Ref"
+                          v-model="fileEvaluation6"
+                          class="col-12"
+                          outlined
+                          label="อัปโหลดไฟล์"
+                          hide-bottom-space
+                          dense
+                          lazy-rules
+                          accept=".pdf"
+                          :rules="
                               downloadFile6 === ''
                                 ? [(val:string) => !!val || 'กรุณาเลือกไฟล์']
                                 : []
                             "
-                          >
-                            <template v-slot:prepend>
-                              <q-icon name="attach_file" />
-                            </template>
-                            <template v-slot:after>
-                              <q-btn
-                                flat
-                                round
-                                dense
-                                color="primary"
-                                icon="mdi-upload"
-                                @click="
-                                  fetchPathUpload(
-                                    'ประเมินเชี่ยวชาญ',
-                                    evaluateId,
-                                    '6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)',
-                                    fileEvaluation6
-                                  )
-                                "
-                                ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
-                              >
-                            </template>
-                          </q-file>
-                        </div>
+                        >
+                          <template v-slot:prepend>
+                            <q-icon name="attach_file" />
+                          </template>
+                          <template v-slot:after>
+                            <q-btn
+                              flat
+                              round
+                              dense
+                              color="primary"
+                              icon="mdi-upload"
+                              @click="
+                                fetchPathUpload(
+                                  'ประเมินเชี่ยวชาญ',
+                                  evaluateId,
+                                  '6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)',
+                                  fileEvaluation6
+                                )
+                              "
+                              ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
+                            >
+                          </template>
+                        </q-file>
                       </div>
-                    </q-card>
-                  </div>
+                    </div>
+                  </q-card>
                 </div>
               </div>
             </div>
-          </q-card>
-        </div>
+          </div>
+        </q-card>
       </div>
     </div>
-  </q-form>
+  </div>
 </template>
diff --git a/src/modules/06_evaluate/components/PopupPosition.vue b/src/modules/06_evaluate/components/PopupPosition.vue
index 7a9f9d7..c229749 100644
--- a/src/modules/06_evaluate/components/PopupPosition.vue
+++ b/src/modules/06_evaluate/components/PopupPosition.vue
@@ -16,6 +16,7 @@ const { showLoader, hideLoader, messageError, formatDatePosition } =
 
 const modal = defineModel<boolean>("modal", { required: true });
 
+const isLoading = ref<boolean>(false);
 const cardData = ref<CardDataPos[]>([
   {
     label: "ระยะเวลาดำรงตำแหน่งในสายงาน",
@@ -36,7 +37,7 @@ function onClosePopup() {
 }
 
 async function fetchDataPosition() {
-  showLoader();
+  isLoading.value = true;
   await http
     .get(config.API.salaryTenurePosition(""))
     .then((res) => {
@@ -76,7 +77,7 @@ async function fetchDataPosition() {
       messageError($q, err);
     })
     .finally(() => {
-      hideLoader();
+      isLoading.value = false;
     });
 }
 
@@ -98,7 +99,14 @@ watch(modal, (v) => {
       <q-separator />
       <q-card-section>
         <div class="row q-col-gutter-sm q-pb-sm">
-          <div class="col" v-for="(item, index) in cardData" :key="index">
+          <q-skeleton v-if="isLoading" width="100%" height="240px" />
+
+          <div
+            v-else
+            class="col"
+            v-for="(item, index) in cardData"
+            :key="index"
+          >
             <q-card bordered class="col-12" style="border: 1px solid #d6dee1">
               <div class="col-12 text-weight-medium bg-grey-1 q-py-xs q-px-md">
                 {{ item.label }}
diff --git a/src/modules/06_evaluate/components/TableListEvaluate.vue b/src/modules/06_evaluate/components/TableListEvaluate.vue
index c5916bb..7db03c1 100644
--- a/src/modules/06_evaluate/components/TableListEvaluate.vue
+++ b/src/modules/06_evaluate/components/TableListEvaluate.vue
@@ -1,7 +1,9 @@
 <script setup lang="ts">
-import { ref, onMounted, watch } from "vue";
+import { ref, onMounted } from "vue";
 import { useRouter } from "vue-router";
 import { useQuasar } from "quasar";
+
+import type { PropsTable } from "@/interface/PropsTable";
 import type { QTableProps } from "quasar";
 
 import config from "@/app.config";
@@ -14,25 +16,16 @@ const $q = useQuasar();
 const store = useEvaluateStore();
 const mixin = useCounterMixin();
 const router = useRouter();
-
-const total = defineModel<number>("total", { required: true });
-const totalList = defineModel<number>("totalList", { required: true });
-const pagination = defineModel<any>("pagination", { required: true });
 const { dialogRemove, showLoader, hideLoader, success, messageError } = mixin;
 
+const isLoading = defineModel<boolean>("isLoading", {
+  default: false,
+});
+const pagination = defineModel<PropsTable.Pagination>("pagination", {
+  required: true,
+});
+
 const props = defineProps({
-  page: {
-    type: Number,
-    require: true,
-  },
-  pageSize: {
-    type: Number,
-    require: true,
-  },
-  maxPage: {
-    type: Number,
-    require: true,
-  },
   fetchData: {
     type: Function,
     require: true,
@@ -82,25 +75,11 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 
-/**
- * function ส่งข้อมูลไป Update Paging
- * @param newPagination ข้อมูล Paging ใหม่
- * @param page หน้า
- */
-function updateProp(newPagination: any, page: number) {
-  emit("update:pagination", newPagination, page);
-}
-
-function updatePagination(newPagination: any) {
-  pagination.value.page = 1;
-  pagination.value.rowsPerPage = newPagination.rowsPerPage;
-}
-
 /**
  * function ลบรายการประเมิน
  * @param id รายการประเมิน
  */
-async function onCkilckDelete(id: string) {
+async function onClickDelete(id: string) {
   dialogRemove($q, async () => {
     showLoader();
     await http
@@ -127,6 +106,17 @@ function redirectToDetail(data: any) {
   router.push(`/evaluate/detail/${data.typeparam.toLowerCase()}/${data.id}`);
 }
 
+/**
+ * ฟังก์ชันรับ request จากตาราง เมื่อมีการเปลี่ยน pagination
+ * @param requestProps ข้อมูลการร้องขอจากตาราง
+ */
+function onTableRequest(requestProps: PropsTable.RequestProps) {
+  const newPagination = requestProps?.pagination || requestProps;
+  if (!newPagination?.page || !newPagination?.rowsPerPage) return;
+  pagination.value = { ...newPagination };
+  props.fetchData?.();
+}
+
 /** Hook lifecycle*/
 onMounted(() => {
   store.columns = columns.value;
@@ -138,14 +128,16 @@ onMounted(() => {
   <d-table
     ref="table"
     flat
-    bordered
-    class="custom-header-table"
+    bordere
     :columns="columns"
     :rows="store.row"
     dense
     :visible-columns="store.visibleColumns"
     :rows-per-page-options="[10, 25, 50, 100]"
-    @update:pagination="updatePagination"
+    @request="onTableRequest"
+    v-model:pagination="pagination"
+    :loading="isLoading"
+    row-key="id"
   >
     <template v-slot:header="props">
       <q-tr :props="props">
@@ -182,7 +174,7 @@ onMounted(() => {
             round
             color="red"
             icon="delete"
-            @click.stop="onCkilckDelete(props.row.id)"
+            @click.stop="onClickDelete(props.row.id)"
           >
             <q-tooltip>ลบ</q-tooltip>
           </q-btn>
@@ -227,7 +219,7 @@ onMounted(() => {
               round
               color="red"
               icon="delete"
-              @click.stop="onCkilckDelete(props.row.id)"
+              @click.stop="onClickDelete(props.row.id)"
             >
               <q-tooltip>ลบ</q-tooltip>
             </q-btn>
@@ -235,48 +227,7 @@ onMounted(() => {
         </q-card>
       </div>
     </template>
-    <template v-slot:pagination="scope">
-      ทั้งหมด {{ total }} รายการ
-      <q-pagination
-        v-model="pagination.page"
-        active-color="primary"
-        color="dark"
-        :max="Number(totalList)"
-        size="sm"
-        boundary-links
-        direction-links
-        :max-pages="5"
-        @update:model-value="props.fetchData?.()"
-      ></q-pagination>
-    </template>
   </d-table>
 </template>
 
-<style lang="scss" scoped>
-.custom-header-table {
-  height: auto;
-  .q-table tr:nth-child(odd) td {
-    background: white;
-  }
-  .q-table tr:nth-child(even) td {
-    background: #f8f8f8;
-  }
-
-  .q-table thead tr {
-    background: #ecebeb;
-  }
-
-  .q-table thead tr th {
-    position: sticky;
-    z-index: 1;
-  }
-  /* this will be the loading indicator */
-  .q-table thead tr:last-child th {
-    /* height of all previous header rows */
-    top: 48px;
-  }
-  .q-table thead tr:first-child th {
-    top: 0;
-  }
-}
-</style>
+<style lang="scss" scoped></style>
diff --git a/src/modules/06_evaluate/components/step/step1.vue b/src/modules/06_evaluate/components/step/step1.vue
index f1c0cb5..0487541 100644
--- a/src/modules/06_evaluate/components/step/step1.vue
+++ b/src/modules/06_evaluate/components/step/step1.vue
@@ -37,6 +37,7 @@ const formData = reactive<FormSpec>({
   isHaveProLicense: false, // มีใบอนุญาตประกอบวิชาชีพของสายงานต่างๆ
   isHaveMinPeriodOrHoldPos: false, // มีระยะเวลาขั้นต่ำในการดำรงตำแหน่งหรือเคยดำรงตำแหน่งในสายงานที่จะคัดเลือกตามคุณวุฒิของบุคคลและระดับตำแหน่งที่จะคัดเลือก]
 });
+const isLoading = ref<boolean>(false);
 
 /** function อัปเดทตรวจสอบคุณสมบัติ*/
 async function updateValue() {
@@ -48,6 +49,7 @@ async function updateValue() {
  * @param data ตรวจสอบคุณสมบัติ
  */
 async function fetchCheckSpec(data: PersonInformation) {
+  isLoading.value = true;
   formData.isEducationalQft = data.isEducationalQft;
   formData.isGovermantServiceHtr = data.isGovermantServiceHtr;
   formData.isOperatingExp = data.isOperatingExp;
@@ -55,6 +57,7 @@ async function fetchCheckSpec(data: PersonInformation) {
   formData.isHaveSpecificQft = data.isHaveSpecificQft;
   formData.isHaveProLicense = data.isHaveProLicense;
   formData.isHaveMinPeriodOrHoldPos = data.isHaveMinPeriodOrHoldPos;
+  isLoading.value = false;
 }
 
 /**
@@ -87,7 +90,8 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="q-pa-sm">
+  <q-skeleton v-if="isLoading" class="q-mb-md" width="100%" height="100%" />
+  <div class="q-pa-sm" v-else>
     <q-list dense>
       <q-item v-ripple class="listItem">
         <q-item-section avatar>
diff --git a/src/modules/06_evaluate/components/step/step2.vue b/src/modules/06_evaluate/components/step/step2.vue
index 70e3757..a98a91f 100644
--- a/src/modules/06_evaluate/components/step/step2.vue
+++ b/src/modules/06_evaluate/components/step/step2.vue
@@ -52,6 +52,7 @@ const formTemplates = ref<any[]>([
     fileName: "1-แบบพิจารณาคุณสมบัติบุคคล",
     downloadFile: "",
     file: null,
+    isLoading: false,
   },
   {
     code: "EV1_006",
@@ -60,6 +61,7 @@ const formTemplates = ref<any[]>([
     fileName: "2-แบบแสดงรายละเอียดการเสนอผลงาน",
     downloadFile: "",
     file: null,
+    isLoading: false,
   },
   {
     code: "EV1_008",
@@ -68,6 +70,7 @@ const formTemplates = ref<any[]>([
     fileName: "4-แบบประเมินคุณลักษณะบุคคล",
     downloadFile: "",
     file: null,
+    isLoading: false,
   },
   {
     code: "EV1_010",
@@ -76,6 +79,7 @@ const formTemplates = ref<any[]>([
     fileName: "6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)",
     downloadFile: "",
     file: null,
+    isLoading: false,
   },
 ]);
 
@@ -96,6 +100,7 @@ const numOfPages = ref<number>(0);
 const page = ref<number>(1);
 const pdfSrc = ref<any>();
 const profile = ref<any>();
+const isLoading = ref<boolean>(false);
 
 /** function ไปหน้าต่อไปของรายงาน */
 function nextPage() {
@@ -201,8 +206,9 @@ async function uploadfile(uploadUrl: string, file: any) {
  * function fecth รายชื่อผู้เซ็นเอกสาร
  * @param id evaluate ID
  */
-function fetcheSigner(id: string) {
-  http
+async function fetcheSigner(id: string) {
+  isLoading.value = true;
+  await http
     .get(config.API.evaluationSignerDoc1(id))
     .then((res) => {
       const data = res.data.result;
@@ -220,9 +226,12 @@ function fetcheSigner(id: string) {
       formCommand.subject = data.subject;
       store.statusUpload = true;
     })
-    .catch(() => {
+    .catch(async () => {
       store.statusUpload = false;
-      getCommander();
+      await getCommander();
+    })
+    .finally(() => {
+      isLoading.value = false;
     });
 }
 
@@ -247,6 +256,11 @@ async function fetchCheckSpec(id: string) {
  * @param fileName ชื่อไฟล์
  */
 async function downloadFile(fileName: string) {
+  const loadingKey = formTemplates.value.findIndex(
+    (item) => item.fileName === fileName
+  );
+  formTemplates.value[loadingKey].isLoading = true;
+
   await http
     .get(config.API.loadFileDocument("เล่ม 1", evaluateId.value, fileName))
     .then((res) => {
@@ -264,6 +278,7 @@ async function downloadFile(fileName: string) {
       };
 
       emit("update:form", formCommand, ref);
+      formTemplates.value[loadingKey].isLoading = false;
     });
 }
 
@@ -316,29 +331,16 @@ watch(
 
 /**lifecycle Hooks*/
 onMounted(async () => {
-  const user = await tokenParsed();
-
   try {
-    showLoader();
     await Promise.all([
       fetcheSigner(evaluateId.value),
       fetchCheckSpec(evaluateId.value),
       formTemplates.value.forEach((e) => {
         downloadFile(e.fileName);
       }),
-      // downloadFile("1-แบบพิจารณาคุณสมบัติบุคคล"),
-      // downloadFile("2-แบบแสดงรายละเอียดการเสนอผลงาน"),
-      // downloadFile(
-      //   "3-แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก)"
-      // ),
-      // downloadFile("4-แบบประเมินคุณลักษณะบุคคล"),
-      // downloadFile("5-แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)"),
-      // downloadFile("6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)"),
     ]);
   } catch (error) {
     console.log(error);
-  } finally {
-    hideLoader();
   }
 });
 </script>
@@ -347,7 +349,8 @@ onMounted(async () => {
   <div class="col-12 q-pa-sm">
     <!-- ผลงาน -->
     <div class="col-12">
-      <q-card bordered class="cardSp1 col-12">
+      <q-skeleton height="100px" v-if="isLoading" class="q-mb-sm" />
+      <q-card v-else bordered class="cardSp1 col-12">
         <div class="text-weight-medium bg-grey-1 col-12 q-py-sm q-px-md">
           ผลงาน
         </div>
@@ -422,7 +425,8 @@ onMounted(async () => {
 
     <!-- เลือกผู้เซ็นเอกสาร -->
     <div class="col-12">
-      <q-card bordered class="cardSp1 col-12">
+      <q-skeleton height="200px" v-if="isLoading" />
+      <q-card v-else bordered class="cardSp1 col-12">
         <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
           เลือกผู้เซ็นเอกสาร
         </div>
@@ -573,14 +577,16 @@ onMounted(async () => {
     </div>
 
     <!-- v-if="store.statusUpload -->
-    <div class="row q-col-gutter-sm">
+    <div class="row q-col-gutter-sm q-mt-sm">
       <div
         class="col-6"
         v-if="store.currentStep === 2"
         v-for="(item, index) in formTemplates"
         :key="index"
       >
-        <q-card bordered class="cardSp1">
+        <q-skeleton height="100px" v-if="item.isLoading" />
+
+        <q-card bordered class="cardSp1" v-else>
           <div
             class="text-weight-medium bg-grey-1 q-py-sm q-pl-md q-pr-sm col-12 row items-center"
           >
@@ -662,541 +668,6 @@ onMounted(async () => {
           </div>
         </q-card>
       </div>
-
-      <!-- แบบพิจารณาคุณสมบัติบุคคล -->
-      <!-- <div class="col-6" v-if="store.currentStep === 2">
-        <q-card bordered class="cardSp1">
-          <div
-            class="text-weight-medium bg-grey-1 q-py-sm q-pl-md q-pr-sm col-12 row items-center"
-          >
-            <div>แบบพิจารณาคุณสมบัติบุคคล</div>
-            <q-space />
-            <div>
-              <q-btn
-                flat
-                dense
-                icon="download"
-                color="indigo"
-                @click="
-                  onClickDowloadFile(
-                    'EV1_005',
-                    'template-1',
-                    'แบบพิจารณาคุณสมบัติบุคคล'
-                  )
-                "
-              >
-                <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
-              >
-            </div>
-            <div>
-              <q-btn
-                v-if="downloadFile1 != ''"
-                :href="downloadFile1"
-                target="_blank"
-                class="q-ml-sm"
-                color="blue"
-                flat
-                dense
-                icon="visibility"
-              >
-                <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
-              >
-            </div>
-          </div>
-          <div class="col-12"><q-separator /></div>
-          <div class="row">
-            <div class="col-12 q-pa-sm">
-              <div class="row q-col-gutter-md col-12">
-                <q-file
-                  ref="fileEvaluation1Ref"
-                  v-model="fileEvaluation1"
-                  :disable="!store.statusUpload"
-                  class="col-xs-12 col-sm-12"
-                  label="อัปโหลดไฟล์"
-                  outlined
-                  dense
-                  lazy-rules
-                  hide-bottom-space
-                  accept=".pdf"
-                  :rules="
-                    downloadFile1 === ''
-                      ? [(val:any) => !!val || 'กรุณาเลือกไฟล์']
-                      : []
-                  "
-                >
-                  <template v-slot:prepend>
-                    <q-icon name="attach_file" />
-                  </template>
-                  <template v-slot:after>
-                    <q-btn
-                      :disable="!store.statusUpload"
-                      flat
-                      round
-                      dense
-                      color="primary"
-                      icon="mdi-upload"
-                      @click="
-                        fetchPathUpload(
-                          'เล่ม 1',
-                          evaluateId,
-                          '1-แบบพิจารณาคุณสมบัติบุคคล',
-                          fileEvaluation1
-                        )
-                      "
-                      ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
-                    >
-                  </template>
-                </q-file>
-              </div>
-            </div>
-          </div>
-        </q-card>
-      </div> -->
-
-      <!-- แบบแสดงรายละเอียดการเสนอผลงาน     -->
-      <!-- <div class="col-6" v-if="store.currentStep === 2">
-        <q-card bordered class="cardSp1">
-          <div
-            class="text-weight-medium bg-grey-1 q-py-sm q-pl-md q-pr-sm col-12 row items-center"
-          >
-            <div>แบบแสดงรายละเอียดการเสนอผลงาน</div>
-            <q-space />
-            <div>
-              <q-btn
-                flat
-                dense
-                icon="download"
-                color="indigo"
-                @click="
-                  onClickDowloadFile(
-                    'EV1_006',
-                    'template-2',
-                    'แบบแสดงรายละเอียดการเสนอผลงาน'
-                  )
-                "
-              >
-                <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
-              >
-            </div>
-            <div>
-              <q-btn
-                v-if="downloadFile2 != ''"
-                :href="downloadFile2"
-                target="_blank"
-                class="q-ml-sm"
-                color="blue"
-                flat
-                dense
-                icon="visibility"
-              >
-                <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
-              >
-            </div>
-          </div>
-          <div class="col-12"><q-separator /></div>
-          <div class="row">
-            <div class="col-12 q-pa-sm">
-              <div class="row q-col-gutter-md col-12">
-                <q-file
-                  ref="fileEvaluation2Ref"
-                  v-model="fileEvaluation2"
-                  :disable="!store.statusUpload"
-                  class="col-12"
-                  outlined
-                  dense
-                  label="อัปโหลดไฟล์"
-                  lazy-rules
-                  accept=".pdf"
-                  hide-bottom-space
-                  :rules="
-                    downloadFile2 === ''
-                      ? [(val:any) => !!val || 'กรุณาเลือกไฟล์']
-                      : []
-                  "
-                >
-                  <template v-slot:prepend>
-                    <q-icon name="attach_file" />
-                  </template>
-                  <template v-slot:after>
-                    <q-btn
-                      :disable="!store.statusUpload"
-                      flat
-                      round
-                      dense
-                      color="primary"
-                      icon="mdi-upload"
-                      @click="
-                        fetchPathUpload(
-                          'เล่ม 1',
-                          evaluateId,
-                          '2-แบบแสดงรายละเอียดการเสนอผลงาน',
-                          fileEvaluation2
-                        )
-                      "
-                      ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
-                    >
-                  </template>
-                </q-file>
-              </div>
-            </div>
-          </div>
-        </q-card>
-      </div> -->
-
-      <!-- แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก) -->
-      <!-- <div class="col-6" v-if="store.currentStep === 2">
-        <q-card bordered class="cardSp1">
-          <div
-            class="col-12 row text-weight-medium bg-grey-1 q-py-sm q-pl-md q-pr-sm no-wrap"
-          >
-            <div>
-              แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล
-              (เอกสารแบบ ก.)
-            </div>
-            <q-space />
-            <div>
-              <q-btn
-                flat
-                dense
-                icon="download"
-                color="indigo"
-                @click="
-                  onClickDowloadFile(
-                    'EV1_007',
-                    'template-3',
-                    'แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก)'
-                  )
-                "
-              >
-                <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
-              >
-            </div>
-            <div v-if="downloadFile3 != ''">
-              <q-btn
-                :href="downloadFile3"
-                target="_blank"
-                flat
-                dense
-                icon="visibility"
-                class="q-ml-sm"
-                color="blue"
-              >
-                <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
-              >
-            </div>
-          </div>
-          <div class="col-12"><q-separator /></div>
-          <div class="row">
-            <div class="col-12 q-pa-sm">
-              <q-file
-                ref="fileEvaluation3Ref"
-                v-model="fileEvaluation3"
-                :disable="!store.statusUpload"
-                class="col-12"
-                outlined
-                dense
-                lazy-rules
-                hide-bottom-space
-                accept=".pdf"
-                :rules="
-                  downloadFile3 === ''
-                    ? [(val:any) => !!val || 'กรุณาเลือกไฟล์']
-                    : []
-                "
-                label="อัปโหลดไฟล์"
-              >
-                <template v-slot:prepend>
-                  <q-icon name="attach_file" />
-                </template>
-                <template v-slot:after>
-                  <q-btn
-                    :disable="!store.statusUpload"
-                    flat
-                    round
-                    dense
-                    color="primary"
-                    icon="mdi-upload"
-                    @click="
-                      fetchPathUpload(
-                        'เล่ม 1',
-                        evaluateId,
-                        '3-แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก)',
-                        fileEvaluation3
-                      )
-                    "
-                    ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
-                  >
-                </template>
-              </q-file>
-            </div>
-          </div>
-        </q-card>
-      </div> -->
-
-      <!-- แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9) -->
-      <!-- <div class="col-6" v-if="store.currentStep === 2">
-        <q-card bordered class="cardSp1">
-          <div
-            class="col-12 row text-weight-medium bg-grey-1 q-py-sm q-pl-md q-pr-sm no-wrap"
-          >
-            <div class="col-7">
-              แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)
-            </div>
-            <q-space />
-            <div>
-              <q-btn
-                flat
-                dense
-                icon="download"
-                color="indigo"
-                @click="
-                  onClickDowloadFile(
-                    'EV1_009',
-                    'template-5',
-                    'แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)'
-                  )
-                "
-                ><q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
-              >
-            </div>
-            <div>
-              <q-btn
-                v-if="downloadFile5 != ''"
-                :href="downloadFile5"
-                target="_blank"
-                flat
-                dense
-                icon="visibility"
-                class="q-ml-sm"
-                color="blue"
-              >
-                <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
-              >
-            </div>
-          </div>
-          <div class="col-12"><q-separator /></div>
-          <div class="row">
-            <div class="col-12 q-pa-sm">
-              <q-file
-                ref="fileEvaluation5Ref"
-                v-model="fileEvaluation5"
-                :disable="!store.statusUpload"
-                class="col-12"
-                outlined
-                dense
-                lazy-rules
-                accept=".pdf"
-                hide-bottom-space
-                label="อัปโหลดไฟล์"
-                :rules="
-                  downloadFile5 === ''
-                    ? [(val:any) => !!val || 'กรุณาเลือกไฟล์']
-                    : []
-                "
-              >
-                <template v-slot:prepend>
-                  <q-icon name="attach_file" />
-                </template>
-                <template v-slot:after>
-                  <q-btn
-                    :disable="!store.statusUpload"
-                    flat
-                    round
-                    dense
-                    color="primary"
-                    icon="mdi-upload"
-                    @click="
-                      fetchPathUpload(
-                        'เล่ม 1',
-                        evaluateId,
-                        '5-แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)',
-                        fileEvaluation5
-                      )
-                    "
-                    ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
-                  >
-                </template>
-              </q-file>
-            </div>
-          </div>
-        </q-card>
-      </div> -->
-
-      <!-- แบบประเมินคุณลักษณะบุคคล -->
-      <!-- <div class="col-6" v-if="store.currentStep === 2">
-        <q-card bordered class="cardSp1">
-          <div
-            class="col-12 row text-weight-medium bg-grey-1 q-py-sm q-pl-md q-pr-sm items-center"
-          >
-            <div>แบบประเมินคุณลักษณะบุคคล</div>
-            <q-space />
-            <div>
-              <q-btn
-                flat
-                dense
-                icon="download"
-                color="indigo"
-                @click="
-                  onClickDowloadFile(
-                    'EV1_008',
-                    'template-4',
-                    'แบบประเมินคุณลักษณะบุคคล'
-                  )
-                "
-              >
-                <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
-              >
-            </div>
-            <div>
-              <q-btn
-                v-if="downloadFile4 != ''"
-                :href="downloadFile4"
-                target="_blank"
-                flat
-                dense
-                icon="visibility"
-                class="q-ml-sm"
-                color="blue"
-              >
-                <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
-              >
-            </div>
-          </div>
-          <div class="col-12"><q-separator /></div>
-          <div class="row">
-            <div class="col-12 q-pa-sm">
-              <q-file
-                ref="fileEvaluation4Ref"
-                v-model="fileEvaluation4"
-                :disable="!store.statusUpload"
-                class="col-12"
-                outlined
-                dense
-                lazy-rules
-                hide-bottom-space
-                accept=".pdf"
-                label="อัปโหลดไฟล์"
-                :rules="
-                  downloadFile4 === ''
-                    ? [(val:any) => !!val || 'กรุณาเลือกไฟล์']
-                    : []
-                "
-              >
-                <template v-slot:prepend>
-                  <q-icon name="attach_file" />
-                </template>
-                <template v-slot:after>
-                  <q-btn
-                    flat
-                    round
-                    dense
-                    :disable="!store.statusUpload"
-                    color="primary"
-                    icon="mdi-upload"
-                    @click="
-                      fetchPathUpload(
-                        'เล่ม 1',
-                        evaluateId,
-                        '4-แบบประเมินคุณลักษณะบุคคล',
-                        fileEvaluation4
-                      )
-                    "
-                    ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
-                  >
-                </template>
-              </q-file>
-            </div>
-          </div>
-        </q-card>
-      </div> -->
-
-      <!--ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11) -->
-      <!-- <div class="col-6" v-if="store.currentStep === 2">
-        <q-card bordered class="cardSp1">
-          <div
-            class="col-12 row text-weight-medium bg-grey-1 q-py-sm q-pl-md q-pr-sm items-center"
-          >
-            <div>ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)</div>
-            <q-space />
-            <div>
-              <q-btn
-                flat
-                dense
-                icon="download"
-                color="indigo"
-                @click="
-                  onClickDowloadFile(
-                    'EV1_010',
-                    'template-6',
-                    'ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)'
-                  )
-                "
-              >
-                <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
-              >
-            </div>
-            <div>
-              <q-btn
-                v-if="downloadFile6 != ''"
-                :href="downloadFile6"
-                target="_blank"
-                flat
-                dense
-                icon="visibility"
-                class="q-ml-sm"
-                color="blue"
-              >
-                <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
-              >
-            </div>
-          </div>
-          <div class="col-12"><q-separator /></div>
-          <div class="row">
-            <div class="col-12 q-pa-sm">
-              <q-file
-                ref="fileEvaluation6Ref"
-                v-model="fileEvaluation6"
-                :disable="!store.statusUpload"
-                class="col-12"
-                outlined
-                hide-bottom-space
-                dense
-                lazy-rules
-                label="อัปโหลดไฟล์"
-                accept=".pdf"
-                :rules="
-                  downloadFile6 === ''
-                    ? [(val:any) => !!val || 'กรุณาเลือกไฟล์']
-                    : []
-                "
-              >
-                <template v-slot:prepend>
-                  <q-icon name="attach_file" />
-                </template>
-                <template v-slot:after>
-                  <q-btn
-                    :disable="!store.statusUpload"
-                    flat
-                    round
-                    dense
-                    color="primary"
-                    icon="mdi-upload"
-                    @click="
-                      fetchPathUpload(
-                        'เล่ม 1',
-                        evaluateId,
-                        '6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)',
-                        fileEvaluation6
-                      )
-                    "
-                    ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
-                  >
-                </template>
-              </q-file>
-            </div>
-          </div>
-        </q-card>
-      </div> -->
     </div>
   </div>
 
diff --git a/src/modules/06_evaluate/components/step/step3.vue b/src/modules/06_evaluate/components/step/step3.vue
index 019a960..93ae4b8 100644
--- a/src/modules/06_evaluate/components/step/step3.vue
+++ b/src/modules/06_evaluate/components/step/step3.vue
@@ -13,7 +13,7 @@ const $q = useQuasar();
 const store = useEvaluateStore();
 const mixin = useCounterMixin();
 const route = useRoute();
-const { showLoader, hideLoader, messageError } = mixin;
+const { messageError } = mixin;
 
 /** id ประเมิน*/
 const evaluateId = ref<string>(route.params.id.toString());
@@ -21,6 +21,7 @@ const evaluateId = ref<string>(route.params.id.toString());
 /** emit*/
 const emit = defineEmits(["update:file"]);
 
+const isLoading = ref(false);
 const selectedItem = ref(1);
 const formTemplates = ref([
   {
@@ -55,8 +56,10 @@ function handleItemClick(itemNumber: number) {
  * function เรีกยเอกสาร
  * @param fileName ชื่อเอกสาร
  */
-async function fetchDocument(fileName: string) {
-  showLoader();
+async function fetchDocument(fileName: string, forceDownload = false) {
+  if (forceDownload) {
+    isLoading.value = true;
+  }
   evaluateId.value &&
     (await http
       .get(config.API.loadFileDocument("เล่ม 1", evaluateId.value, fileName))
@@ -67,7 +70,7 @@ async function fetchDocument(fileName: string) {
         messageError($q, err);
       })
       .finally(() => {
-        hideLoader();
+        isLoading.value = false;
       }));
 }
 
@@ -95,7 +98,10 @@ async function downloadFile(url: string) {
 
 /** HooK lifecycle*/
 onMounted(async () => {
-  await fetchDocument(formTemplates.value[selectedItem.value - 1].fileName);
+  await fetchDocument(
+    formTemplates.value[selectedItem.value - 1].fileName,
+    true
+  );
 });
 </script>
 
@@ -111,7 +117,8 @@ onMounted(async () => {
       @click="handleItemClick(index + 1)"
       class="cursor-pointer"
     >
-      <q-item-section>{{ item.title }}</q-item-section>
+      <q-skeleton v-if="isLoading" type="text" width="100%" />
+      <q-item-section v-else>{{ item.title }}</q-item-section>
     </q-item>
   </q-list>
 </template>
diff --git a/src/modules/06_evaluate/components/step/step4.vue b/src/modules/06_evaluate/components/step/step4.vue
index 56d583d..9f0c4a2 100644
--- a/src/modules/06_evaluate/components/step/step4.vue
+++ b/src/modules/06_evaluate/components/step/step4.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
-import { useQuasar } from "quasar";
+import { is, useQuasar } from "quasar";
 import axios from "axios";
 
 import http from "@/plugins/http";
@@ -23,6 +23,7 @@ const formTemplates = ref<any[]>([
     fileName: "1-แบบพิจารณาคุณสมบัติบุคคล (ฉบับแก้ไข)",
     downloadFile: "",
     file: null,
+    isLoading: false,
   },
   {
     code: "EV1_006",
@@ -31,6 +32,7 @@ const formTemplates = ref<any[]>([
     fileName: "2-แบบแสดงรายละเอียดการเสนอผลงาน (ฉบับแก้ไข)",
     downloadFile: "",
     file: null,
+    isLoading: false,
   },
   {
     code: "EV1_008",
@@ -39,6 +41,7 @@ const formTemplates = ref<any[]>([
     fileName: "4-แบบประเมินคุณลักษณะบุคคล (ฉบับแก้ไข)",
     downloadFile: "",
     file: null,
+    isLoading: false,
   },
   {
     code: "EV1_010",
@@ -47,6 +50,7 @@ const formTemplates = ref<any[]>([
     fileName: "6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11) (ฉบับแก้ไข)",
     downloadFile: "",
     file: null,
+    isLoading: false,
   },
 ]);
 
@@ -181,6 +185,10 @@ async function uploadfile(uploadUrl: string, file: any) {
  * @param fileName ชื่อไฟล์
  */
 async function downloadFile(fileName: string) {
+  const loadingKey = formTemplates.value.findIndex(
+    (item) => item.fileName === fileName
+  );
+  formTemplates.value[loadingKey].isLoading = true;
   await http
     .get(config.API.loadFileDocument("เล่ม 1", evaluateId.value, fileName))
     .then((res) => {
@@ -190,13 +198,15 @@ async function downloadFile(fileName: string) {
       if (index !== -1) {
         formTemplates.value[index].downloadFile = res.data.downloadUrl;
       }
+    })
+    .finally(() => {
+      formTemplates.value[loadingKey].isLoading = false;
     });
 }
 
 /**lifecycle Hooks*/
 onMounted(async () => {
   try {
-    showLoader();
     await Promise.all([
       fetcheSigner(evaluateId.value),
       fetchCheckSpec(evaluateId.value),
@@ -206,8 +216,6 @@ onMounted(async () => {
     ]);
   } catch (error) {
     console.log(error);
-  } finally {
-    hideLoader();
   }
 });
 </script>
@@ -226,7 +234,12 @@ onMounted(async () => {
 
   <div class="row q-col-gutter-sm q-pa-sm">
     <div class="col-6" v-for="(item, index) in formTemplates" :key="index">
+      <q-skeleton
+        :height="store.currentStep !== 4 ? '50px' : '100px'"
+        v-if="item.isLoading"
+      />
       <q-card
+        v-else
         bordered
         class="cardSp1"
         v-if="
diff --git a/src/modules/06_evaluate/components/step/step5.vue b/src/modules/06_evaluate/components/step/step5.vue
index 38accb5..5b9c62d 100644
--- a/src/modules/06_evaluate/components/step/step5.vue
+++ b/src/modules/06_evaluate/components/step/step5.vue
@@ -12,7 +12,7 @@ import type { FileObject } from "@/modules/06_evaluate/interface/main";
 const $q = useQuasar();
 const mixins = useCounterMixin();
 const route = useRoute();
-const { date2Thai, success, showLoader, hideLoader } = mixins;
+const { date2Thai, success, showLoader, hideLoader, messageError } = mixins;
 
 /** id ประเมิน*/
 const evaluateId = ref<string>(route.params.id.toString());
@@ -20,6 +20,7 @@ const evaluateId = ref<string>(route.params.id.toString());
 const dateStartAnnounce = ref<string | null>(date2Thai(new Date()));
 const dateEndAnnounce = ref<string | null>(date2Thai(new Date()));
 const statusFile = ref<boolean>(false);
+const isLoading = ref<boolean>(false);
 
 /** เอกสารประกาศผลการคัดเลือกบุคคล*/
 const items = ref<FileObject[]>([
@@ -44,22 +45,16 @@ const items = ref<FileObject[]>([
 ]);
 
 /** fuinction เรียกข้อมูลลิงก์ดาวนฺโหลด*/
-function onClickfetchDocument(fileName: string, type: string) {
+async function onClickfetchDocument(fileName: string, type: string) {
   if (evaluateId.value) {
-    showLoader();
-    http
+    await http
       .get(config.API.loadFileDocument("เล่ม 1", evaluateId.value, fileName))
       .then((res) => {
         const downloadUrl = res.data.downloadUrl;
         type === "COPPY" && coppyLink(downloadUrl);
         type === "CHECK" && (statusFile.value = true);
       })
-      .catch(() => {})
-      .finally(() => {
-        setTimeout(() => {
-          hideLoader();
-        }, 1500);
-      });
+      .catch(() => {});
   }
 }
 
@@ -71,9 +66,10 @@ async function coppyLink(link: string) {
 }
 
 /** function เรียกข้อมูลวันที่ประกาศ*/
-function fetchCheckDate() {
+async function fetchCheckDate() {
+  isLoading.value = true;
   evaluateId.value &&
-    http
+    (await http
       .get(config.API.evaluationCheckDate(evaluateId.value))
       .then((res) => {
         const data = res.data.result;
@@ -82,7 +78,12 @@ function fetchCheckDate() {
         endDate.setDate(endDate.getDate() + 30);
         dateEndAnnounce.value = date2Thai(endDate);
       })
-      .catch(() => {});
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        isLoading.value = false;
+      }));
 }
 
 /** Hook lifecycle*/
@@ -91,10 +92,12 @@ onMounted(async () => {
   await onClickfetchDocument("บันทึกแจ้งผลการประกาศคัดเลือก", "CHECK");
 });
 </script>
+`
 
 <template>
   <div class="row col-12 q-pa-sm">
-    <div class="row col-12 q-col-gutter-sm">
+    <q-skeleton v-if="isLoading" style="width: 100%; height: 300px" />
+    <div v-else class="row col-12 q-col-gutter-sm">
       <div class="col-12 text-center">
         <q-banner rounded class="text-weight-bold text-red-14 bg-red-1">
           <div class="text-weight-bold">
diff --git a/src/modules/06_evaluate/components/step/step6.vue b/src/modules/06_evaluate/components/step/step6.vue
index efccae3..8926770 100644
--- a/src/modules/06_evaluate/components/step/step6.vue
+++ b/src/modules/06_evaluate/components/step/step6.vue
@@ -50,6 +50,10 @@ const formCommand = reactive<FormCommand>({
 
 const modalView = ref<boolean>(false);
 
+const isLoading = ref<boolean>(false); // ใช้สำหรับเช็คการโหลดไฟล์
+const isLoadingFile = ref<boolean>(false);
+const isLoadingDate = ref<boolean>(false);
+
 /** function อัปเดท ผลงาน,ผู้เซ็นเอกสาร*/
 function updateInput(value: any) {
   const ref = {
@@ -85,16 +89,18 @@ async function fetchPathUpload(
     showLoader();
     await http
       .post(config.API.loadPathDocument(volume, id), body)
-      .then((res) => {
+      .then(async (res) => {
         const foundKey: string | undefined = Object.keys(res.data).find(
           (key) =>
             res.data[key]?.fileName !== undefined &&
             res.data[key]?.fileName !== ""
         );
-        foundKey && uploadfile(res.data[foundKey]?.uploadUrl, file);
+        foundKey && (await uploadfile(res.data[foundKey]?.uploadUrl, file));
       })
       .catch((err) => {
         messageError($q, err);
+      })
+      .finally(() => {
         hideLoader();
       });
   }
@@ -129,7 +135,7 @@ async function uploadfile(uploadUrl: string, file: any) {
  * @param id ประเมิน
  */
 async function fetcheSigner(id: string) {
-  showLoader();
+  isLoading.value = true;
   await http
     .get(config.API.evaluationSignerDoc2(id))
     .then((res) => {
@@ -148,40 +154,43 @@ async function fetcheSigner(id: string) {
       formCommand.author = data.authorDoc2;
       formCommand.subject = data.subjectDoc2;
       formCommand.assignedPosition = data.assignedPosition;
-
       assignedPosLevel.value = data.assignedPosLevel;
-
       store.statusUpload6 = data.isUpdated;
     })
     .catch((err) => {
       messageError($q, err);
-      // store.statusUpload6 = false;
-      // getCommander();
     })
     .finally(() => {
-      hideLoader();
+      isLoading.value = false;
     });
 }
 
 const dateEndPrepareDoc2 = ref<string | null>(date2Thai(new Date()));
 /** functoin เรียกข้อมูลวันสุดท้ายของการส่งผลงาน*/
 async function fetchCheckDate() {
-  evaluateId.value &&
-    (await http
-      .get(config.API.evaluationCheckDate(evaluateId.value))
-      .then((res) => {
-        const data = res.data.result;
+  if (!evaluateId.value) return;
+  isLoadingDate.value = true;
+  await http
+    .get(config.API.evaluationCheckDate(evaluateId.value))
+    .then((res) => {
+      const data = res.data.result;
 
-        const endDate = new Date(data.dateEndAnnounce);
-        endDate.setDate(endDate.getDate() + 180);
-        dateEndPrepareDoc2.value = date2Thai(endDate);
-      })
-      .catch((err) => {}));
+      const endDate = new Date(data.dateEndAnnounce);
+      endDate.setDate(endDate.getDate() + 180);
+      dateEndPrepareDoc2.value = date2Thai(endDate);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      isLoadingDate.value = false;
+    });
 }
 
 const downloadUrl = ref<string>("");
 /** function เช็คไฟล์อัปโหลด*/
 async function checkDoc() {
+  isLoadingFile.value = true;
   await http
     .get(
       config.API.loadFileDocument("เล่ม 2", evaluateId.value, "1-เอกสารเล่ม 2")
@@ -195,26 +204,10 @@ async function checkDoc() {
       };
 
       emit("update:form", formCommand, ref);
+      isLoadingFile.value = false;
     });
 }
 
-// function getCommander() {
-//   http
-//     .get(config.API.searchCommander)
-//     .then((res) => {
-//       const data = res.data.result;
-//       formCommand.commanderFullname = data.commanderFullname;
-//       formCommand.commanderPosition = data.commanderPosition;
-//       formCommand.commanderAboveFullname = data.commanderAboveFullname;
-//       formCommand.commanderAbovePosition = data.commanderAbovePosition;
-//       formCommand.commanderOrg = data.commanderOrg;
-//       formCommand.commanderAboveOrg = data.commanderAboveOrg;
-//     })
-//     .catch((e) => {
-//       messageError($q, e);
-//     });
-// }
-
 function onAddSubject() {
   formCommand.subject.push("");
 }
@@ -256,9 +249,10 @@ onMounted(async () => {
 
 <template>
   <div class="row col-12 q-pa-sm">
-    <div class="row q-col-gutter-sm">
+    <div class="row col-12 q-col-gutter-sm">
       <div class="col-12 text-center">
-        <q-banner rounded class="text-weight-bold text-red-14 bg-red-1">
+        <q-skeleton v-if="isLoadingDate" height="50px" />
+        <q-banner v-else rounded class="text-weight-bold text-red-14 bg-red-1">
           <div class="text-weight-bold">
             <q-icon name="info_outline" color="red-14" size="24px" />
             วันสุดท้ายของการส่งผลงานคือวันที่ {{ dateEndPrepareDoc2 }}
@@ -268,7 +262,14 @@ onMounted(async () => {
 
       <!-- ผลงาน -->
       <div class="col-12">
-        <q-card bordered class="shadow-0" style="border: 1px solid #d6dee1">
+        <q-skeleton v-if="isLoading" height="200px" width="100%" />
+
+        <q-card
+          v-else
+          bordered
+          class="shadow-0"
+          style="border: 1px solid #d6dee1"
+        >
           <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">ผลงาน</div>
           <div class="col-12"><q-separator /></div>
           <div class="col-12 q-pa-sm">
@@ -372,7 +373,13 @@ onMounted(async () => {
 
       <!-- เลือกผู้เซ็นเอกสาร -->
       <div class="col-12">
-        <q-card bordered class="shadow-0" style="border: 1px solid #d6dee1">
+        <q-skeleton v-if="isLoading" height="200px" width="100%" />
+        <q-card
+          v-else
+          bordered
+          class="shadow-0"
+          style="border: 1px solid #d6dee1"
+        >
           <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
             เลือกผู้เซ็นเอกสาร
           </div>
@@ -541,7 +548,13 @@ onMounted(async () => {
 
       <!-- อัปไฟล์ -->
       <div class="col-12" v-if="store.currentStep === 6">
-        <q-card bordered class="shadow-0" style="border: 1px solid #d6dee1">
+        <q-skeleton height="100px" v-if="isLoadingFile" />
+        <q-card
+          v-else
+          bordered
+          class="shadow-0"
+          style="border: 1px solid #d6dee1"
+        >
           <div class="col-12 row bg-grey-1">
             <div class="text-weight-medium q-py-sm q-px-md">เอกสารเล่ม 2</div>
             <q-space />
diff --git a/src/modules/06_evaluate/components/step/step7.vue b/src/modules/06_evaluate/components/step/step7.vue
index a6cf6b9..40562d6 100644
--- a/src/modules/06_evaluate/components/step/step7.vue
+++ b/src/modules/06_evaluate/components/step/step7.vue
@@ -13,7 +13,7 @@ import { useCounterMixin } from "@/stores/mixin";
 const $q = useQuasar();
 const mixin = useCounterMixin();
 const route = useRoute();
-const { showLoader, hideLoader, messageError } = mixin;
+const { messageError } = mixin;
 
 /** emit*/
 const emit = defineEmits(["update:file"]);
@@ -22,28 +22,25 @@ const emit = defineEmits(["update:file"]);
 const evaluateId = ref<string>(route.params.id.toString());
 
 const selectedItem = ref(1);
+const isLoading = ref(false);
 
 /** function เรีกยเอกสาร*/
 async function fetchDocument() {
-  showLoader();
-  evaluateId.value &&
-    (await http
-      .get(
-        config.API.loadFileDocument(
-          "เล่ม 2",
-          evaluateId.value,
-          "1-เอกสารเล่ม 2"
-        )
-      )
-      .then(async (res) => {
-        await downloadFile(res.data.downloadUrl);
-      })
-      .catch((err) => {
-        messageError($q, err);
-      })
-      .finally(() => {
-        hideLoader();
-      }));
+  if (!evaluateId.value) return;
+  isLoading.value = true;
+  await http
+    .get(
+      config.API.loadFileDocument("เล่ม 2", evaluateId.value, "1-เอกสารเล่ม 2")
+    )
+    .then(async (res) => {
+      await downloadFile(res.data.downloadUrl);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      isLoading.value = false;
+    });
 }
 
 /**
@@ -84,7 +81,9 @@ onMounted(async () => {
       active-class="text-primary"
       class="cursor-pointer"
     >
-      <q-item-section>เอกสารเล่ม 2</q-item-section>
+      <q-skeleton v-if="isLoading" type="text" width="100%" />
+
+      <q-item-section v-else>เอกสารเล่ม 2</q-item-section>
     </q-item>
   </q-list>
 </template>
diff --git a/src/modules/06_evaluate/components/step/step8.vue b/src/modules/06_evaluate/components/step/step8.vue
index ef226e4..b816fde 100644
--- a/src/modules/06_evaluate/components/step/step8.vue
+++ b/src/modules/06_evaluate/components/step/step8.vue
@@ -107,9 +107,11 @@ async function uploadfile(uploadUrl: string, file: any) {
 }
 
 const downloadUrl = ref<string>("");
+const isLoadingFile = ref<boolean>(false);
 /** function เช็คไฟล์อัปโหลด*/
-function checkDoc() {
-  http
+async function checkDoc() {
+  isLoadingFile.value = true;
+  await http
     .get(
       config.API.loadFileDocument(
         "เล่ม 2",
@@ -119,6 +121,9 @@ function checkDoc() {
     )
     .then((res: any) => {
       downloadUrl.value = res.data.downloadUrl;
+    })
+    .finally(() => {
+      isLoadingFile.value = false;
     });
 }
 
@@ -148,12 +153,9 @@ async function fetcheSigner(id: string) {
 /** lifecycleHook*/
 onMounted(async () => {
   try {
-    showLoader();
     await Promise.all([checkDoc(), fetcheSigner(evaluateId.value)]);
   } catch (error) {
     console.log(error);
-  } finally {
-    hideLoader();
   }
 });
 </script>
@@ -178,7 +180,11 @@ onMounted(async () => {
           (store.currentStep !== 8 && downloadUrl) || store.currentStep == 8
         "
       >
-        <q-card class="shadow-0" bordered>
+        <q-skeleton
+          :height="store.currentStep !== 8 ? '50px' : '100px'"
+          v-if="isLoadingFile"
+        />
+        <q-card v-else class="shadow-0" bordered>
           <div class="row col-12 bg-grey-1 q-px-sm q-py-xs items-center">
             <div class="text-weight-medium">เอกสารเล่ม 2 (ฉบับแก้ไข)</div>
             <q-space />
diff --git a/src/modules/06_evaluate/components/viewstep/popupHistory.vue b/src/modules/06_evaluate/components/viewstep/popupHistory.vue
index fd03ab9..ecfdaea 100644
--- a/src/modules/06_evaluate/components/viewstep/popupHistory.vue
+++ b/src/modules/06_evaluate/components/viewstep/popupHistory.vue
@@ -13,7 +13,9 @@ import HeaderDialog from "@/components/DialogHeader.vue";
 const $q = useQuasar();
 const route = useRoute();
 const mixins = useCounterMixin();
-const { showLoader, hideLoader, date2Thai, messageError } = mixins;
+const { date2Thai, messageError } = mixins;
+
+const isLoading = ref<boolean>(false);
 
 const evaluateId = computed(() => {
   const id = route.params.id ? route.params.id.toString() : "";
@@ -85,7 +87,7 @@ async function fetchListHistory(id: string) {
     minute: "2-digit",
     second: "2-digit",
   };
-  showLoader();
+  isLoading.value = true;
   await http
     .get(config.API.evaluationHistory(id))
     .then((res) => {
@@ -104,7 +106,7 @@ async function fetchListHistory(id: string) {
       messageError($q, err);
     })
     .finally(() => {
-      hideLoader();
+      isLoading.value = false;
     });
 }
 
@@ -124,7 +126,7 @@ watch(
       <q-card-section>
         <div class="col-xs-12 col-sm-12 col-md-12 row q-col-gutter-md">
           <div class="col-12">
-            <q-table
+            <d-table
               ref="table"
               flat
               bordered
@@ -133,6 +135,8 @@ watch(
               :rows="row"
               dense
               :rows-per-page-options="[10, 25, 50, 100]"
+              :pagination="{ page: 1, rowsPerPage: 10 }"
+              :loading="isLoading"
             >
               <template v-slot:header="props">
                 <q-tr :props="props">
@@ -161,7 +165,7 @@ watch(
                   </q-td>
                 </q-tr>
               </template>
-            </q-table>
+            </d-table>
           </div>
         </div>
       </q-card-section>
@@ -169,31 +173,4 @@ watch(
   </q-dialog>
 </template>
 
-<style lang="scss" scoped>
-.custom-header-table {
-  height: auto;
-  .q-table tr:nth-child(odd) td {
-    background: white;
-  }
-  .q-table tr:nth-child(even) td {
-    background: #f8f8f8;
-  }
-
-  .q-table thead tr {
-    background: #ecebeb;
-  }
-
-  .q-table thead tr th {
-    position: sticky;
-    z-index: 1;
-  }
-  /* this will be the loading indicator */
-  .q-table thead tr:last-child th {
-    /* height of all previous header rows */
-    top: 48px;
-  }
-  .q-table thead tr:first-child th {
-    top: 0;
-  }
-}
-</style>
+<style lang="scss" scoped></style>
diff --git a/src/modules/06_evaluate/components/viewstep/tableStep1.vue b/src/modules/06_evaluate/components/viewstep/tableStep1.vue
index a19e67b..9bfa222 100644
--- a/src/modules/06_evaluate/components/viewstep/tableStep1.vue
+++ b/src/modules/06_evaluate/components/viewstep/tableStep1.vue
@@ -8,6 +8,10 @@ const props = defineProps({
     type: Array as () => any[],
     require: true,
   },
+  isLoading: {
+    type: Boolean,
+    default: false,
+  },
 });
 </script>
 
@@ -24,6 +28,9 @@ const props = defineProps({
       virtual-scroll
       class="row col-12"
       :style="$q.screen.lt.sm ? 'width: 80vw' : 'width: 50vw;'"
+      :pagination="{ page: 1, rowsPerPage: 10 }"
+      :loading="isLoading"
+      row-key="id"
     >
       <template v-slot:header="props">
         <q-tr :props="props" class="bg-grey-2">
@@ -46,30 +53,4 @@ const props = defineProps({
   </div>
 </template>
 
-<style lang="scss" scoped>
-.custom-header-table {
-  height: auto;
-  .q-table tr:nth-child(odd) td {
-    background: white;
-  }
-  .q-table tr:nth-child(even) td {
-    background: #f8f8f8;
-  }
-
-  .q-table thead tr {
-    background: #ecebeb;
-  }
-
-  .q-table thead tr th {
-    position: sticky;
-  }
-  /* this will be the loading indicator */
-  .q-table thead tr:last-child th {
-    /* height of all previous header rows */
-    top: 48px;
-  }
-  .q-table thead tr:first-child th {
-    top: 0;
-  }
-}
-</style>
+<style lang="scss" scoped></style>
diff --git a/src/modules/06_evaluate/components/viewstep/viewStep1.vue b/src/modules/06_evaluate/components/viewstep/viewStep1.vue
index 7834f54..1f2da1b 100644
--- a/src/modules/06_evaluate/components/viewstep/viewStep1.vue
+++ b/src/modules/06_evaluate/components/viewstep/viewStep1.vue
@@ -29,8 +29,7 @@ const storeEva = useEvaluateStore();
 const storeData = useDataStore();
 const $q = useQuasar();
 const route = useRoute();
-const { showLoader, hideLoader, messageError, date2Thai, findOrgNameHtml } =
-  mixin;
+const { messageError, date2Thai, findOrgNameHtml } = mixin;
 const {
   columnsCertificates,
   columnSalaries,
@@ -76,8 +75,19 @@ const formDetail = reactive<any>({
   honor: [],
 });
 
+const isLoading = reactive({
+  loadDetail: false,
+  loadEducation: false,
+  loadCertificate: false,
+  loadSalary: false,
+  loadTraining: false,
+  loadAssessment: false,
+  loadExperience: false,
+});
+
 /** function เรียกข้อมูลตรวจสอบคุณสมบัติ*/
 async function fetchDetail() {
+  isLoading.loadDetail = true;
   try {
     if (!storeData.dataprofilePosition) {
       const res = await http.get(config.API.profilePosition());
@@ -87,6 +97,8 @@ async function fetchDetail() {
     }
   } catch (error) {
     messageError($q, error);
+  } finally {
+    isLoading.loadDetail = false;
   }
 }
 
@@ -109,58 +121,113 @@ async function updateFormDetail(data: DataProfile) {
   formDetail.posExecutive = data.posExecutiveName;
   formDetail.positionArea = data.positionArea;
   await fetchDataAllDetail();
-
   emit("update:formDeital", formDetail);
 }
 
 async function fetchDataAllDetail() {
   // ดึงข้อมูลประวัติการศึกษา
-  http.get(config.API.dataUserEducations).then((res) => {
-    formDetail.educations = res.data.result;
-  });
+  isLoading.loadEducation = true;
+  http
+    .get(config.API.dataUserEducations)
+    .then((res) => {
+      formDetail.educations = res.data.result;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .then(() => {
+      isLoading.loadEducation = false;
+    });
 
   // ดึงข้อมูลใบอนุญาตประกอบวิชาชีพ
-  http.get(config.API.dataUserCertificate("certificate")).then((res) => {
-    formDetail.certificates = res.data.result.map((e: CertificatesForm) => ({
-      certificateNo: e.certificateNo,
-      certificateType: e.certificateType,
-      expireDate: e.expireDate,
-      issueDate: e.issueDate,
-      issuer: e.issuer,
-    }));
-  });
+  isLoading.loadCertificate = true;
+  http
+    .get(config.API.dataUserCertificate("certificate"))
+    .then((res) => {
+      formDetail.certificates = res.data.result.map((e: CertificatesForm) => ({
+        certificateNo: e.certificateNo,
+        certificateType: e.certificateType,
+        expireDate: e.expireDate,
+        issueDate: e.issueDate,
+        issuer: e.issuer,
+      }));
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      isLoading.loadCertificate = false;
+    });
 
   // ดึงข้อมูลประวัติการรับราชการ
-  http.get(config.API.dataUserSalaryPosition).then((res) => {
-    formDetail.salaries = res.data.result;
-  });
+  isLoading.loadSalary = true;
+  http
+    .get(config.API.dataUserSalaryPosition)
+    .then((res) => {
+      formDetail.salaries = res.data.result;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      isLoading.loadSalary = false;
+    });
 
   // ดึงข้อมูลประวัติการฝึกอบรมดูงาน
-  http.get(config.API.dataUserCertificate("training")).then((res) => {
-    formDetail.trainings = res.data.result.map((e: any) => ({
-      dateOrder: e.dateOrder,
-      department: e.department,
-      duration: e.duration,
-      endDate: e.endDate,
-      name: e.name,
-      numberOrder: e.numberOrder,
-      place: e.place,
-      startDate: e.startDate,
-      topic: e.topic,
-      yearly: e.yearly,
-    }));
-  });
+  isLoading.loadTraining = true;
+  http
+    .get(config.API.dataUserCertificate("training"))
+    .then((res) => {
+      formDetail.trainings = res.data.result.map((e: any) => ({
+        dateOrder: e.dateOrder,
+        department: e.department,
+        duration: e.duration,
+        endDate: e.endDate,
+        name: e.name,
+        numberOrder: e.numberOrder,
+        place: e.place,
+        startDate: e.startDate,
+        topic: e.topic,
+        yearly: e.yearly,
+      }));
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      isLoading.loadTraining = false;
+    });
 
-  http.get(config.API.dataUserPerformance).then((res) => {
-    formDetail.assessments = res.data.result.map((e: any) => ({
-      ...e,
-      isAdd: false,
-    }));
-  });
+  // ดึงข้อมูลประสบการณ์ในการปฏิบัติงาน
+  isLoading.loadExperience = true;
+  http
+    .get(config.API.dataUserPerformance)
+    .then((res) => {
+      formDetail.assessments = res.data.result.map((e: any) => ({
+        ...e,
+        isAdd: false,
+      }));
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      isLoading.loadExperience = false;
+    });
 
-  http.get(config.API.dataUserPortfolio).then((res) => {
-    formDetail.experience = res.data.result;
-  });
+  // ดึงข้อมูลผลงานที่เคยเสนอขอ
+  isLoading.loadExperience = true;
+  http
+    .get(config.API.dataUserPortfolio)
+    .then((res) => {
+      formDetail.experience = res.data.result;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      isLoading.loadExperience = false;
+    });
 }
 
 /**
@@ -168,40 +235,52 @@ async function fetchDataAllDetail() {
  * @param id ประเมิน
  */
 async function fetchCheckSpec(data: any) {
-  formDetail.userId = data.id;
-  formDetail.citizenId = data.citizenId;
-  formDetail.prefix = data.prefix;
-  formDetail.fullName = data.fullName;
-  formDetail.position = data.position;
-  formDetail.oc = data.oc;
-  formDetail.salary = data.salary ? formattedNumber(data.salary) : "";
-  formDetail.positionLevel = data.positionLevel;
-  formDetail.posNo = data.posNo;
-  formDetail.birthDate = data.birthDate;
-  formDetail.educations = data.educations;
-
-  formDetail.certificates = data.certificates.map((e: CertificatesForm) => ({
-    certificateNo: e.certificateNo,
-    certificateType: e.certificateType,
-    expireDate: date2Thai(e.expireDate),
-    issueDate: date2Thai(e.issueDate),
-    issuer: e.issuer,
-  }));
-  formDetail.salaries = data.salaries;
-  formDetail.trainings = data.trainings.map((e: any) => ({
-    dateOrder: date2Thai(e.dateOrder),
-    department: e.department,
-    duration: e.duration,
-    endDate: date2Thai(e.endDate),
-    name: e.name,
-    numberOrder: e.numberOrder,
-    place: e.place,
-    startDate: date2Thai(e.startDate),
-    topic: e.topic,
-    yearly: e.yearly,
-  }));
-  formDetail.assessments = data.performances;
-  formDetail.experience = data.portfolios;
+  isLoading.loadEducation = true;
+  isLoading.loadCertificate = true;
+  isLoading.loadSalary = true;
+  isLoading.loadTraining = true;
+  isLoading.loadExperience = true;
+  try {
+    formDetail.userId = data.id;
+    formDetail.citizenId = data.citizenId;
+    formDetail.prefix = data.prefix;
+    formDetail.fullName = data.fullName;
+    formDetail.position = data.position;
+    formDetail.oc = data.oc;
+    formDetail.salary = data.salary ? formattedNumber(data.salary) : "";
+    formDetail.positionLevel = data.positionLevel;
+    formDetail.posNo = data.posNo;
+    formDetail.birthDate = data.birthDate;
+    formDetail.educations = data.educations;
+    formDetail.certificates = data.certificates.map((e: CertificatesForm) => ({
+      certificateNo: e.certificateNo,
+      certificateType: e.certificateType,
+      expireDate: date2Thai(e.expireDate),
+      issueDate: date2Thai(e.issueDate),
+      issuer: e.issuer,
+    }));
+    formDetail.salaries = data.salaries;
+    formDetail.trainings = data.trainings.map((e: any) => ({
+      dateOrder: date2Thai(e.dateOrder),
+      department: e.department,
+      duration: e.duration,
+      endDate: date2Thai(e.endDate),
+      name: e.name,
+      numberOrder: e.numberOrder,
+      place: e.place,
+      startDate: date2Thai(e.startDate),
+      topic: e.topic,
+      yearly: e.yearly,
+    }));
+    formDetail.assessments = data.performances;
+    formDetail.experience = data.portfolios;
+  } finally {
+    isLoading.loadEducation = false;
+    isLoading.loadCertificate = false;
+    isLoading.loadSalary = false;
+    isLoading.loadTraining = false;
+    isLoading.loadExperience = false;
+  }
 }
 
 /**
@@ -218,6 +297,7 @@ function formattedNumber(x: number) {
 
 /** get data */
 function getData() {
+  isLoading.loadDetail = true;
   http
     .get(config.API.dataUserGovernment)
     .then(async (res) => {
@@ -229,6 +309,9 @@ function getData() {
     })
     .catch((e) => {
       messageError($q, e);
+    })
+    .finally(() => {
+      isLoading.loadDetail = false;
     });
 }
 
@@ -298,7 +381,6 @@ function onDeletePerformance(index: number) {
 
 onMounted(async () => {
   try {
-    showLoader();
     const promises = [];
 
     if (route.name === "evaluate-add") {
@@ -315,7 +397,6 @@ onMounted(async () => {
   } catch (error) {
     console.log(error);
   } finally {
-    hideLoader();
   }
 });
 </script>
@@ -327,7 +408,10 @@ onMounted(async () => {
     :style="$q.screen.lt.sm ? '' : 'height: 60vh; overflow: scroll;'"
   >
     <div class="row col-12">
-      <q-card class="col-12 cardSp1" bordered>
+      <div class="col-12" v-if="isLoading.loadDetail">
+        <q-skeleton height="200px" class="q-mb-md" />
+      </div>
+      <q-card v-else class="col-12 cardSp1" bordered>
         <div class="text-weight-bold row items-center bg-grey-2 col-12">
           <span class="q-ml-lg q-my-sm">ข้อมูลส่วนตัว</span>
         </div>
@@ -430,7 +514,10 @@ onMounted(async () => {
         </div>
       </q-card>
 
-      <q-card class="col-12 cardSp1" bordered>
+      <div class="col-12" v-if="isLoading.loadEducation">
+        <q-skeleton height="200px" class="q-mb-md" />
+      </div>
+      <q-card v-else class="col-12 cardSp1" bordered>
         <div class="text-weight-bold row items-center bg-grey-2 col-12">
           <span class="q-ml-lg q-my-sm">ประวัติการศึกษา </span>
         </div>
@@ -571,6 +658,7 @@ onMounted(async () => {
           class="col-12"
           :columns="columnsCertificates"
           :row="formDetail.certificates"
+          :is-loading="isLoading.loadCertificate"
         />
       </q-card>
 
@@ -579,7 +667,7 @@ onMounted(async () => {
           <span class="q-ml-lg q-my-sm">ประวัติการรับราชการ</span>
         </div>
         <div class="col-12"><q-separator /></div>
-        <div class="col-10">
+        <div class="col-10 q-pa-sm">
           <d-table
             ref="table"
             row-key="id"
@@ -590,6 +678,8 @@ onMounted(async () => {
             :rows="formDetail.salaries"
             :paging="true"
             :rows-per-page-options="[20, 50, 100]"
+            :pagination="{ page: 1, rowsPerPage: 20 }"
+            :loading="isLoading.loadSalary"
           >
             <template v-slot:header="props">
               <q-tr :props="props">
@@ -637,6 +727,7 @@ onMounted(async () => {
           class="col-12"
           :columns="columnTraining"
           :row="formDetail.trainings"
+          :is-loading="isLoading.loadTraining"
         />
       </q-card>
 
@@ -649,6 +740,7 @@ onMounted(async () => {
           class="col-12"
           :columns="columnExperience"
           :row="formDetail.experience"
+          :is-loading="isLoading.loadExperience"
         />
       </q-card>
 
@@ -681,6 +773,8 @@ onMounted(async () => {
               virtual-scroll
               class="row col-12"
               :style="$q.screen.lt.sm ? 'width: 80vw' : 'width: 50vw;'"
+              :pagination="{ page: 1, rowsPerPage: 20 }"
+              :loading="isLoading.loadExperience"
             >
               <template v-slot:header="props">
                 <q-tr :props="props" class="bg-grey-2">
diff --git a/src/modules/06_evaluate/views/EvaluateMain.vue b/src/modules/06_evaluate/views/EvaluateMain.vue
index 43d520d..4d52987 100644
--- a/src/modules/06_evaluate/views/EvaluateMain.vue
+++ b/src/modules/06_evaluate/views/EvaluateMain.vue
@@ -14,6 +14,7 @@ import TableListEvaluate from "@/modules/06_evaluate/components/TableListEvaluat
 import DialogMain from "@/modules/06_evaluate/components/DialogMain.vue"; // popup การเพิ่มประเมิน
 
 /** import Type*/
+import type { PropsTable } from "@/interface/PropsTable";
 import type { ListMenu } from "@/modules/06_evaluate/interface/evalute";
 import type { OptionStatus } from "@/modules/06_evaluate/interface/main";
 
@@ -23,9 +24,10 @@ const mixin = useCounterMixin();
 const store = useEvaluateStore();
 const dataStore = useDataStore();
 const router = useRouter();
-const { showLoader, hideLoader, messageError } = mixin;
+const { messageError } = mixin;
 
 /** ตัวแปร*/
+const isLoading = ref<boolean>(false);
 const modal = ref<boolean>(false);
 const menu = ref<ListMenu>();
 const listMenu = ref<ListMenu[]>([
@@ -49,13 +51,12 @@ const listMenu = ref<ListMenu[]>([
   },
 ]);
 
-const total = ref<number>(0);
-const totalList = ref<number>(1);
-const pagination = ref({
+const pagination = ref<PropsTable.Pagination>({
   sortBy: "createdAt",
   descending: true,
   page: 1,
   rowsPerPage: 10,
+  rowsNumber: 0,
 });
 
 /**
@@ -73,7 +74,8 @@ function openExpert() {
 
 /** function เรียกรายการประเมิน*/
 async function fetchEvaluteList() {
-  showLoader();
+  isLoading.value = true;
+
   const body = {
     page: pagination.value.page,
     pageSize: pagination.value.rowsPerPage,
@@ -83,17 +85,15 @@ async function fetchEvaluteList() {
   await http
     .put(config.API.evaluationList(), body)
     .then(async (res) => {
-      totalList.value = Math.ceil(
-        res.data.result.total / pagination.value.rowsPerPage
-      );
-      total.value = res.data.result.total;
-      store.fetchEvaluateList(res.data.result.data);
+      const result = res.data.result;
+      pagination.value.rowsNumber = result.total;
+      store.fetchEvaluateList(result.data);
     })
     .catch((err) => {
       messageError($q, err);
     })
     .finally(() => {
-      hideLoader();
+      isLoading.value = false;
     });
 }
 
@@ -191,13 +191,6 @@ function getSearch() {
   fetchEvaluteList();
 }
 
-watch(
-  () => pagination.value.rowsPerPage,
-  async () => {
-    getSearch();
-  }
-);
-
 /** hook lifecycle*/
 onMounted(async () => {
   await fetchEvaluteList();
@@ -323,9 +316,8 @@ onMounted(async () => {
           <div class="col-12">
             <TableListEvaluate
               :fetchData="fetchEvaluteList"
-              v-model:total="total"
-              v-model:total-list="totalList"
               v-model:pagination="pagination"
+              v-model:isLoading="isLoading"
             />
           </div>
         </q-card>
diff --git a/src/modules/07_appealComplain/views/Add.vue b/src/modules/07_appealComplain/views/Add.vue
index dba72b8..b486884 100644
--- a/src/modules/07_appealComplain/views/Add.vue
+++ b/src/modules/07_appealComplain/views/Add.vue
@@ -21,6 +21,7 @@ const $q = useQuasar();
 const mixin = useCounterMixin();
 const storeData = useDataStore();
 
+const isLoad = ref<boolean>(false)
 const { findOrgName, success, messageError, showLoader, hideLoader } = mixin;
 
 const formProfile = reactive<FormProfile>({
@@ -34,15 +35,18 @@ const formProfile = reactive<FormProfile>({
 /** ดึงข้อมูลจาก keycloak*/
 async function getProFile() {
   try {
-    showLoader();
+    isLoad.value = true
     if (!storeData.dataprofilePosition) {
       const res = await http.get(config.API.profilePosition());
       await updateFormProfile(res.data.result);
+      isLoad.value = false
     } else {
       await updateFormProfile(storeData.dataprofilePosition);
+      isLoad.value = false
     }
   } catch (error) {
     messageError($q, error);
+    isLoad.value = false
   } finally {
     hideLoader();
   }
@@ -113,7 +117,7 @@ onMounted(() => {
         />
         เพิ่มอุทธรณ์/ร้องทุกข์
       </div>
-      <Form :on-submit="onSubmit" :form-profile="formProfile" />
+      <Form :on-submit="onSubmit" :form-profile="formProfile" v-model:isLoad="isLoad"/>
     </div>
   </div>
 </template>
diff --git a/src/modules/07_appealComplain/views/Edit.vue b/src/modules/07_appealComplain/views/Edit.vue
index 4cdcf58..9b80d58 100644
--- a/src/modules/07_appealComplain/views/Edit.vue
+++ b/src/modules/07_appealComplain/views/Edit.vue
@@ -22,6 +22,7 @@ const route = useRoute();
 const mixin = useCounterMixin();
 const { messageError, showLoader, hideLoader } = mixin;
 
+const isLoad = ref<boolean>(false);
 const id = ref<string>(route.params.id as string);
 const historyStatusOb = reactive<HistoryStatusType>({
   status: "",
@@ -53,7 +54,7 @@ const data = reactive<EditDataList>({
 
 /** ดึงข้อมูล */
 function getData() {
-  showLoader();
+  isLoad.value = true;
   http
     .get(config.API.appealByID(id.value))
     .then((res) => {
@@ -73,13 +74,13 @@ function getData() {
       data.disciplineComplaint_Appeal_Docs =
         dataList.disciplineComplaint_Appeal_Docs;
       data.historyStatus = dataList.historyStatus;
+      isLoad.value = false;
     })
     .catch((e) => {
       messageError($q, e);
+      isLoad.value = false;
     })
-    .finally(() => {
-      hideLoader();
-    });
+    .finally(() => {});
 }
 
 /** ดึงข้อมูลหน้า แก้ไขอุทธรณ์/ร้องทุกข์
@@ -122,7 +123,7 @@ onMounted(() => {
         />
         แก้ไขอุทธรณ์/ร้องทุกข์
       </div>
-      <Form :data="data" :get-report="getReport" />
+      <Form :data="data" :get-report="getReport" v-model:is-load="isLoad"/>
     </div>
   </div>
 </template>
diff --git a/src/modules/07_appealComplain/views/Form.vue b/src/modules/07_appealComplain/views/Form.vue
index 124d744..d2b715f 100644
--- a/src/modules/07_appealComplain/views/Form.vue
+++ b/src/modules/07_appealComplain/views/Form.vue
@@ -17,6 +17,7 @@ const mixin = useCounterMixin();
 const { dialogConfirm } = mixin;
 const dataStore = useAppealComplainStore();
 
+const isLoad = defineModel<boolean>("isLoad", { required: true });
 const printForm = ref<string>("");
 const isReadOnly = ref<boolean>(false);
 const historyStatusOb = reactive<HistoryStatusType>({
@@ -237,6 +238,7 @@ watch(
               <div class="row q-col-gutter-sm">
                 <div class="col-xs-12 col-md-3">
                   <q-select
+                    v-if="!isLoad"
                     :class="inputEdit(isReadOnly)"
                     :readonly="isReadOnly"
                     ref="typeRef"
@@ -253,9 +255,11 @@ watch(
                     lazy-rules
                     hide-bottom-space
                   />
+                  <q-skeleton v-else type="QSelect" height="40px" />
                 </div>
                 <div class="col-xs-12 col-md-3">
                   <q-input
+                    v-if="!isLoad"
                     :class="inputEdit(isReadOnly)"
                     :readonly="isReadOnly"
                     ref="titleRef"
@@ -268,11 +272,13 @@ watch(
                     label="เรื่องอุทธรณ์/ร้องทุกข์"
                     hide-bottom-space
                   />
+                  <q-skeleton v-else type="QInput" height="40px" />
                 </div>
               </div>
               <div class="row">
                 <div class="col-12">
                   <q-input
+                    v-if="!isLoad"
                     :class="inputEdit(isReadOnly)"
                     :readonly="isReadOnly"
                     ref="descriptionRef"
@@ -287,11 +293,13 @@ watch(
                     rows="5"
                     hide-bottom-space
                   />
+                  <q-skeleton v-else type="QInput" height="120px" />
                 </div>
               </div>
               <div class="row" v-if="!isReadOnly">
                 <div class="col-12">
                   <q-file
+                    v-if="!isLoad"
                     ref="fileRef"
                     v-model="formData.files"
                     label="อัปโหลดเอกสารหลักฐาน"
@@ -301,6 +309,7 @@ watch(
                     hide-bottom-space
                     bg-color="white"
                   />
+                  <q-skeleton v-else type="QInput" height="40px" />
                 </div>
               </div>
               <q-card bordered class="col-12 row" v-if="isReadOnly">
@@ -350,11 +359,11 @@ watch(
               </q-card>
             </div>
           </div>
-          <q-separator v-if="!isReadOnly" />
+          <q-separator v-if="!isReadOnly && !isLoad" />
           <q-card-actions
             align="right"
             class="bg-white text-teal"
-            v-if="!isReadOnly"
+            v-if="!isReadOnly && !isLoad"
           >
             <q-btn id="onSubmit" type="submit" label="บันทึก" color="secondary"
               ><q-tooltip>บันทึก</q-tooltip></q-btn
diff --git a/src/modules/07_appealComplain/views/Main.vue b/src/modules/07_appealComplain/views/Main.vue
index a526a1d..c9163c1 100644
--- a/src/modules/07_appealComplain/views/Main.vue
+++ b/src/modules/07_appealComplain/views/Main.vue
@@ -10,6 +10,7 @@ import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import { useAppealComplainStore } from "@/modules/07_appealComplain/store";
 
+import type { PropsTable } from "@/interface/PropsTable";
 import type { FormType } from "@/modules/07_appealComplain/interface/response/mainType";
 import type { DataOption } from "@/modules/07_appealComplain/interface/index/main";
 
@@ -17,7 +18,7 @@ const $q = useQuasar();
 const router = useRouter();
 const mixin = useCounterMixin();
 const dataStore = useAppealComplainStore();
-const { messageError, showLoader, hideLoader } = mixin;
+const { messageError } = mixin;
 
 const filterKeyword = ref<string>("");
 const type = ref<DataOption[]>([
@@ -25,25 +26,19 @@ const type = ref<DataOption[]>([
   ...dataStore.typeOptions,
 ]);
 
-const total = ref<number>(0);
-const totalList = ref<number>(1);
-const pagination = ref({
+const isload = ref<boolean>(false);
+const pagination = ref<PropsTable.Pagination>({
   sortBy: "createdAt",
   descending: true,
   page: 1,
   rowsPerPage: 10,
+  rowsNumber: 0,
 });
-
-/**
- * เพิ่มหัวข้อตาราง
- */
-
 const formData = reactive<FormType>({
   type: "ALL",
   status: "ALL",
   year: new Date().getFullYear(),
 });
-
 const visibleColumns = ref<string[]>([
   "no",
   "title",
@@ -56,7 +51,6 @@ const visibleColumns = ref<string[]>([
   "lastUpdatedAt",
   "status",
 ]);
-
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -154,7 +148,7 @@ const columns = ref<QTableProps["columns"]>([
 
 //นำข้อมูลมาแสดง
 async function getData() {
-  showLoader();
+  isload.value = true;
   await http
     .get(
       config.API.appealMainList(
@@ -166,19 +160,16 @@ async function getData() {
         filterKeyword.value
       )
     )
-    .then((res) => {
-      totalList.value = Math.ceil(
-        res.data.result.total / pagination.value.rowsPerPage
-      );
-      total.value = res.data.result.total;
-      let data = res.data.result.data;
-      dataStore.fetchAppealComplain(data);
+    .then(async (res) => {
+      const result = res.data.result;
+      pagination.value.rowsNumber = result.total;
+      dataStore.fetchAppealComplain(result.data);
     })
     .catch((e: any) => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isload.value = false;
     });
 }
 
@@ -211,22 +202,21 @@ function redirectToPageadd() {
   router.push(`/appeal-complain/add`);
 }
 
-function updatePagination(newPagination: any) {
-  pagination.value.page = 1;
-  pagination.value.rowsPerPage = newPagination.rowsPerPage;
-}
-
 function getSearch() {
   pagination.value.page = 1;
   getData();
 }
 
-watch(
-  () => pagination.value.rowsPerPage,
-  async () => {
-    getSearch();
-  }
-);
+/**
+ * ฟังก์ชันรับ request จากตาราง เมื่อมีการเปลี่ยน pagination
+ * @param requestProps ข้อมูลการร้องขอจากตาราง
+ */
+function onTableRequest(requestProps: PropsTable.RequestProps) {
+  const newPagination = requestProps?.pagination || requestProps;
+  if (!newPagination?.page || !newPagination?.rowsPerPage) return;
+  pagination.value = { ...newPagination };
+  getData();
+}
 
 /**
  * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
@@ -238,6 +228,7 @@ onMounted(async () => {
   await getData();
 });
 </script>
+
 <template>
   <div class="col-12 row justify-center">
     <div class="col-xs-12 col-sm-12 col-md-11">
@@ -378,29 +369,14 @@ onMounted(async () => {
                 flat
                 bordered
                 dense
-                class="custom-table2"
-                style="max-height: 80vh"
                 :rows="dataStore.rows"
                 :columns="dataStore.columns"
                 :visible-columns="dataStore.visibleColumns"
                 :rows-per-page-options="[10, 25, 50, 100]"
-                @update:pagination="updatePagination"
+                @request="onTableRequest"
+                v-model:pagination="pagination"
+                :loading="isload"
               >
-                <template v-slot:pagination="scope">
-                  ทั้งหมด {{ total }} รายการ
-                  <q-pagination
-                    v-model="pagination.page"
-                    active-color="primary"
-                    color="dark"
-                    :max="Number(totalList)"
-                    size="sm"
-                    boundary-links
-                    direction-links
-                    :max-pages="5"
-                    @update:model-value="getData()"
-                  ></q-pagination>
-                </template>
-
                 <template v-slot:header="props">
                   <q-tr :props="props">
                     <q-th
@@ -419,14 +395,10 @@ onMounted(async () => {
                       v-for="col in props.cols"
                       :key="col.name"
                       :props="props"
-                      @click="editPage(props.row.id)"
+                      @click.stop.prevent="editPage(props.row.id)"
                     >
                       <div v-if="col.name == 'no'">
-                        {{
-                          (pagination.page - 1) * pagination.rowsPerPage +
-                          props.rowIndex +
-                          1
-                        }}
+                        {{ props.rowIndex + 1 }}
                       </div>
 
                       <div v-else>
@@ -439,7 +411,7 @@ onMounted(async () => {
                 <template #item="props">
                   <div class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
                     <q-card bordered flat>
-                      <q-list @click="editPage(props.row.id)">
+                      <q-list @click.stop.prevent="editPage(props.row.id)">
                         <q-item v-for="col in props.cols" :key="col.name">
                           <q-item-section>
                             <q-item-label caption>{{ col.label }}</q-item-label>
@@ -463,49 +435,5 @@ onMounted(async () => {
     </div>
   </div>
 </template>
-<style lang="scss">
-.icon-color {
-  color: #4154b3;
-}
 
-.custom-table2 {
-  max-height: 64vh;
-
-  .q-table tr:nth-child(odd) td {
-    background: white;
-  }
-
-  .q-table tr:nth-child(even) td {
-    background: #f8f8f8;
-  }
-
-  .q-table thead tr {
-    background: #ecebeb;
-  }
-
-  .q-table thead tr th {
-    position: sticky;
-  }
-
-  .q-table td:nth-of-type(2) {
-    z-index: 3 !important;
-  }
-
-  .q-table th:nth-of-type(2),
-  .q-table td:nth-of-type(2) {
-    position: sticky;
-    left: 0;
-    z-index: 1;
-  }
-
-  /* this will be the loading indicator */
-  .q-table thead tr:last-child th {
-    /* height of all previous header rows */
-    top: 48px;
-  }
-
-  .q-table thead tr:first-child th {
-    top: 0;
-  }
-}
-</style>
+<style lang="scss"></style>
diff --git a/src/modules/08_KPI/components/Evaluator/01_TabAll.vue b/src/modules/08_KPI/components/Evaluator/01_TabAll.vue
index 5c0db8d..d33a2b4 100644
--- a/src/modules/08_KPI/components/Evaluator/01_TabAll.vue
+++ b/src/modules/08_KPI/components/Evaluator/01_TabAll.vue
@@ -1,15 +1,17 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, watch } from "vue";
 import { useRouter } from "vue-router";
 import type { QTableProps } from "quasar";
 
 import { useKpiDataStore } from "@/modules/08_KPI/store";
 
+import type { PropsTable } from "@/interface/PropsTable";
 import type { ResEvaluatorAssessor } from "@/modules/08_KPI/interface/response/index";
 import type { FormQuery } from "@/modules/08_KPI/interface/request/index";
 
 const store = useKpiDataStore();
 const router = useRouter();
+const isLoad = defineModel<boolean>("isLoad", { required: true });
 const visibleColumns = defineModel<string[]>("visibleColumns", {
   required: true,
 });
@@ -19,24 +21,48 @@ const columns = defineModel<QTableProps["columns"]>("columns", {
 const rows = defineModel<ResEvaluatorAssessor[]>("rows", { required: true });
 const formQuery = defineModel<FormQuery>("formQuery", { required: true });
 const total = defineModel<number>("total", { required: true });
-const maxPage = defineModel<number>("maxPage", { required: true });
 
 const props = defineProps({
-  updatePagination: { type: Function },
   fetchList: { type: Function },
 });
 
-const pagination = ref({
+const pagination = ref<PropsTable.Pagination>({
   sortBy: "desc",
   descending: false,
-  page: 1,
-  rowsPerPage: 10,
+  page: formQuery.value.page,
+  rowsPerPage: formQuery.value.pageSize,
+  rowsNumber: total.value,
 });
 
 async function redirectViewDetail(id: string) {
-  store.tabMain = await "";
+  store.tabMain = "";
   router.push(`/KPI-evaluator/${id}`);
 }
+
+/**
+ * ฟังก์ชันรับ request จากตาราง เมื่อมีการเปลี่ยน pagination
+ * @param requestProps ข้อมูลการร้องขอจากตาราง
+ */
+function onTableRequest(requestProps: PropsTable.RequestProps) {
+  const newPagination = requestProps?.pagination || requestProps;
+  if (!newPagination?.page || !newPagination?.rowsPerPage) return;
+  formQuery.value.page = newPagination.page;
+  formQuery.value.pageSize = newPagination.rowsPerPage;
+  props?.fetchList?.();
+}
+
+watch(
+  [
+    () => formQuery.value.page,
+    () => formQuery.value.pageSize,
+    () => total.value,
+  ],
+  ([page, pageSize, total]) => {
+    pagination.value.page = page;
+    pagination.value.rowsPerPage = pageSize;
+    pagination.value.rowsNumber = total;
+  }
+);
 </script>
 
 <template>
@@ -50,11 +76,11 @@ async function redirectViewDetail(id: string) {
       bordered
       :paging="true"
       dense
-      class="custom-table2"
-      :rows-per-page-options="[10, 25, 50, 100]"
+      :rows-per-page-options="[1, 10, 25, 50, 100]"
       :visible-columns="visibleColumns"
       v-model:pagination="pagination"
-      @update:pagination="props.updatePagination"
+      @request="onTableRequest"
+      :loading="isLoad"
     >
       <template v-slot:header="props">
         <q-tr :props="props">
@@ -105,20 +131,6 @@ async function redirectViewDetail(id: string) {
           </q-card>
         </div>
       </template>
-      <template v-slot:pagination="scope">
-        ทั้งหมด {{ total }} รายการ
-        <q-pagination
-          v-model="formQuery.page"
-          active-color="primary"
-          color="dark"
-          :max="Number(maxPage)"
-          size="sm"
-          boundary-links
-          direction-links
-          :max-pages="5"
-          @update:model-value="props.fetchList?.()"
-        ></q-pagination>
-      </template>
     </d-table>
   </div>
 </template>
diff --git a/src/modules/08_KPI/components/Evaluator/02_TabOther.vue b/src/modules/08_KPI/components/Evaluator/02_TabOther.vue
index 20aed72..0458f90 100644
--- a/src/modules/08_KPI/components/Evaluator/02_TabOther.vue
+++ b/src/modules/08_KPI/components/Evaluator/02_TabOther.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { ref } from "vue";
-import { useQuasar } from "quasar";
+import { ref, watch } from "vue";
+import { Loading, useQuasar } from "quasar";
 import { useRouter } from "vue-router";
 import type { QTableProps } from "quasar";
 
@@ -9,6 +9,7 @@ import http from "@/plugins/http";
 import { useCounterMixin } from "@/stores/mixin";
 import { useKpiDataStore } from "@/modules/08_KPI/store";
 
+import type { PropsTable } from "@/interface/PropsTable";
 import type { FormQuery } from "@/modules/08_KPI/interface/request/index";
 import type { ResEvaluatorAssessor } from "@/modules/08_KPI/interface/response/index";
 
@@ -33,24 +34,24 @@ const columns = defineModel<QTableProps["columns"]>("columns", {
 const rows = defineModel<ResEvaluatorAssessor[]>("rows", { required: true });
 const formQuery = defineModel<FormQuery>("formQuery", { required: true });
 const total = defineModel<number>("total", { required: true });
-const maxPage = defineModel<number>("maxPage", { required: true });
+const isLoad = defineModel<boolean>("isLoad", { required: true });
 
 const props = defineProps({
-  updatePagination: { type: Function },
   fetchList: { type: Function },
 });
 
+const pagination = ref<PropsTable.Pagination>({
+  sortBy: "desc",
+  descending: false,
+  page: formQuery.value.page,
+  rowsPerPage: formQuery.value.pageSize,
+  rowsNumber: total.value,
+});
+
 function redirectViewDetail(id: string) {
   router.push(`/KPI-evaluator/${id}`);
 }
 
-const pagination = ref({
-  sortBy: "desc",
-  descending: false,
-  page: 1,
-  rowsPerPage: 10,
-});
-
 async function onClickApprove(type: string = "") {
   if (store.selected.length !== 0) {
     const userIds = await store.selected.map(
@@ -104,6 +105,31 @@ async function onClickApprove(type: string = "") {
     dialogMessageNotify($q, "เลือกอย่างน้อย 1 รายการ");
   }
 }
+
+/**
+ * ฟังก์ชันรับ request จากตาราง เมื่อมีการเปลี่ยน pagination
+ * @param requestProps ข้อมูลการร้องขอจากตาราง
+ */
+function onTableRequest(requestProps: PropsTable.RequestProps) {
+  const newPagination = requestProps?.pagination || requestProps;
+  if (!newPagination?.page || !newPagination?.rowsPerPage) return;
+  formQuery.value.page = newPagination.page;
+  formQuery.value.pageSize = newPagination.rowsPerPage;
+  props?.fetchList?.();
+}
+
+watch(
+  [
+    () => formQuery.value.page,
+    () => formQuery.value.pageSize,
+    () => total.value,
+  ],
+  ([page, pageSize, total]) => {
+    pagination.value.page = page;
+    pagination.value.rowsPerPage = pageSize;
+    pagination.value.rowsNumber = total;
+  }
+);
 </script>
 
 <template>
@@ -120,13 +146,14 @@ async function onClickApprove(type: string = "") {
       :rows-per-page-options="[10, 25, 50, 100]"
       :visible-columns="visibleColumns"
       v-model:pagination="pagination"
-      @update:pagination="props.updatePagination"
       :selection="
         store.tabMainevaluator === '5' || store.tabMainevaluator === '6'
           ? 'none'
           : 'multiple'
       "
       v-model:selected="store.selected"
+      @request="onTableRequest"
+      :loading="isLoad"
     >
       <template v-slot:header-selection="scope">
         <q-checkbox keep-color color="primary" dense v-model="scope.selected" />
@@ -187,10 +214,7 @@ async function onClickApprove(type: string = "") {
             </q-card-section>
             <q-separator />
             <q-list @click="redirectViewDetail(props.row.id)">
-              <q-item
-                v-for="col in props.cols"
-                :key="col.name"
-              >
+              <q-item v-for="col in props.cols" :key="col.name">
                 <q-item-section>
                   <q-item-label caption>{{ col.label }}</q-item-label>
 
@@ -210,20 +234,6 @@ async function onClickApprove(type: string = "") {
           </q-card>
         </div>
       </template>
-      <template v-slot:pagination="scope">
-        ทั้งหมด {{ total }} รายการ
-        <q-pagination
-          v-model="formQuery.page"
-          active-color="primary"
-          color="dark"
-          :max="Number(maxPage)"
-          size="sm"
-          boundary-links
-          direction-links
-          :max-pages="5"
-          @update:model-value="props.fetchList?.()"
-        ></q-pagination>
-      </template>
     </d-table>
   </div>
 
diff --git a/src/modules/08_KPI/components/Tab/01_Assessment.vue b/src/modules/08_KPI/components/Tab/01_Assessment.vue
index fea2f61..df1b369 100644
--- a/src/modules/08_KPI/components/Tab/01_Assessment.vue
+++ b/src/modules/08_KPI/components/Tab/01_Assessment.vue
@@ -37,6 +37,10 @@ const store = useKpiDataStore();
 
 const evaluationId = ref<string>(route.params.id.toString());
 
+const isLoad01 = ref<boolean>(false);
+const isLoad02 = ref<boolean>(false);
+const isLoad03 = ref<boolean>(false);
+
 const rows_01 = ref<EvaluationIndicatorType[]>();
 const rows_02 = ref<EvaluationIndicatorType[]>();
 const rows_03 = ref<EvaluationIndicatorType[]>();
@@ -53,6 +57,7 @@ const resultRole = ref<number>(0);
 const resultAssigned = ref<number>(0);
 
 function fetchListPlanned() {
+  isLoad01.value = true;
   http
     .get(config.API.kpiAchievement("planned") + `?id=${evaluationId.value}`)
     .then((res) => {
@@ -62,6 +67,7 @@ function fetchListPlanned() {
         evaluationResults: (e.point / 5) * e.weight,
       }));
       rows_01.value = newRow;
+      isLoad01.value = false;
 
       if (newRow.length > 0) {
         resultPlanned.value = newRow.reduce(
@@ -89,6 +95,7 @@ function fetchListPlanned() {
 }
 
 function fetchListRole() {
+  isLoad02.value = true;
   http
     .get(config.API.kpiAchievement("role") + `?id=${evaluationId.value}`)
     .then((res) => {
@@ -98,7 +105,7 @@ function fetchListRole() {
         evaluationResults: (e.point / 5) * e.weight,
       }));
       rows_02.value = newRow;
-
+      isLoad02.value = false;
       if (newRow.length > 0) {
         resultRole.value = newRow.reduce(
           (sum: number, e: any) => sum + e.evaluationResults,
@@ -119,6 +126,7 @@ function fetchListRole() {
 }
 
 function fetchAssigned() {
+  isLoad03.value = true;
   http
     .get(config.API.kpiAchievement("special") + `?id=${evaluationId.value}`)
     .then((res) => {
@@ -129,7 +137,7 @@ function fetchAssigned() {
       }));
 
       rows_03.value = newRow;
-
+      isLoad03.value = false;
       if (newRow.length > 0) {
         resultAssigned.value = newRow.reduce(
           (sum: number, e: any) => sum + e.evaluationResults,
@@ -262,6 +270,7 @@ const groupNo = computed(() => {
 });
 
 onMounted(() => {
+  store.indicatorWeightTotal = 0
   getCriteria();
   fetchListPlanned();
   fetchListRole();
@@ -345,6 +354,7 @@ onMounted(() => {
       <div v-if="groupNo == 1">
         <Work
           v-model:data="rows_01"
+          v-model:isLoad="isLoad01"
           :title="`มิติที่ 1 ภารกิจตามนโยบายและยุทธศาสตร์ของกรุงเทพมหานคร`"
           :page="1"
           :fetchList="fetchListPlanned"
@@ -391,6 +401,7 @@ onMounted(() => {
 
         <Work
           v-model:data="rows_03"
+          v-model:isLoad="isLoad03"
           :title="`มิติที่ 2 วาระเร่งด่วนที่ได้รับมอบหมายพิเศษ (ถ้ามี)`"
           :page="3"
           :fetchList="fetchAssigned"
@@ -437,12 +448,16 @@ onMounted(() => {
                 คะแนน)</span
               >
               <div class="text-primary q-pl-md">
-                {{
-                  (
-                    store.excusiveIndicator1ScoreVal +
-                    store.excusiveIndicator2ScoreVal
-                  ).toFixed(2)
-                }}
+                <div v-if="!isLoad01">
+                  {{
+                    (
+                      store.excusiveIndicator1ScoreVal +
+                      store.excusiveIndicator2ScoreVal
+                    ).toFixed(2)
+                  }}
+                </div>
+
+                <q-skeleton v-else type="text" />
               </div>
             </div>
           </div>
@@ -452,6 +467,7 @@ onMounted(() => {
       <div v-else>
         <Work
           v-model:data="rows_01"
+          v-model:isLoad="isLoad01"
           :title="`1. งานตามแผนปฏิบัติราชการประจำปี`"
           :page="1"
           :fetchList="fetchListPlanned"
@@ -459,6 +475,7 @@ onMounted(() => {
         />
         <Work
           v-model:data="rows_02"
+          v-model:isLoad="isLoad02"
           :title="`2. งานตามหน้าที่ความรับผิดชอบหลัก`"
           :page="2"
           :fetchList="fetchListRole"
@@ -466,6 +483,7 @@ onMounted(() => {
         />
         <Work
           v-model:data="rows_03"
+          v-model:isLoad="isLoad03"
           :title="`3. งานอื่น ๆ ที่ได้รับมอบหมาย`"
           :page="3"
           :fetchList="fetchAssigned"
@@ -517,7 +535,10 @@ onMounted(() => {
                 คะแนน)</span
               >
               <div class="text-primary q-pl-md">
-                {{ store.indicatorScoreVal.toFixed(2) }}
+                <div v-if="!isLoad01">
+                  {{ store.indicatorScoreVal.toFixed(2) }}
+                </div>
+                <q-skeleton v-else type="text" />
               </div>
             </div>
           </div>
diff --git a/src/modules/08_KPI/components/Tab/04_Result.vue b/src/modules/08_KPI/components/Tab/04_Result.vue
index f31f989..8af30b0 100644
--- a/src/modules/08_KPI/components/Tab/04_Result.vue
+++ b/src/modules/08_KPI/components/Tab/04_Result.vue
@@ -192,7 +192,9 @@ function userOpen() {
   });
 }
 
+const isLoad = ref<boolean>(false);
 function getData() {
+  isLoad.value = true;
   http
     .get(config.API.kpiSendToGet(id.value))
     .then((res) => {
@@ -220,9 +222,11 @@ function getData() {
       sumWeight.value = data.weightPoint1 + data.weightPoint2;
       sumResult.value = data.summaryPoint;
       result.value = data.evaluationResults;
+      isLoad.value = false;
     })
     .catch((e) => {
       messageError($q, e);
+      isLoad.value = false;
     })
     .finally(() => {});
 }
@@ -306,22 +310,47 @@ onMounted(() => {
                 <tbody>
                   <tr>
                     <td class="text-left">องค์ประกอบที่ 1 ผลสัมฤทธิ์ของงาน</td>
-                    <td class="text-left">{{ weight1 }}</td>
-                    <td class="text-left">{{ result1 }}</td>
+                    <td class="text-left">
+                      <div v-if="!isLoad">
+                        {{ weight1 }}
+                      </div>
+                      <q-skeleton v-else type="text" />
+                    </td>
+                    <td class="text-left">
+                      <div v-if="!isLoad">{{ result1 }}</div>
+
+                      <q-skeleton v-else type="text" />
+                    </td>
                   </tr>
                   <tr>
                     <td class="text-left">
                       องค์ประกอบที่ 2 พฤติกรรมการปฎิบัติราชการ (สมรรถนะ)
                     </td>
-                    <td class="text-left">{{ weight2 }}</td>
-                    <td class="text-left">{{ result2 }}</td>
+                    <td class="text-left">
+                      <div v-if="!isLoad">{{ weight2 }}</div>
+
+                      <q-skeleton v-else type="text" />
+                    </td>
+                    <td class="text-left">
+                      <div v-if="!isLoad">{{ result2 }}</div>
+
+                      <q-skeleton v-else type="text" />
+                    </td>
                   </tr>
                   <tr>
                     <td class="text-right text-bold" style="font-size: 16px">
                       รวม
                     </td>
-                    <td class="text-left">{{ sumWeight }}</td>
-                    <td class="text-left">{{ sumResult }}</td>
+                    <td class="text-left">
+                      <div v-if="!isLoad">{{ sumWeight }}</div>
+
+                      <q-skeleton v-else type="text" />
+                    </td>
+                    <td class="text-left">
+                      <div v-if="!isLoad">{{ sumResult }}</div>
+
+                      <q-skeleton v-else type="text" />
+                    </td>
                   </tr>
                 </tbody>
               </q-markup-table>
@@ -332,7 +361,7 @@ onMounted(() => {
               </div>
             </div>
             <div class="col-12 no-pointer">
-              <div class="column">
+              <div class="column" v-if="!isLoad">
                 <q-radio
                   v-model="result"
                   checked-icon="task_alt"
@@ -369,6 +398,12 @@ onMounted(() => {
                   label="ต้องปรับปรุง (คะแนนต่ำกว่าร้อยละ 60.00)"
                 />
               </div>
+
+              <q-item v-else dense v-for="item in 5" style="max-width: 300px;">
+                <q-item-section class="q-pa-none">
+                  <q-skeleton type="text" />
+                </q-item-section>
+              </q-item>
             </div>
             <div class="col-12">
               <div class="text-weight-bold text-body2">
@@ -378,6 +413,7 @@ onMounted(() => {
 
             <div class="col-12">
               <q-input
+                v-if="!isLoad"
                 v-model="title"
                 outlined
                 lazy-rules
@@ -390,9 +426,11 @@ onMounted(() => {
                 "
                 :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อเรื่อง/เนื้อหา/หัวข้อการพัฒนา'}`,]"
               />
+              <q-skeleton v-else type="QInput" height="150px" />
             </div>
             <div class="col-12">
               <q-input
+                v-if="!isLoad"
                 v-model="developmentMethod"
                 outlined
                 lazy-rules
@@ -405,9 +443,11 @@ onMounted(() => {
                 "
                 :rules="[(val:string) => !!val || `${'กรุณากรอกวิธีการพัฒนา'}`,]"
               />
+              <q-skeleton v-else type="QInput" height="150px" />
             </div>
             <div class="col-12">
               <q-input
+                v-if="!isLoad"
                 v-model="developmentPeriod"
                 outlined
                 hide-bottom-space
@@ -420,6 +460,7 @@ onMounted(() => {
                 "
                 :rules="[(val:string) => !!val || `${'กรุณากรอกช่วงเวลาการพัฒนา'}`,]"
               />
+              <q-skeleton v-else type="QInput" height="150px" />
             </div>
             <div class="col-12">
               <div class="text-weight-bold text-body2">
@@ -428,6 +469,7 @@ onMounted(() => {
             </div>
             <div class="col-12">
               <q-input
+                v-if="!isLoad"
                 v-model="evaluatorComment"
                 outlined
                 lazy-rules
@@ -440,6 +482,7 @@ onMounted(() => {
                 "
                 :rules="[(val:string) => !!val || `${'กรุณากรอกความเห็นของ'}`,]"
               />
+              <q-skeleton v-else type="QInput" height="150px" />
             </div>
           </div>
         </q-card-section>
@@ -519,6 +562,7 @@ onMounted(() => {
 
             <div class="col-12">
               <q-input
+                v-if="!isLoad"
                 lazy-rules
                 v-model="superiorComment"
                 outlined
@@ -538,6 +582,7 @@ onMounted(() => {
                 ref="superiorCommentRef"
                 :rules="[(val:string) => superiorCommentCheck !== 'false'||!!val || `${'กรุณากรอกความเห็น'}`,]"
               />
+              <q-skeleton v-else type="QInput" height="150px" />
             </div>
           </div>
         </q-card-section>
@@ -621,6 +666,7 @@ onMounted(() => {
             </div>
             <div class="col-12">
               <q-input
+                v-if="!isLoad"
                 lazy-rules
                 ref="additionalSuperiorCommentRef"
                 v-model="additionalSuperiorComment"
@@ -641,6 +687,7 @@ onMounted(() => {
                 "
                 :rules="[(val:string) => additionalSuperiorCheck !== 'false'||!!val || `${'กรุณากรอกความเห็น'}`,]"
               />
+              <q-skeleton v-else type="QInput" height="150px" />
             </div>
           </div>
         </q-card-section>
diff --git a/src/modules/08_KPI/components/Tab/05_File.vue b/src/modules/08_KPI/components/Tab/05_File.vue
index 5235182..8b5f6bb 100644
--- a/src/modules/08_KPI/components/Tab/05_File.vue
+++ b/src/modules/08_KPI/components/Tab/05_File.vue
@@ -32,18 +32,20 @@ const isReadonly = ref<boolean>(
 const documentFile = ref<any>(null);
 const fileList = ref<ArrayFileList[]>([]);
 
+const isLoad = ref<boolean>(false);
 async function getData() {
-  showLoader();
+  isLoad.value = true;
   await http
     .get(config.API.file("ไฟล์เอกสาร", "KPI", id.value))
     .then((res) => {
       fileList.value = res.data;
+      isLoad.value = false;
     })
     .catch((e) => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoad.value = false;
     });
 }
 
@@ -190,7 +192,11 @@ onMounted(() => {
           <!-- <div class="col-1 self-center" v-if="formData.documentFile"></div> -->
         </div>
 
-        <div v-if="fileList.length > 0" class="col-xs-12 row">
+        <div v-if="isLoad" class="col-12">
+
+          <q-skeleton />
+        </div>
+        <div v-else-if="fileList.length > 0" class="col-xs-12 row">
           <q-list class="full-width rounded-borders" bordered separator>
             <q-item
               clickable
diff --git a/src/modules/08_KPI/components/Tab/Dialog/01_FormIndicator.vue b/src/modules/08_KPI/components/Tab/Dialog/01_FormIndicator.vue
index d931c4f..69cb128 100644
--- a/src/modules/08_KPI/components/Tab/Dialog/01_FormIndicator.vue
+++ b/src/modules/08_KPI/components/Tab/Dialog/01_FormIndicator.vue
@@ -36,6 +36,8 @@ const search = ref<string>("");
 const listCheckID = ref<string | null>(null);
 const listTarget = ref<any>([]);
 
+const isLoad = ref<boolean>(false);
+const isLoadList = ref<boolean>(false);
 const formFilter = reactive<any>({
   isAll: false,
   keyword: "",
@@ -91,20 +93,20 @@ function fetchListPlan() {
     : store.dataProfile.nodeDnaId;
   formFilter.node = formFilter.isAll ? 0 : store.dataProfile.node;
   formFilter.year = formFilter?.year ? formFilter.year.toString() : "";
-
-  showLoader();
+  isLoadList.value = true;
   http
     .post(config.API.kpiPlan + `/search`, formFilter)
     .then((res) => {
       listTarget.value = res.data.result.data;
       maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
       totalList.value = res.data.result.total;
+      isLoadList.value = false;
     })
     .catch((err) => {
       messageError($q, err);
     })
     .finally(() => {
-      hideLoader();
+      isLoadList.value = false;
     });
 }
 
@@ -113,7 +115,7 @@ function fetchListPlan() {
  * @param id id
  */
 function fetchListPlanByid(id: string) {
-  showLoader();
+  isLoad.value = true;
   http
     .get(config.API.kpiAchievement("planned") + `/${id}`)
     .then((res) => {
@@ -138,12 +140,13 @@ function fetchListPlanByid(id: string) {
       formDetail.endDate = data.endDate;
 
       listCheckID.value = data.kpiPlanId;
+      isLoad.value = false;
     })
     .catch((err) => {
       messageError($q, err);
     })
     .finally(() => {
-      hideLoader();
+      isLoad.value = false;
     });
 }
 
@@ -154,24 +157,25 @@ function fetchListRole() {
   formFilter.node = formFilter.isAll ? 0 : store.dataProfile.node;
   formFilter.year = formFilter?.year ? formFilter.year.toString() : "";
   formFilter.position = store.dataProfile.position;
-
+  isLoadList.value = true;
   http
     .post(config.API.kpiRole + `/search`, formFilter)
     .then((res) => {
       listTarget.value = res.data.result.data;
       maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
       totalList.value = res.data.result.total;
+      isLoadList.value = false;
     })
     .catch((err) => {
       messageError($q, err);
     })
     .finally(() => {
-      hideLoader();
+      isLoadList.value = false;
     });
 }
 
 function fetchRoleByid(id: string) {
-  showLoader();
+  isLoad.value = true;
   http
     .get(config.API.kpiAchievement("role") + `/${id}`)
     .then((res) => {
@@ -193,12 +197,13 @@ function fetchRoleByid(id: string) {
       formDetail.includingName = data.includingName;
       formDetail.including = data.including;
       listCheckID.value = data.kpiRoleId;
+      isLoad.value = false;
     })
     .catch((err) => {
       messageError($q, err);
     })
     .finally(() => {
-      hideLoader();
+      isLoad.value = false;
     });
 }
 
@@ -212,25 +217,25 @@ function fetchListSpecial() {
     pageSize: formFilter.pageSize,
     page: formFilter.page,
   };
-
-  showLoader();
+  isLoadList.value = true;
   http
     .post(config.API.kpiSpecial + `/search`, body)
     .then((res) => {
       listTarget.value = res.data.result.data;
       maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
       totalList.value = res.data.result.total;
+      isLoadList.value = false;
     })
     .catch((err) => {
       messageError($q, err);
     })
     .finally(() => {
-      hideLoader();
+      isLoadList.value = false;
     });
 }
 
 function fetchspecialByid(id: string) {
-  showLoader();
+  isLoad.value = true;
   http
     .get(config.API.kpiAchievement("special") + `/${id}`)
     .then((res) => {
@@ -252,18 +257,19 @@ function fetchspecialByid(id: string) {
       formDetail.endDate = data.endDate;
 
       listCheckID.value = data.kpiSpecialId;
+      isLoad.value = false;
     })
     .catch((err) => {
       messageError($q, err);
     })
     .finally(() => {
-      hideLoader();
+      isLoad.value = false;
     });
 }
 
 function clickList(id: string, isData: boolean = false) {
   if (!checkDetail.value) {
-    showLoader();
+    isLoad.value=true
     const url =
       numpage.value === 1
         ? config.API.kpiPlan
@@ -301,12 +307,13 @@ function clickList(id: string, isData: boolean = false) {
         formDetail.strategyId = data.strategyId;
         formDetail.strategyName = data.strategyName;
         formDetail.documentInfoEvidence = data.documentInfoEvidence;
+        isLoad.value=false
       })
       .catch((err) => {
         messageError($q, err);
       })
       .finally(() => {
-        hideLoader();
+        isLoad.value=false
       });
   }
 }
@@ -595,7 +602,7 @@ const title = computed(() => {
                   <q-separator />
 
                   <q-card-section class="q-pa-none">
-                    <q-list separator>
+                    <q-list separator v-if="!isLoadList">
                       <q-item
                         dense
                         v-for="(item, index) in listTarget"
@@ -622,6 +629,25 @@ const title = computed(() => {
                         </q-item-section>
                       </q-item>
                     </q-list>
+
+                    <q-list v-else separator>
+                      <q-item dense v-for="item in 2">
+                        <q-item-section class="q-pa-none">
+                          <div
+                            class="row items-center"
+                            style="min-height: 50px"
+                          >
+                            <div class="col-5">
+                              <q-skeleton type="text" width="50px" />
+                            </div>
+                            <div class="col-7">
+                              <q-skeleton type="text" />
+                            </div>
+                          </div>
+                        </q-item-section>
+                      </q-item>
+                    </q-list>
+
                     <q-separator />
                     <div
                       class="q-pa-lg flex justify-end"
@@ -662,18 +688,33 @@ const title = computed(() => {
                     <div class="q-pa-sm q-col-gutter-lg">
                       <div class="col-12 row" v-if="numpage !== 3">
                         <div class="col-4 text-grey-6">หน่วยงาน/ส่วนราชการ</div>
-                        <div class="col-8">{{ formDetail.nodeName }}</div>
+                        <div v-if="!isLoad" class="col-8">
+                          {{ formDetail.nodeName }}
+                        </div>
+                        <div class="col-8" v-else>
+                          <q-skeleton type="text" />
+                        </div>
                       </div>
                       <div class="col-12 row" v-if="numpage === 1">
                         <div class="col-4 text-grey-6">ยุทธศาสตร์ / แผน</div>
-                        <div class="col-8">{{ formDetail.strategyName }}</div>
+                        <div v-if="!isLoad" class="col-8">
+                          {{ formDetail.strategyName }}
+                        </div>
+                        <div class="col-8" v-else>
+                          <q-skeleton type="text" />
+                        </div>
                       </div>
 
                       <div class="col-12 row">
                         <div class="col-4 text-grey-6">ลำดับ/รหัสตัวชี้วัด</div>
                         <div class="col-8">
+                          <q-skeleton
+                            v-if="isLoad"
+                            type="QInput"
+                            height="40px"
+                          />
                           <q-input
-                            v-if="numpage === 3"
+                            v-else-if="numpage === 3"
                             outlined
                             :readonly="checkDetail"
                             v-model="formDetail.including"
@@ -694,8 +735,13 @@ const title = computed(() => {
                       <div class="col-12 row">
                         <div class="col-4 text-grey-6">ชื่อตัวชี้วัด</div>
                         <div class="col-8">
+                          <q-skeleton
+                            v-if="isLoad"
+                            type="QInput"
+                            height="40px"
+                          />
                           <q-input
-                            v-if="numpage === 3"
+                            v-else-if="numpage === 3"
                             outlined
                             :readonly="checkDetail"
                             v-model="formDetail.includingName"
@@ -715,6 +761,7 @@ const title = computed(() => {
                         <div class="col-4 text-grey-6">ค่าเป้าหมาย</div>
                         <div class="col-8">
                           <q-input
+                            v-if="!isLoad"
                             outlined
                             v-model="formDetail.target"
                             bg-color="white"
@@ -727,12 +774,14 @@ const title = computed(() => {
                             hide-bottom-space
                             lazy-rules
                           />
+                          <q-skeleton v-else type="QInput" height="40px" />
                         </div>
                       </div>
                       <div class="col-12 row">
                         <div class="col-4 text-grey-6">หน่วยนับ</div>
                         <div class="col-8">
                           <q-input
+                            v-if="!isLoad"
                             outlined
                             v-model="formDetail.unit"
                             bg-color="white"
@@ -746,12 +795,14 @@ const title = computed(() => {
                             hide-bottom-space
                             reverse-fill-mask
                           />
+                          <q-skeleton v-else type="QInput" height="40px" />
                         </div>
                       </div>
                       <div class="col-12 row">
                         <div class="col-4 text-grey-6">น้ำหนัก (ร้อยละ)</div>
                         <div class="col-8">
                           <q-input
+                            v-if="!isLoad"
                             outlined
                             v-model="formDetail.weight"
                             bg-color="white"
@@ -766,6 +817,7 @@ const title = computed(() => {
                             lazy-rules
                             mask="###"
                           />
+                          <q-skeleton v-else type="QInput" height="40px" />
                         </div>
                       </div>
                     </div>
@@ -784,6 +836,7 @@ const title = computed(() => {
                       <div class="col-6 text-center text-body2">5</div>
                       <div class="col-6">
                         <q-input
+                          v-if="!isLoad"
                           v-model="formDetail.achievement5"
                           outlined
                           dense
@@ -793,6 +846,7 @@ const title = computed(() => {
                           class="inputgreen"
                           lazy-rules
                         />
+                        <q-skeleton v-else type="QInput" height="40px" />
                       </div>
                     </div>
                     <q-separator />
@@ -800,6 +854,7 @@ const title = computed(() => {
                       <div class="col-6 text-center text-body2">4</div>
                       <div class="col-6 text-center text-primary">
                         <q-input
+                          v-if="!isLoad"
                           v-model="formDetail.achievement4"
                           outlined
                           :readonly="checkDetail"
@@ -809,6 +864,7 @@ const title = computed(() => {
                           class="inputgreen"
                           lazy-rules
                         />
+                        <q-skeleton v-else type="QInput" height="40px" />
                       </div>
                     </div>
                     <q-separator />
@@ -816,6 +872,7 @@ const title = computed(() => {
                       <div class="col-6 text-center text-body2">3</div>
                       <div class="col-6 text-center text-primary">
                         <q-input
+                          v-if="!isLoad"
                           v-model="formDetail.achievement3"
                           outlined
                           :readonly="checkDetail"
@@ -825,6 +882,7 @@ const title = computed(() => {
                           class="inputgreen"
                           lazy-rules
                         />
+                        <q-skeleton v-else type="QInput" height="40px" />
                       </div>
                     </div>
                     <q-separator />
@@ -832,6 +890,7 @@ const title = computed(() => {
                       <div class="col-6 text-center text-body2">2</div>
                       <div class="col-6 text-center text-primary">
                         <q-input
+                          v-if="!isLoad"
                           v-model="formDetail.achievement2"
                           outlined
                           :readonly="checkDetail"
@@ -841,6 +900,7 @@ const title = computed(() => {
                           class="inputgreen"
                           lazy-rules
                         />
+                        <q-skeleton v-else type="QInput" height="40px" />
                       </div>
                     </div>
                     <q-separator />
@@ -848,6 +908,7 @@ const title = computed(() => {
                       <div class="col-6 text-center text-body2">1</div>
                       <div class="col-6 text-center text-primary">
                         <q-input
+                          v-if="!isLoad"
                           v-model="formDetail.achievement1"
                           outlined
                           :readonly="checkDetail"
@@ -857,12 +918,14 @@ const title = computed(() => {
                           class="inputgreen"
                           lazy-rules
                         />
+                        <q-skeleton v-else type="QInput" height="40px" />
                       </div>
                     </div>
                   </q-card>
                 </div>
                 <div class="col-12">
                   <q-input
+                    v-if="!isLoad"
                     v-model="formDetail.meaning"
                     label="นิยามหรือความหมายของตัวชี้วัด"
                     type="textarea"
@@ -874,10 +937,12 @@ const title = computed(() => {
                     class="inputgreen"
                     lazy-rules
                   />
+                  <q-skeleton v-else type="QInput" height="150px" />
                 </div>
 
                 <div class="col-12">
                   <q-input
+                    v-if="!isLoad"
                     v-model="formDetail.formula"
                     label="สูตรคำนวณ"
                     :readonly="checkDetail"
@@ -889,10 +954,12 @@ const title = computed(() => {
                     class="inputgreen"
                     lazy-rules
                   />
+                  <q-skeleton v-else type="QInput" height="150px" />
                 </div>
 
                 <div class="col-12">
                   <q-input
+                    v-if="!isLoad"
                     v-model="formDetail.documentInfoEvidence"
                     label="ข้อมูลเอกสารหลักฐาน"
                     type="textarea"
@@ -904,9 +971,11 @@ const title = computed(() => {
                     class="inputgreen"
                     lazy-rules
                   />
+                  <q-skeleton v-else type="QInput" height="150px" />
                 </div>
                 <div class="col-3">
                   <datepicker
+                    v-if="!isLoad"
                     v-model="formDetail.startDate"
                     :locale="'th'"
                     :readonly="checkDetail"
@@ -952,9 +1021,11 @@ const title = computed(() => {
                       </q-input>
                     </template>
                   </datepicker>
+                  <q-skeleton v-else type="QInput" height="40px" />
                 </div>
                 <div class="col-3">
                   <datepicker
+                    v-if="!isLoad"
                     v-model="formDetail.endDate"
                     :locale="'th'"
                     :readonly="checkDetail"
@@ -1000,6 +1071,7 @@ const title = computed(() => {
                       </q-input>
                     </template>
                   </datepicker>
+                  <q-skeleton v-else type="QInput" height="40px" />
                 </div>
               </div>
             </div>
diff --git a/src/modules/08_KPI/components/Tab/Dialog/04_FormCompetency.vue b/src/modules/08_KPI/components/Tab/Dialog/04_FormCompetency.vue
index 4a5d936..0ece278 100644
--- a/src/modules/08_KPI/components/Tab/Dialog/04_FormCompetency.vue
+++ b/src/modules/08_KPI/components/Tab/Dialog/04_FormCompetency.vue
@@ -195,9 +195,10 @@ function onSubmit() {
   }
 }
 
+const isLoadCapacity = ref<boolean>(false);
 /** ดึงข้อมูล สมรรถนะ */
 function getData() {
-  showLoader();
+  isLoadCapacity.value = true;
   http
     .get(config.API.KpiCapacity + `?type=${type.value}&pageSize=100`)
     .then((res) => {
@@ -213,7 +214,7 @@ function getData() {
       }
     })
     .finally(() => {
-      hideLoader();
+      isLoadCapacity.value = false;
     });
 }
 
@@ -228,7 +229,9 @@ function filterTxt(val: any) {
 }
 
 /** ดึงข้อมูลตามไอดี */
+const isLoadById = ref<boolean>(false);
 function getDataById() {
+  isLoadById.value = true;
   http
     .get(config.API.kpiUserCapacity + `/${idProps.value}`)
     .then((res) => {
@@ -252,6 +255,7 @@ function getDataById() {
       formDetail.definition = target.description;
 
       dataListCapacityDetails.value = dataListCriteria;
+      isLoadById.value = false;
     })
     .catch((e) => {})
     .finally(() => {});
@@ -262,8 +266,10 @@ watch(
   () => {
     if (modal.value) {
       type.value = competencyType.value;
+
       getData();
       if (idProps.value) {
+        isLoadById.value = true;
         setTimeout(() => {
           getDataById();
         }, 500);
@@ -407,18 +413,32 @@ watch(
                           }}
                         </div>
                         <div class="col-8">
-                          <span v-if="field == 'type'">{{
-                            formDetail[field]
-                              ? store.convertCompetencyType(formDetail[field])
-                              : "-"
-                          }}</span>
-                          <span
-                            v-else-if="field == 'definition'"
-                            v-html="formDetail[field]"
-                          ></span>
-                          <span v-else>{{
-                            formDetail[field] ? formDetail[field] : "-"
-                          }}</span>
+                          <span v-if="field == 'type'">
+                            <div v-if="!isLoadById">
+                              {{
+                                formDetail[field]
+                                  ? store.convertCompetencyType(
+                                      formDetail[field]
+                                    )
+                                  : "-"
+                              }}
+                            </div>
+
+                            <q-skeleton v-else type="text" />
+                          </span>
+                          <span v-else-if="field == 'definition'">
+                            <div
+                              v-if="!isLoadById"
+                              v-html="formDetail[field]"
+                            ></div>
+                            <q-skeleton v-else type="text" />
+                          </span>
+                          <span v-else>
+                            <div v-if="!isLoadById">
+                              {{ formDetail[field] ? formDetail[field] : "-" }}
+                            </div>
+                            <q-skeleton v-else type="text"
+                          /></span>
                         </div>
                       </div>
                     </div>
@@ -426,6 +446,7 @@ watch(
                       <div class="col-4 text-grey-6">น้ำหนัก (ร้อยละ)</div>
                       <div class="col-8">
                         <q-input
+                          v-if="!isLoadById"
                           readonly
                           v-model="weight"
                           dense
@@ -436,10 +457,12 @@ watch(
                           class="inputgreen"
                           mask="###"
                         />
+                        <q-skeleton v-else type="QInput" height="40px" />
                       </div>
                       <div class="col-4 text-grey-6">ระดับที่คาดหวัง</div>
                       <div class="col-8">
                         <q-select
+                          v-if="!isLoadById"
                           :readonly="type == 'HEAD' || type == 'GROUP'"
                           v-model="expectedLevel"
                           :options="expectedLevelOp"
@@ -451,12 +474,14 @@ watch(
                           hide-bottom-space
                           class="inputgreen"
                         />
+                        <q-skeleton v-else type="QInput" height="40px" />
                       </div>
                     </div>
                   </q-card>
                 </div>
                 <div class="col-xs-12 col-md-7">
                   <d-table
+                    v-if="!isLoadById"
                     flat
                     bordered
                     dense
@@ -464,10 +489,12 @@ watch(
                     row-key="level"
                     virtual-scroll
                     :rows="dataListCapacityDetails"
+                    :rows-per-page-options="[100]"
                     hide-pagination
                     :columns="columns"
                     :visible-columns="visibleColumns"
-                    v-model:pagination="pagination"
+                    :pagination="pagination"
+                    :loading="isLoadById"
                   >
                     <template v-slot:header="props">
                       <q-tr :props="props">
diff --git a/src/modules/08_KPI/components/Tab/Dialog/DialogCommentProblem.vue b/src/modules/08_KPI/components/Tab/Dialog/DialogCommentProblem.vue
index c311882..e72c5d8 100644
--- a/src/modules/08_KPI/components/Tab/Dialog/DialogCommentProblem.vue
+++ b/src/modules/08_KPI/components/Tab/Dialog/DialogCommentProblem.vue
@@ -60,7 +60,9 @@ let count = ref<number>(0);
  * @param index id หัวข้อ
  * @param data ข้อมูล
  */
+const isLoadDetail = ref<boolean>(false);
 function clickList(index: string, data: any) {
+  isLoadDetail.value = true;
   listCheck.value = index as string;
 
   formDataView.id = data.id;
@@ -76,13 +78,13 @@ function clickList(index: string, data: any) {
   reasonCommanderHigh.value = data.reasonCommanderHigh ?? "";
 
   if (count.value >= 1) {
-    reasonEvaluatorRef.value.reset();
-    reasonCommanderRef.value.reset();
-    reasonCommanderHighRef.value.reset();
+    reasonEvaluatorRef.value && reasonEvaluatorRef.value.reset();
+    reasonCommanderRef.value && reasonCommanderRef.value.reset();
+    reasonCommanderHighRef.value && reasonCommanderHighRef.value.reset();
   }
-  showLoader();
+  count.value++;
   setTimeout(() => {
-    hideLoader();
+    isLoadDetail.value = false;
   }, 100);
 }
 
@@ -157,8 +159,9 @@ function closeAdd() {
   getList();
 }
 
+const isLoad = ref<boolean>(false);
 function getList() {
-  showLoader();
+  isLoad.value = true;
   http
     .get(
       config.API.kpiCommentP(
@@ -171,13 +174,13 @@ function getList() {
     .then((res) => {
       const data = res.data.result;
       listTarget.value = data;
+      isLoad.value = false;
     })
     .catch((e) => {
       messageError($q, e);
+      isLoad.value = false;
     })
-    .finally(() => {
-      hideLoader();
-    });
+    .finally(() => {});
 }
 
 /**
@@ -288,7 +291,19 @@ watch(
 
                 <q-separator />
                 <q-card-section class="q-pa-none">
-                  <div v-if="listTarget.length > 0">
+                  <q-list v-if="isLoad" separator>
+                    <q-item dense v-for="item in 2">
+                      <q-item-section class="q-pa-none">
+                        <div class="row items-center" style="min-height: 50px">
+                          <div class="col-12">
+                            <q-skeleton type="text" />
+                          </div>
+                        </div>
+                      </q-item-section>
+                    </q-item>
+                  </q-list>
+
+                  <div v-else-if="listTarget.length > 0">
                     <q-list separator dense>
                       <q-item
                         v-for="(item, index) in listTarget"
@@ -348,11 +363,21 @@ watch(
               <div class="row q-pa-md q-col-gutter-sm">
                 <div class="row col-12 text-weight-medium">
                   <div class="col-4 text-grey-6">หัวข้อปัญหา</div>
-                  <div class="col-8">{{ formDataView.topic }}</div>
+                  <div class="col-8">
+                    <div v-if="!isLoadDetail">
+                      {{ formDataView.topic }}
+                    </div>
+                    <q-skeleton v-else type="text" />
+                  </div>
                 </div>
                 <div class="row col-12 text-weight-medium">
                   <div class="col-4 text-grey-6">รายละเอียดปัญหา</div>
-                  <div class="col-8">{{ formDataView.reason }}</div>
+                  <div class="col-8">
+                    <div v-if="!isLoadDetail">
+                      {{ formDataView.reason }}
+                    </div>
+                    <q-skeleton v-else type="text" />
+                  </div>
                 </div>
                 <div class="col-12">
                   <q-separator />
@@ -375,6 +400,7 @@ watch(
                     </div>
                     <div class="col-12">
                       <q-input
+                        v-if="!isLoadDetail"
                         outlined
                         dense
                         :readonly="
@@ -390,6 +416,7 @@ watch(
                         hide-bottom-space
                         :rules="[(val:string) => !!val || `${'กรุณากรอกความคิดเห็นของผู้ประเมิน'}`,]"
                       ></q-input>
+                      <q-skeleton v-else type="QInput" height="150px" />
                     </div>
 
                     <div
@@ -429,6 +456,7 @@ watch(
                     </div>
                     <div class="col-12">
                       <q-input
+                        v-if="!isLoadDetail"
                         outlined
                         dense
                         label="ความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไป"
@@ -444,6 +472,7 @@ watch(
                         hide-bottom-space
                         :rules="[(val:string) => !!val || `${'กรุณากรอกความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไป'}`,]"
                       ></q-input>
+                      <q-skeleton v-else type="QInput" height="150px" />
                     </div>
 
                     <div
@@ -482,6 +511,7 @@ watch(
                     </div>
                     <div class="col-12">
                       <q-input
+                        v-if="!isLoadDetail"
                         outlined
                         dense
                         label="ความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไปอีกขั้นหนึ่ง"
@@ -497,6 +527,7 @@ watch(
                         hide-bottom-space
                         :rules="[(val:string) => !!val || `${'กรุณากรอกความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไปอีกขั้นหนึ่ง'}`,]"
                       ></q-input>
+                      <q-skeleton v-else type="QInput" height="150px" />
                     </div>
 
                     <div
diff --git a/src/modules/08_KPI/components/Tab/Dialog/DialogCommentProgress.vue b/src/modules/08_KPI/components/Tab/Dialog/DialogCommentProgress.vue
index dd3813b..a86cdbb 100644
--- a/src/modules/08_KPI/components/Tab/Dialog/DialogCommentProgress.vue
+++ b/src/modules/08_KPI/components/Tab/Dialog/DialogCommentProgress.vue
@@ -62,7 +62,10 @@ const formDataView = reactive<FormCommentByRole>({
 });
 
 let count = ref<number>(0);
+const isLoadDetail = ref<boolean>(false);
 function clickList(index: string, data: any) {
+  isLoadDetail.value = true;
+
   listCheck.value = index as string;
 
   formDataView.id = data.id;
@@ -80,14 +83,13 @@ function clickList(index: string, data: any) {
   reasonCommanderHigh.value = data.reasonCommanderHigh ?? "";
 
   if (count.value >= 1) {
-    reasonEvaluatorRef.value.reset();
-    reasonCommanderRef.value.reset();
-    reasonCommanderHighRef.value.reset();
+    reasonEvaluatorRef.value && reasonEvaluatorRef.value.reset();
+    reasonCommanderRef.value && reasonCommanderRef.value.reset();
+    reasonCommanderHighRef.value && reasonCommanderHighRef.value.reset();
   }
   count.value++;
-  showLoader();
   setTimeout(() => {
-    hideLoader();
+    isLoadDetail.value = false;
   }, 100);
 }
 
@@ -147,8 +149,9 @@ function closeAdd() {
   numLevel.value = "";
 }
 
+const isLoad = ref<boolean>(false);
 function getList() {
-  showLoader();
+  isLoad.value = true;
   http
     .get(
       config.API.kpiCommentP(
@@ -161,13 +164,13 @@ function getList() {
     .then((res) => {
       const data = res.data.result;
       listTarget.value = data;
+      isLoad.value = false;
     })
     .catch((e) => {
       messageError($q, e);
+      isLoad.value = false;
     })
-    .finally(() => {
-      hideLoader();
-    });
+    .finally(() => {});
 }
 
 function onSubmitComment(role: string) {
@@ -313,7 +316,21 @@ watch(
 
                   <q-separator />
                   <q-card-section class="q-pa-none">
-                    <div v-if="listTarget.length > 0">
+                    <q-list v-if="isLoad" separator>
+                      <q-item dense v-for="item in 2">
+                        <q-item-section class="q-pa-none">
+                          <div
+                            class="row items-center"
+                            style="min-height: 50px"
+                          >
+                            <div class="col-12">
+                              <q-skeleton type="text" />
+                            </div>
+                          </div>
+                        </q-item-section>
+                      </q-item>
+                    </q-list>
+                    <div v-else-if="listTarget.length > 0">
                       <q-list separator dense>
                         <q-item
                           v-for="(item, index) in listTarget"
@@ -373,7 +390,12 @@ watch(
                           : "หัวข้อความก้าวหน้า"
                       }}
                     </div>
-                    <div class="col-8">{{ formDataView.topic }}</div>
+                    <div class="col-8">
+                      <div v-if="!isLoadDetail">
+                        {{ formDataView.topic }}
+                      </div>
+                      <q-skeleton v-else type="text" />
+                    </div>
                   </div>
                   <div class="row col-12 text-weight-medium">
                     <div class="col-4 text-grey-6">
@@ -383,18 +405,29 @@ watch(
                           : "รายละเอียดความก้าวหน้า"
                       }}
                     </div>
-                    <div class="col-8">{{ formDataView.reason }}</div>
+                    <div class="col-8">
+                      <div v-if="!isLoadDetail">{{ formDataView.reason }}</div>
+                      <q-skeleton v-else type="text" />
+                    </div>
                   </div>
                   <div
                     class="row col-12 text-weight-medium"
                     v-if="type !== 'capacity' && type !== 'development'"
                   >
                     <div class="col-4 text-grey-6">คะแนน</div>
-                    <div class="col-8">{{ formDataView.score }}</div>
+                    <div class="col-8">
+                      <div v-if="!isLoadDetail">{{ formDataView.score }}</div>
+                      <q-skeleton v-else type="text" />
+                    </div>
                   </div>
                   <div class="row col-12 text-weight-medium">
                     <div class="col-4 text-grey-6">ผู้สร้าง</div>
-                    <div class="col-8">{{ formDataView.createdFullName }}</div>
+                    <div class="col-8">
+                      <div v-if="!isLoadDetail">
+                        {{ formDataView.createdFullName }}
+                      </div>
+                      <q-skeleton v-else type="text" />
+                    </div>
                   </div>
 
                   <div
@@ -422,6 +455,7 @@ watch(
                         </div>
                         <div class="col-12">
                           <q-input
+                            v-if="!isLoadDetail"
                             outlined
                             dense
                             :readonly="
@@ -437,6 +471,7 @@ watch(
                             hide-bottom-space
                             :rules="[(val:string) => !!val || `${'กรุณากรอกความคิดเห็นของผู้ประเมิน'}`,]"
                           ></q-input>
+                          <q-skeleton v-else type="QInput" height="150px" />
                         </div>
 
                         <div
@@ -475,6 +510,7 @@ watch(
                         </div>
                         <div class="col-12">
                           <q-input
+                            v-if="!isLoadDetail"
                             outlined
                             dense
                             label="ความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไป"
@@ -490,6 +526,7 @@ watch(
                             hide-bottom-space
                             :rules="[(val:string) => !!val || `${'กรุณากรอกความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไป'}`,]"
                           ></q-input>
+                          <q-skeleton v-else type="QInput" height="150px" />
                         </div>
 
                         <div
@@ -527,6 +564,7 @@ watch(
                         </div>
                         <div class="col-12">
                           <q-input
+                            v-if="!isLoadDetail"
                             outlined
                             dense
                             label="ความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไปอีกขั้นหนึ่ง"
@@ -542,6 +580,7 @@ watch(
                             hide-bottom-space
                             :rules="[(val:string) => !!val || `${'กรุณากรอกความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไปอีกขั้นหนึ่ง'}`,]"
                           ></q-input>
+                          <q-skeleton v-else type="QInput" height="150px" />
                         </div>
 
                         <div
diff --git a/src/modules/08_KPI/components/Tab/Dialog/DialogDevelop.vue b/src/modules/08_KPI/components/Tab/Dialog/DialogDevelop.vue
index 35acdb6..5d81430 100644
--- a/src/modules/08_KPI/components/Tab/Dialog/DialogDevelop.vue
+++ b/src/modules/08_KPI/components/Tab/Dialog/DialogDevelop.vue
@@ -30,6 +30,8 @@ const props = defineProps({
 const route = useRoute();
 const idKpi = ref<string>(route.params.id.toLocaleString());
 
+const isLoadMain = defineModel<boolean>("isLoadMain", { required: true });
+const isLoad = ref<boolean>(false);
 const development = ref<string[]>([]); //ตัวแปรเก็บ ตัวเลือกการพัฒนา
 const reasonDevelopment70 = ref<string>(""); //อื่นๆ การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย)
 const reasonDevelopment20 = ref<string>(""); //อื่นๆ การเรียนรู้จากผู้อื่น (Coach/Mentor/Consulting)
@@ -185,8 +187,6 @@ function close() {
   reasonDevelopment20.value = "";
   reasonDevelopment10.value = "";
   development.value = [];
-
-  props.getAll?.();
 }
 
 /** บันทึกข้อมูลการพัฒนาตน */
@@ -198,7 +198,8 @@ function onSubmit() {
   ) {
     dialogMessageNotify($q, "กรุณาเลือกวิธีการพัฒนา อย่างน้อย 1 ตัวเลือก");
   } else {
-    dialogConfirm($q, () => {
+    dialogConfirm($q, async () => {
+      showLoader();
       const url = id.value
         ? config.API.kpiAchievementDevelop + `/${id.value}`
         : config.API.kpiAchievementDevelop;
@@ -220,9 +221,9 @@ function onSubmit() {
         selectTypeYear: formData.year ? formData.year.toString() : null,
         selectTypeId: projectName.value ? projectName.value.id : null,
       };
-      showLoader();
-      http[id.value ? "put" : "post"](url, body)
-        .then((res) => {
+      await http[id.value ? "put" : "post"](url, body)
+        .then(async () => {
+          await props?.getAll?.();
           success($q, "บันทึกข้อมูลสำเร็จ");
           close();
         })
@@ -236,9 +237,10 @@ function onSubmit() {
   }
 }
 
+const isLoadYear = ref<boolean>(false);
 async function getDataByYear() {
   if (formData.year) {
-    showLoader();
+    isLoadYear.value = true;
     http
       .get(config.API.developmentMain + `/done?year=${formData.year}`)
       .then(async (res) => {
@@ -249,13 +251,14 @@ async function getDataByYear() {
         messageError($q, e);
       })
       .finally(() => {
-        hideLoader();
+        isLoadYear.value = false;
       });
   }
 }
 
+const isLoadProject = ref<boolean>(false);
 function getProjectDetail(val: any) {
-  showLoader();
+  isLoadProject.value = true;
   http
     .get(config.API.developmentMain + `/tab3_1/${val.id}`)
     .then((res) => {
@@ -283,7 +286,7 @@ function getProjectDetail(val: any) {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoadProject.value = false;
     });
 }
 
@@ -305,7 +308,7 @@ watch(
   () => id.value,
   (i) => {
     if (i) {
-      showLoader();
+      isLoad.value = true;
       http
         .get(config.API.kpiAchievementDevelop + `/${id.value}`)
         .then(async (res) => {
@@ -342,13 +345,14 @@ watch(
             )
               ? data.reasonDevelopment10
               : "";
+            isLoad.value = false;
           }, 500);
         })
         .catch((e) => {
           messageError($q, e);
         })
         .finally(() => {
-          hideLoader();
+          isLoad.value = false;
         });
     }
   }
@@ -367,6 +371,7 @@ watch(
           <div class="row q-col-gutter-sm">
             <div class="col-3">
               <q-select
+                v-if="!isLoad"
                 class="inputgreen"
                 outlined
                 dense
@@ -379,9 +384,11 @@ watch(
                 v-model="choice"
               >
               </q-select>
+              <q-skeleton v-else type="QInput" height="40px" />
             </div>
             <div class="col-3" v-if="choice == 'PROJECT'">
               <datepicker
+                v-if="!isLoad"
                 menu-class-name="modalfix"
                 v-model="formData.year"
                 :locale="'th'"
@@ -419,9 +426,11 @@ watch(
                   </q-input>
                 </template>
               </datepicker>
+              <q-skeleton v-else type="QInput" height="40px" />
             </div>
             <div class="col-3" v-if="choice == 'PROJECT'">
               <q-select
+                v-if="!isLoadYear"
                 outlined
                 dense
                 :rules="[(val:string) => !!val || `${'กรุณาเลือกโครงการ/หลักสูตรการฝึกอบรม'}`,]"
@@ -446,9 +455,11 @@ watch(
                   </q-item>
                 </template>
               </q-select>
+              <q-skeleton v-else type="QInput" height="40px" />
             </div>
             <div class="col-12">
               <q-input
+                v-if="!isLoad && !isLoadProject"
                 v-model="formData.name"
                 outlined
                 dense
@@ -459,6 +470,7 @@ watch(
                 label="ชื่อเรื่อง/เนื้อเรื่อง/หัวข้อการพัฒนา"
               >
               </q-input>
+              <q-skeleton v-else type="QInput" height="40px" />
             </div>
             <div class="col-12">
               <span class="text-weight-medium">วิธีการพัฒนา</span>
@@ -469,6 +481,7 @@ watch(
                   >70 การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย)</span
                 >
                 <q-option-group
+                  v-if="!isLoad && !isLoadProject"
                   class="check_box q-mt-sm"
                   keep-color
                   color="primary"
@@ -477,16 +490,31 @@ watch(
                   :options="projectTechniquesOp1"
                   type="checkbox"
                 />
+
+                <q-list v-else class="list-c">
+                  <q-item
+                    class="q-pa-none"
+                    style="max-width: 300px; height: 30px"
+                    v-for="item in 11"
+                  >
+                    <q-item-section>
+                      <q-skeleton type="text" />
+                    </q-item-section>
+                  </q-item>
+                </q-list>
+
                 <div class="row q-pb-md" v-if="checkOtherBox11">
                   <div class="offset-4 col-8 q-mt-sm relative-position">
                     <div class="other_custom_input">
                       <q-input
+                        v-if="!isLoad && !isLoadProject"
                         v-model="reasonDevelopment70"
                         dense
                         outlined
                         class="inputgreen"
                         label="กรุณาระบุ"
                       ></q-input>
+                      <q-skeleton v-else type="QInput" height="40px" />
                     </div>
                   </div>
                 </div>
@@ -496,6 +524,7 @@ watch(
                   >20 การเรียนรู้จากผู้อื่น (Coach/Mentor/Consulting)</span
                 >
                 <q-option-group
+                  v-if="!isLoad && !isLoadProject"
                   class="check_box q-mt-sm"
                   keep-color
                   color="primary"
@@ -504,16 +533,29 @@ watch(
                   :options="projectTechniquesOp2"
                   type="checkbox"
                 />
+                <q-list v-else class="list-c">
+                  <q-item
+                    class="q-pa-none"
+                    style="max-width: 300px; height: 30px"
+                    v-for="item in 5"
+                  >
+                    <q-item-section>
+                      <q-skeleton type="text" />
+                    </q-item-section>
+                  </q-item>
+                </q-list>
                 <div class="row q-pb-md" v-if="checkOtherBox12">
                   <div class="offset-4 col-8 q-mt-sm relative-position">
                     <div class="other_custom_input">
                       <q-input
+                        v-if="!isLoad && !isLoadProject"
                         v-model="reasonDevelopment20"
                         dense
                         outlined
                         class="inputgreen"
                         label="กรุณาระบุ"
                       ></q-input>
+                      <q-skeleton v-else type="QInput" height="40px" />
                     </div>
                   </div>
                 </div>
@@ -521,6 +563,7 @@ watch(
               <div class="col-12 col-sm-6 col-md-6 col-lg-4">
                 <span class="text-weight-medium">10 การฝึกอบรมอื่นๆ</span>
                 <q-option-group
+                  v-if="!isLoad && !isLoadProject"
                   class="check_box q-mt-sm"
                   keep-color
                   color="primary"
@@ -529,16 +572,29 @@ watch(
                   :options="projectTechniquesOp3"
                   type="checkbox"
                 />
+                <q-list v-else class="list-c">
+                  <q-item
+                    class="q-pa-none"
+                    style="max-width: 300px; height: 30px"
+                    v-for="item in 7"
+                  >
+                    <q-item-section>
+                      <q-skeleton type="text" />
+                    </q-item-section>
+                  </q-item>
+                </q-list>
                 <div class="row q-pb-md" v-if="checkOtherBox13">
                   <div class="offset-4 col-8 q-mt-sm relative-position">
                     <div class="other_custom_input">
                       <q-input
+                        v-if="!isLoad && !isLoadProject"
                         v-model="reasonDevelopment10"
                         dense
                         outlined
                         class="inputgreen"
                         label="กรุณาระบุ"
                       ></q-input>
+                      <q-skeleton v-else type="QInput" height="40px" />
                     </div>
                   </div>
                 </div>
@@ -546,6 +602,7 @@ watch(
             </div>
             <div class="col-12">
               <q-input
+                v-if="!isLoad && !isLoadProject"
                 label="เป้าหมายการนำไปพัฒนางาน"
                 v-model="formData.target"
                 outlined
@@ -556,6 +613,7 @@ watch(
                 lazy-rules
                 hide-bottom-space
               ></q-input>
+              <q-skeleton v-else type="QInput" height="150px" />
             </div>
             <div class="col-12">
               <q-card bordered>
@@ -573,6 +631,7 @@ watch(
                   </div>
                   <div class="col-8">
                     <q-input
+                      v-if="!isLoad && !isLoadProject"
                       class="inputgreen"
                       v-model="formData.achievement10"
                       outlined
@@ -582,6 +641,7 @@ watch(
                       lazy-rules
                       hide-bottom-space
                     ></q-input>
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
                 </div>
                 <q-separator />
@@ -591,6 +651,7 @@ watch(
                   </div>
                   <div class="col-8">
                     <q-input
+                      v-if="!isLoad && !isLoadProject"
                       class="inputgreen"
                       v-model="formData.achievement5"
                       outlined
@@ -600,6 +661,7 @@ watch(
                       lazy-rules
                       hide-bottom-space
                     ></q-input>
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
                 </div>
                 <q-separator />
@@ -609,6 +671,7 @@ watch(
                   </div>
                   <div class="col-8">
                     <q-input
+                      v-if="!isLoad && !isLoadProject"
                       class="inputgreen"
                       v-model="formData.achievement0"
                       outlined
@@ -618,6 +681,7 @@ watch(
                       lazy-rules
                       hide-bottom-space
                     ></q-input>
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
                 </div>
               </q-card>
@@ -640,6 +704,9 @@ watch(
 :deep(.check_box .q-checkbox) {
   align-items: start;
 }
+:deep(.list-c .q-item) {
+  min-height: 30px;
+}
 
 .other_custom_input {
   position: absolute;
diff --git a/src/modules/08_KPI/components/Tab/Dialog/DialogGovernment.vue b/src/modules/08_KPI/components/Tab/Dialog/DialogGovernment.vue
index 1ba8e29..3683b63 100644
--- a/src/modules/08_KPI/components/Tab/Dialog/DialogGovernment.vue
+++ b/src/modules/08_KPI/components/Tab/Dialog/DialogGovernment.vue
@@ -13,20 +13,14 @@ import DialogHeader from "@/components/DialogHeader.vue";
 const $q = useQuasar();
 const store = useKpiDataStore();
 const mixin = useCounterMixin();
-const {
-  showLoader,
-  hideLoader,
-  messageError,
-  findPosMasterNoOld,
-  findOrgNameOld,
-  findOrgNameOldHtml,
-  date2Thai,
-} = mixin;
+const { messageError, findOrgNameOldHtml, date2Thai } = mixin;
 
 const modal = defineModel<boolean>("modal", { required: true });
 const filterKeyword = ref<string>("");
 const rows = ref<any[]>([]);
 
+const isLoad = ref<boolean>(false);
+
 const visibleColumns = ref<string[]>([
   "commandName",
   "agency",
@@ -134,29 +128,6 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 
-/** เเปลง status เป็น text */
-function statusText(val: string) {
-  switch (val) {
-    case "WAITTING":
-      return "รอดำเนินการ";
-    case "PENDING":
-      return "เลือกตำแหน่งแล้ว";
-    case "APPROVE":
-      return "อนุมัติ";
-    case "REJECT":
-      return "ไม่อนุมัติ";
-    case "REPORT":
-      return "ส่งรายชื่อไปออกคำสั่ง";
-    case "WAITING":
-      return "รอออกคำสั่ง";
-    case "DONE":
-      return "ออกคำสั่งเสร็จแล้ว";
-
-    default:
-      return "-";
-  }
-}
-
 /** ปิด dialog */
 function close() {
   modal.value = false;
@@ -164,7 +135,7 @@ function close() {
 
 /** ดึงข้อมูล */
 function getData() {
-  showLoader();
+  isLoad.value = true;
   http
     .get(config.API.orgAssistance(store.dataEvaluation.profileId))
     .then((res) => {
@@ -175,14 +146,14 @@ function getData() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoad.value = false;
     });
 }
 
 watch(
   () => modal.value,
   (n) => {
-    if (n == true) {
+    if (n) {
       getData();
     }
   }
@@ -208,6 +179,8 @@ watch(
               dense
               :rows-per-page-options="[10, 25, 50, 100]"
               :visible-columns="visibleColumns"
+              :loading="isLoad"
+              :pagination="{ page: 1, rowsPerPage: 10 }"
             >
               <template v-slot:header="props">
                 <q-tr :props="props">
diff --git a/src/modules/08_KPI/components/Tab/Topic/01_Indicator.vue b/src/modules/08_KPI/components/Tab/Topic/01_Indicator.vue
index 74742e4..82bb1a5 100644
--- a/src/modules/08_KPI/components/Tab/Topic/01_Indicator.vue
+++ b/src/modules/08_KPI/components/Tab/Topic/01_Indicator.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, ref, watch } from "vue";
-import { useQuasar } from "quasar";
+import { Loading, useQuasar } from "quasar";
 
 import config from "@/app.config";
 import http from "@/plugins/http";
@@ -17,14 +17,14 @@ import DialogProblem from "@/modules/08_KPI/components/Tab/Dialog/DialogCommentP
 
 const $q = useQuasar();
 const store = useKpiDataStore();
-const { dialogRemove, showLoader, hideLoader, messageError, success } =
-  useCounterMixin();
+const { dialogRemove, messageError, success } = useCounterMixin();
 
 const checkDetail = ref<boolean>(false);
 const title = defineModel<string>("title", { required: true });
 const rows = defineModel<any>("data", { required: true });
 const numpage = defineModel<number>("page", { required: true });
 
+const isLoad = defineModel<boolean>("isLoad", { required: true });
 const props = defineProps({
   fetchList: { type: Function, required: true },
 });
@@ -136,7 +136,7 @@ async function onEvaluate() {
 function onDelete(id: string) {
   dialogRemove($q, async () => {
     try {
-      showLoader();
+      isLoad.value = true;
       const url =
         numpage.value === 1
           ? config.API.kpiAchievement("planned") + `/${id}`
@@ -151,7 +151,6 @@ function onDelete(id: string) {
     } catch (err) {
       messageError($q, err);
     } finally {
-      hideLoader();
     }
   });
 }
@@ -244,7 +243,7 @@ const isEditStep3 = computed(() => {
       <d-table
         ref="table"
         :columns="columns"
-        :rows="rows"
+        :rows="rows || []"
         :filter="filterKeyword"
         row-key="id"
         flat
@@ -253,7 +252,7 @@ const isEditStep3 = computed(() => {
         hide-pagination
         :visible-columns="visibleColumns"
         :rows-per-page-options="[20]"
-        no-data-label="ไม่มีข้อมูล"
+        :loading="isLoad"
       >
         <template v-slot:header="props">
           <q-tr :props="props">
diff --git a/src/modules/08_KPI/components/Tab/Topic/02_Competency.vue b/src/modules/08_KPI/components/Tab/Topic/02_Competency.vue
index 15cbbe1..ae426b5 100644
--- a/src/modules/08_KPI/components/Tab/Topic/02_Competency.vue
+++ b/src/modules/08_KPI/components/Tab/Topic/02_Competency.vue
@@ -123,6 +123,7 @@ const visibleColumns = ref<string[]>(
 const typeCompetency = ref<string>("");
 
 const rows = ref<any>([]);
+const isLoad = ref<any>([]);
 const lists = ref<any>([]);
 const modalProgress = ref<boolean>(false);
 const modalProblem = ref<boolean>(false);
@@ -157,6 +158,7 @@ function onAdd(type: string) {
 
 /** ดึงข้อมูล */
 function getData(type: string) {
+  isLoad.value[type] = true;
   http
     .get(config.API.kpiUserCapacity + `?id=${id.value}&type=${type}`)
     .then(async (res) => {
@@ -215,6 +217,7 @@ function getData(type: string) {
               : 0;
         }
       }
+      isLoad.value[type] = false;
     });
 }
 
@@ -232,7 +235,7 @@ function onEdit(data: FormCapacityList, type: string) {
  */
 function onDelete(id: string, type: string) {
   dialogRemove($q, () => {
-    showLoader();
+    isLoad.value[type] = true;
     http
       .delete(config.API.kpiUserCapacity + `/${id}`)
       .then((res) => {
@@ -293,7 +296,12 @@ function onLevel(num: number, list: any) {
 }
 
 watch(
-  () => [store.dataEvaluation.posTypeName, store.dataEvaluation.posExecutiveName, store.dataEvaluation.position, store.dataEvaluation.posLevelName], // ตรวจจับค่า posTypeName และ posExecutiveName
+  () => [
+    store.dataEvaluation.posTypeName,
+    store.dataEvaluation.posExecutiveName,
+    store.dataEvaluation.position,
+    store.dataEvaluation.posLevelName,
+  ], // ตรวจจับค่า posTypeName และ posExecutiveName
   (newValue) => {
     if (!newValue) return; // ถ้ายังไม่มีค่า ไม่ต้องทำอะไร
     const posTypeName = newValue[0];
@@ -326,26 +334,25 @@ watch(
 
     competencyType.value =
       position === "ผู้ตรวจราชการกรุงเทพมหานคร" || position === "ผู้ตรวจราชการ"
-      ? competencyTypeList.filter(
-          (x: DataOptions) => x.id === "HEAD" || x.id === "INSPECTOR"
-        )
-      : posExecutiveName === "ผู้อำนวยการเขต"
-      ? competencyTypeList.filter(
-          (x: DataOptions) => x.id === "HEAD" || x.id === "DIRECTOR"
-        )
-      : posTypeName === "อำนวยการ" ||
-        posTypeName === "บริหาร" ||
-        (posTypeName === "ทั่วไป" &&
-          posLevelName === "อาวุโส" &&
-          posExecutiveName != null) ||
-        (posTypeName === "วิชาการ" &&
-          posExecutiveName != null)
-      ? competencyTypeList.filter(
-          (x: DataOptions) => x.id === "HEAD" || x.id === "EXECUTIVE"
-        )
-      : competencyTypeList.filter(
-          (x: DataOptions) => x.id === "HEAD" || x.id === "GROUP"
-        );
+        ? competencyTypeList.filter(
+            (x: DataOptions) => x.id === "HEAD" || x.id === "INSPECTOR"
+          )
+        : posExecutiveName === "ผู้อำนวยการเขต"
+        ? competencyTypeList.filter(
+            (x: DataOptions) => x.id === "HEAD" || x.id === "DIRECTOR"
+          )
+        : posTypeName === "อำนวยการ" ||
+          posTypeName === "บริหาร" ||
+          (posTypeName === "ทั่วไป" &&
+            posLevelName === "อาวุโส" &&
+            posExecutiveName != null) ||
+          (posTypeName === "วิชาการ" && posExecutiveName != null)
+        ? competencyTypeList.filter(
+            (x: DataOptions) => x.id === "HEAD" || x.id === "EXECUTIVE"
+          )
+        : competencyTypeList.filter(
+            (x: DataOptions) => x.id === "HEAD" || x.id === "GROUP"
+          );
 
     for (let index = 0; index < competencyType.value.length; index++) {
       const element = competencyType.value[index];
@@ -391,19 +398,21 @@ watch(
           </q-btn>
         </div>
       </q-card-section>
+
       <q-card-section class="q-pa-sm">
         <d-table
           ref="table"
           :columns="columns"
-          :rows="rows[item.id]"
+          :rows="rows[item.id] || []"
           row-key="id"
           flat
           bordered
           :paging="true"
           dense
           hide-pagination
-          no-data-label="ไม่มีข้อมูล"
           :visible-columns="visibleColumns"
+          :rows-per-page-options="[20]"
+          :loading="isLoad[item.id]"
         >
           <template v-slot:header="props">
             <q-tr :props="props">
diff --git a/src/modules/08_KPI/components/Tab/Topic/03_Develop.vue b/src/modules/08_KPI/components/Tab/Topic/03_Develop.vue
index b8b9e6b..b8cd2dc 100644
--- a/src/modules/08_KPI/components/Tab/Topic/03_Develop.vue
+++ b/src/modules/08_KPI/components/Tab/Topic/03_Develop.vue
@@ -24,29 +24,23 @@ const idEditDevelop = ref<string>("");
 
 const $q = useQuasar();
 const mixin = useCounterMixin();
-const {
-  date2Thai,
-  messageError,
-  showLoader,
-  hideLoader,
-  dialogRemove,
-  success,
-} = mixin;
+const { date2Thai, messageError, dialogRemove, success } = mixin;
 
 const isUpdate = defineModel("isUpdate", {
   type: Boolean,
   default: false,
 });
 
+const isLoad = ref<boolean>(false);
 const modalProgress = ref<boolean>(false);
 const modalProblem = ref<boolean>(false);
 const type = ref<string>("");
 const idList = ref<string>("");
 const isEditStep1 = computed(() => {
   return (
-    (store.dataEvaluation.evaluationStatus === "NEW" &&
-      store.rolePerson === "USER" &&
-      store.tabMain === "1")
+    store.dataEvaluation.evaluationStatus === "NEW" &&
+    store.rolePerson === "USER" &&
+    store.tabMain === "1"
   );
 });
 
@@ -148,6 +142,7 @@ function onEdit(id: string) {
 
 /** ดึงข้อมูลพัฒนา */
 function getDevelop() {
+  isLoad.value = true;
   http
     .get(config.API.kpiAchievementDevelop + `?id=${evaluationId.value}`)
     .then((res) => {
@@ -159,6 +154,7 @@ function getDevelop() {
         0
       );
 
+      isLoad.value = false;
       store.devScoreVal =
         data.length !== 0 ? totalSummary / rows.value.length : 0;
     });
@@ -173,7 +169,7 @@ function onEvaluate() {
  */
 function onDelete(id: string) {
   dialogRemove($q, () => {
-    showLoader();
+    isLoad.value = true;
     http
       .delete(config.API.kpiAchievementDevelop + `/${id}`)
       .then((res) => {
@@ -182,10 +178,9 @@ function onDelete(id: string) {
       })
       .catch((e) => {
         messageError($q, e);
+        isLoad.value = false;
       })
-      .finally(() => {
-        hideLoader();
-      });
+      .finally(() => {});
   });
 }
 
@@ -253,8 +248,9 @@ onMounted(() => {
         :paging="true"
         dense
         hide-pagination
-        no-data-label="ไม่มีข้อมูล"
+        :rows-per-page-options="[20]"
         :visible-columns="visibleColumns"
+        :loading="isLoad"
       >
         <template v-slot:header="props">
           <q-tr :props="props">
@@ -341,7 +337,11 @@ onMounted(() => {
                   dense
                   @click="openPopupProgress(props.row.id)"
                 >
-                  <q-tooltip>{{store.tabMain == '3' ? `บันทึกเหตุการณ์/พฤติกรรม/เหตุผล` :'บันทึกเหตุการณ์/พฤติกรรม'}}</q-tooltip>
+                  <q-tooltip>{{
+                    store.tabMain == "3"
+                      ? `บันทึกเหตุการณ์/พฤติกรรม/เหตุผล`
+                      : "บันทึกเหตุการณ์/พฤติกรรม"
+                  }}</q-tooltip>
                 </q-btn>
               </div>
 
@@ -505,6 +505,7 @@ onMounted(() => {
     v-model:modal="modalDevelop"
     v-model:id="idEditDevelop"
     :get-all="getDevelop"
+    v-model:isLoadMain="isLoad"
   />
 
   <DialogEvalutionDevelop
diff --git a/src/modules/08_KPI/views/form.vue b/src/modules/08_KPI/views/form.vue
index 9bfd689..05a653b 100644
--- a/src/modules/08_KPI/views/form.vue
+++ b/src/modules/08_KPI/views/form.vue
@@ -66,6 +66,11 @@ const commanderHighId = ref<any>(null); // ตัวแปรเก็บ id ผ
 
 const imgProfile = ref<string>(""); // ตัวแปรเก็บรูปโปรไฟล์
 
+/** ตัวแปรโหลด */
+const isLoad = ref<boolean>(false);
+const isLoadCommander = ref<boolean>(false);
+const isLoadAvatar = ref<boolean>(false); // เช็คโหลดรูปโปร์ไฟล์
+
 const formProfile = reactive<FormProfile>({
   fullName: "",
   position: "",
@@ -95,7 +100,9 @@ async function fetchEvaluation() {
 }
 
 async function getAvatar(id: string) {
+  isLoadAvatar.value = true;
   await http
+
     .get(config.API.orgCheckAvatar(id))
     .then(async (res) => {
       const data = await res.data.result;
@@ -105,12 +112,15 @@ async function getAvatar(id: string) {
     })
     .catch((e) => {
       messageError($q, e);
+    })
+    .finally(() => {
+      isLoadAvatar.value = false;
     });
 }
 
 /** ดึงข้อมูล เพื่อเก็บรูปโปรไฟล์ */
 async function fetchProfile(id: string, avatarName: string) {
-  http
+  await http
     .get(config.API.fileByFile("ทะเบียนประวัติ", "โปรไฟล์", id, avatarName))
     .then(async (res) => {
       store.dataEvaluation.avartar = res.data.downloadUrl;
@@ -162,6 +172,7 @@ function onSubmit() {
 
 /** ดึงข้อมูล ผู้ประเมิน */
 async function getOrgOp() {
+  isLoadCommander.value = true;
   http
     .get(config.API.Kpiorg)
     .then((res) => {
@@ -199,9 +210,11 @@ async function getOrgOp() {
         .find(
           (i: EvaOptionType) => i.id == store.dataEvaluation.commanderHighId
         );
+      isLoadCommander.value = false;
     })
     .catch((e) => {
       messageError($q, e);
+      isLoadCommander.value = false;
     })
     .finally(() => {});
 }
@@ -453,8 +466,9 @@ const evaluator = ref<EvaluatorType>({
  * ข้อมูลของผู้ประเมิน
  * @param id ข้อมูลของผู้ประเมิน
  */
+const isLoadModal = ref<boolean>(false);
 async function fetchProfileEvaluator(id: string) {
-  showLoader();
+  isLoadModal.value = true;
   http
     .get(config.API.orgPosition + `/${id}`)
     .then(async (res) => {
@@ -467,12 +481,13 @@ async function fetchProfileEvaluator(id: string) {
       evaluator.value.isPosmasterAct = data.isPosmasterAct;
       evaluator.value.posmasterAct = data.posmasterAct;
       evaluator.value.org = await findOrgNameHtml(data);
+      isLoadModal.value = false;
     })
     .catch((e) => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoadModal.value = false;
     });
 }
 
@@ -583,19 +598,20 @@ async function uploadFileDoc(uploadUrl: string, file: any) {
 }
 
 /** ดึงข้อมูล */
+const isLoadUpload = ref<boolean>(false);
 async function getData() {
-  showLoader();
+  isLoadUpload.value = true;
   await http
     .get(config.API.file("แบบกำหนดข้อตกลง", "KPI", id.value))
     .then((res) => {
       fileList.value = res.data;
+      isLoadUpload.value = false;
     })
     .catch((e) => {
       messageError($q, e);
+      isLoadUpload.value = false;
     })
-    .finally(() => {
-      hideLoader();
-    });
+    .finally(() => {});
 }
 
 /**
@@ -654,7 +670,6 @@ function onResize(size: { width: any; height: any }) {
 }
 
 onMounted(async () => {
-  showLoader();
   store.isUpdate = false;
   await getAll();
 });
@@ -689,7 +704,8 @@ onMounted(async () => {
         <q-card bordered flat class="relative-position">
           <div class="row justify-center q-pa-md" v-if="!$q.screen.gt.xs">
             <q-avatar :size="sizeImg">
-              <q-img :src="imgProfile" v-if="imgProfile !== ''" />
+              <q-skeleton type="circle" size="100px" v-if="isLoadAvatar" />
+              <q-img :src="imgProfile" v-else-if="imgProfile !== ''" />
               <q-img src="@/assets/avatar_user.jpg" v-else />
             </q-avatar>
           </div>
@@ -699,7 +715,8 @@ onMounted(async () => {
             style="left: 2%; top: 50%; transform: translateY(-50%)"
           >
             <q-avatar :size="sizeImg">
-              <q-img :src="imgProfile" v-if="imgProfile !== ''" />
+              <q-skeleton type="circle" size="100px" v-if="isLoadAvatar" />
+              <q-img :src="imgProfile" v-else-if="imgProfile !== ''" />
               <q-img src="@/assets/avatar_user.jpg" v-else />
             </q-avatar>
           </div>
@@ -1028,7 +1045,7 @@ onMounted(async () => {
         />
         <q-separator />
         <q-card-section>
-          <div class="column q-gutter-sm">
+          <div v-if="!isLoadCommander" class="column q-gutter-sm">
             <div class="row">
               <div class="col-10">
                 <q-select
@@ -1179,6 +1196,18 @@ onMounted(async () => {
               </div>
             </div>
           </div>
+          <div
+            v-else
+            class="row q-col-gutter-xs items-center"
+            v-for="item in 3"
+          >
+            <div class="col-10">
+              <q-skeleton type="QInput" height="40px" />
+            </div>
+            <div class="col-2 q-pa-sm text-right">
+              <q-skeleton type="QRadio" />
+            </div>
+          </div>
         </q-card-section>
         <q-separator />
         <q-card-actions
@@ -1219,23 +1248,42 @@ onMounted(async () => {
               <div class="col-3">ตำแหน่งทางการบริหาร</div>
               <div class="col-3">สังกัด</div>
             </div>
-            <div class="row">
+            <div class="row q-col-gutter-x-sm">
               <div class="col-3">
-                {{ evaluator.position ? evaluator.position : "-" }}
+                <div v-if="!isLoadModal">
+                  {{ evaluator.position ? evaluator.position : "-" }}
+                </div>
+
+                <q-skeleton v-else type="text" />
               </div>
               <div class="col-3">
-                {{ evaluator.posTypeName ? evaluator.posTypeName : "-" }}
-                {{
-                  evaluator.posLevelName ? ` (${evaluator.posLevelName})` : "-"
-                }}
+                <div v-if="!isLoadModal">
+                  {{ evaluator.posTypeName ? evaluator.posTypeName : "-" }}
+                  {{
+                    evaluator.posLevelName
+                      ? ` (${evaluator.posLevelName})`
+                      : "-"
+                  }}
+                </div>
+
+                <q-skeleton v-else type="text" />
               </div>
               <div class="col-3">
-                {{
-                  evaluator.posExecutiveName ? evaluator.posExecutiveName : "-"
-                }}
+                <div v-if="!isLoadModal">
+                  {{
+                    evaluator.posExecutiveName
+                      ? evaluator.posExecutiveName
+                      : "-"
+                  }}
+                </div>
+
+                <q-skeleton v-else type="text" />
               </div>
               <div class="col-3 text-html">
-                {{ evaluator.org ? evaluator.org : "-" }}
+                <div v-if="!isLoadModal">
+                  {{ evaluator.org ? evaluator.org : "-" }}
+                </div>
+                <q-skeleton v-else type="text" />
               </div>
             </div>
 
@@ -1243,9 +1291,12 @@ onMounted(async () => {
               <div class="col-12">รักษาการในตำแหน่ง/การรักษาราชการแทน</div>
             </div>
             <div class="row">
+              <div v-if="isLoadModal" class="col-12">
+                <q-skeleton type="text" />
+              </div>
               <div
                 class="col-12"
-                v-if="evaluator.isPosmasterAct"
+                v-else-if="evaluator.isPosmasterAct"
                 v-for="(data, index) in evaluator.posmasterAct"
                 :key="index"
               >
@@ -1305,7 +1356,11 @@ onMounted(async () => {
             </q-file>
           </div>
 
-          <div v-if="fileList.length > 0" class="col-xs-12 row">
+          <div class="col-12" v-if="isLoadUpload">
+            <q-skeleton height="50px" />
+          </div>
+
+          <div v-else-if="fileList.length > 0" class="col-xs-12 row">
             <q-list class="full-width rounded-borders" bordered separator>
               <q-item
                 clickable
diff --git a/src/modules/08_KPI/views/main.vue b/src/modules/08_KPI/views/main.vue
index 6a62d27..c2c4350 100644
--- a/src/modules/08_KPI/views/main.vue
+++ b/src/modules/08_KPI/views/main.vue
@@ -1,19 +1,19 @@
 <script setup lang="ts">
-import { ref, onMounted, reactive, watch } from "vue";
+import { ref, onMounted, reactive } from "vue";
 import { useRouter } from "vue-router";
 import { useQuasar } from "quasar";
-import type { QTableProps } from "quasar";
 
 import config from "@/app.config";
 import http from "@/plugins/http";
 import { useCounterMixin } from "@/stores/mixin";
 import { useKpiDataStore } from "@/modules/08_KPI/store";
 
+import type { QTableProps } from "quasar";
 import type { DataProfile } from "@/interface/Main";
+import type { PropsTable } from "@/interface/PropsTable";
 import type {
   DataOptions,
   MainListKpi,
-  PaginationType,
 } from "@/modules/08_KPI/interface/index/Main";
 import type {
   RoundKpiResponse,
@@ -30,6 +30,8 @@ const { showLoader, hideLoader, messageError, date2Thai, dialogConfirm } =
   mixin;
 
 /** Table*/
+const isLoadOp = ref<boolean>(false);
+const isLoad = ref<boolean>(false);
 const rows = ref<MainListKpi[]>([]);
 const visibleColumns = ref<string[]>([
   "createdAt",
@@ -104,7 +106,6 @@ const columns = ref<QTableProps["columns"]>([
 /** List*/
 const year = ref<number>(new Date().getFullYear());
 const round = ref<string>("");
-const filterKeyword = ref<string>("");
 const roundMainOp = ref<DataOptions[]>([]);
 const roundDialgOp = ref<DataOptions[]>([]);
 
@@ -139,29 +140,29 @@ const formRound = reactive({
 
 /** pagetion*/
 const formQuery = reactive({
-  page: 1,
-  pageSize: 10,
   status: "",
   results: "",
 });
-const total = ref<number>(0);
-const totalList = ref<number>(1);
+
 const isRoundClose = ref<boolean>(false);
 
-const pagination = ref({
+const pagination = ref<PropsTable.Pagination>({
   sortBy: "desc",
   descending: false,
   page: 1,
   rowsPerPage: 10,
+  rowsNumber: 0,
 });
 
 /**
  * ดึงข้อมูลรอบการประเมิน
  * @param type
  */
+const isLoadDialog = ref<boolean>(false);
 async function fetchRoundOption(type: string) {
   const y = type === "main" ? year.value : yearDialog.value;
-  showLoader();
+  type == "main" && (isLoadOp.value = true);
+  type == "dialog" && (isLoadDialog.value = true);
   await http
     .get(
       config.API.kpiPeriod + `?page=${1}&pageSize=${10}&keyword=${""}&year=${y}`
@@ -196,18 +197,17 @@ async function fetchRoundOption(type: string) {
       messageError($q, err);
     })
     .finally(() => {
-      hideLoader();
+      type == "main" && (isLoadOp.value = false);
+      type == "dialog" && (isLoadDialog.value = false);
     });
 }
 
-/**
- *  fetch รายการขอรับประเมินผลการปฏิบัติราชการระดับบุคคล
- */
+/** ฟังก์ชันดึงข้อมูลรายการขอรับประเมินผลการปฏิบัติราชการระดับบุคคล*/
 async function fetchList() {
-  showLoader();
+  isLoad.value = true;
   let queryParams = {
-    page: formQuery.page,
-    pageSize: formQuery.pageSize,
+    page: pagination.value.page,
+    pageSize: pagination.value.rowsPerPage,
     kpiPeriodId: round.value,
     status: formQuery.status === "" ? undefined : formQuery.status,
     results: formQuery.results === "" ? undefined : formQuery.results,
@@ -219,21 +219,20 @@ async function fetchList() {
     })
     .then(async (res) => {
       const data = await res.data.result;
-      total.value = data.total;
-      totalList.value = Math.ceil(data.total / formQuery.pageSize);
+      pagination.value.rowsNumber = data.total;
       rows.value = data.data;
     })
     .catch((err) => {
       messageError($q, err);
     })
     .finally(() => {
-      hideLoader();
+      isLoad.value = false;
     });
 }
 
 /** เลือกรอบการประเมิน */
 function changRound() {
-  formQuery.page = 1;
+  pagination.value.page = 1;
   fetchList();
 }
 
@@ -327,15 +326,6 @@ function checkClosed() {
   isRoundClose.value = formRound.kpiPeriodId.isClosed;
 }
 
-/**
- * function updatePagination
- * @param newPagination ข้อมูล Pagination ใหม่
- */
-function updatePagination(newPagination: PaginationType) {
-  formQuery.page = 1;
-  formQuery.pageSize = newPagination.rowsPerPage;
-}
-
 /** ดึงข้อมูล option */
 function getOrgOp() {
   http
@@ -415,12 +405,16 @@ function filterOption(val: string, update: Function, refData: string) {
   }
 }
 
-watch(
-  () => formQuery.pageSize,
-  () => {
-    fetchList();
-  }
-);
+/**
+ * ฟังก์ชันรับ request จากตาราง เมื่อมีการเปลี่ยน pagination
+ * @param requestProps ข้อมูลการร้องขอจากตาราง
+ */
+function onTableRequest(requestProps: PropsTable.RequestProps) {
+  const newPagination = requestProps?.pagination || requestProps;
+  if (!newPagination?.page || !newPagination?.rowsPerPage) return;
+  pagination.value = { ...newPagination };
+  fetchList();
+}
 
 onMounted(async () => {
   await Promise.all([fetchRoundOption("main"), getOrgOp()]);
@@ -456,7 +450,7 @@ onMounted(async () => {
                   year-picker
                   :enableTimePicker="false"
                   @update:model-value="
-                    (formQuery.page = 1), fetchRoundOption('main')
+                    (pagination.page = 1), fetchRoundOption('main')
                   "
                 >
                   <template #year="{ year }">{{ year + 543 }}</template>
@@ -520,6 +514,7 @@ onMounted(async () => {
                 <div class="items-center col-12 row q-col-gutter-sm">
                   <div class="col-xs-12 col-md-2">
                     <q-select
+                      v-if="!isLoadOp"
                       v-model="round"
                       outlined
                       label="รอบการประเมิน"
@@ -531,6 +526,7 @@ onMounted(async () => {
                       map-options
                       @update:model-value="changRound"
                     />
+                    <q-skeleton v-else type="QInput" height="40px" bordered />
                   </div>
 
                   <div class="col-xs-12 col-md-3">
@@ -549,7 +545,7 @@ onMounted(async () => {
                       outlined
                       use-input
                       input-debounce="0"
-                      @update:model-value="(formQuery.page = 1), fetchList()"
+                      @update:model-value="(pagination.page = 1), fetchList()"
                       :clearable="formQuery.status !== ''"
                       @clear="
                         (formQuery.status = ''),
@@ -581,7 +577,7 @@ onMounted(async () => {
                       lazy-rules
                       hide-bottom-space
                       outlined
-                      @update:model-value="(formQuery.page = 1), fetchList()"
+                      @update:model-value="(pagination.page = 1), fetchList()"
                       use-input
                       @clear="
                         (formQuery.results = ''),
@@ -610,7 +606,6 @@ onMounted(async () => {
                 ref="table"
                 :columns="columns"
                 :rows="rows"
-                :filter="filterKeyword"
                 row-key="id"
                 flat
                 bordered
@@ -618,8 +613,9 @@ onMounted(async () => {
                 dense
                 :rows-per-page-options="[10, 25, 50, 100]"
                 :visible-columns="visibleColumns"
+                @request="onTableRequest"
                 v-model:pagination="pagination"
-                @update:pagination="updatePagination"
+                :loading="isLoad"
               >
                 <template v-slot:header="props">
                   <q-tr :props="props">
@@ -662,20 +658,6 @@ onMounted(async () => {
                     </q-card>
                   </div>
                 </template>
-                <template v-slot:pagination="scope">
-                  ทั้งหมด {{ total }} รายการ
-                  <q-pagination
-                    v-model="formQuery.page"
-                    active-color="primary"
-                    color="dark"
-                    :max="Number(totalList)"
-                    size="sm"
-                    boundary-links
-                    direction-links
-                    :max-pages="5"
-                    @update:model-value="fetchList"
-                  ></q-pagination>
-                </template>
               </d-table>
             </div>
           </div>
@@ -736,6 +718,7 @@ onMounted(async () => {
 
             <div class="col-12">
               <q-select
+                v-if="!isLoadDialog"
                 :readonly="yearDialog === null"
                 v-model="formRound.kpiPeriodId"
                 outlined
@@ -749,6 +732,7 @@ onMounted(async () => {
                 :rules="[(val:DataOptions) => !!val.id || `${'กรุณาเลือกรอบการประเมิน'}`]"
                 @update:model-value="checkClosed"
               />
+              <q-skeleton type="QInput" height="40px" v-else />
             </div>
 
             <div class="col-12">
diff --git a/src/modules/08_KPI/views/mainEvaluator.vue b/src/modules/08_KPI/views/mainEvaluator.vue
index f74d535..b14600a 100644
--- a/src/modules/08_KPI/views/mainEvaluator.vue
+++ b/src/modules/08_KPI/views/mainEvaluator.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, watch } from "vue";
+import { ref, onMounted } from "vue";
 import { useRouter } from "vue-router";
 import { useQuasar } from "quasar";
 import type { QTableProps } from "quasar";
@@ -9,10 +9,7 @@ import http from "@/plugins/http";
 import { useCounterMixin } from "@/stores/mixin";
 import { useKpiDataStore } from "@/modules/08_KPI/store";
 
-import type {
-  DataOptions,
-  Pagination,
-} from "@/modules/08_KPI/interface/index/Main";
+import type { DataOptions } from "@/modules/08_KPI/interface/index/Main";
 import type {
   ResRound,
   ResEvaluatorAssessor,
@@ -24,7 +21,7 @@ import TabOther from "@/modules/08_KPI/components/Evaluator/02_TabOther.vue";
 const $q = useQuasar();
 const router = useRouter();
 const store = useKpiDataStore();
-const { showLoader, hideLoader, messageError, date2Thai } = useCounterMixin();
+const { messageError, date2Thai } = useCounterMixin();
 
 const dataListMain = ref<ResEvaluatorAssessor[]>([]);
 
@@ -87,14 +84,14 @@ const columns = ref<QTableProps["columns"]>([
 ]);
 
 const totalList = ref<number>(0);
-const maxPage = ref<number>(1);
 
 /**
  * ดึงข้อมูลรายการขอรับประเมินผลการปฏิบัติราชการระดับบุคคล
  * @param type
  */
+const isLoadOp = ref<boolean>(false);
 async function fetchRoundOption() {
-  showLoader();
+  isLoadOp.value = true;
   await http
     .get(
       config.API.kpiPeriod +
@@ -125,13 +122,14 @@ async function fetchRoundOption() {
       messageError($q, err);
     })
     .finally(() => {
-      hideLoader();
+      isLoadOp.value = false;
     });
 }
 
 /** ดึงข้อมูล list */
+const isLoad = ref<boolean>(false);
 async function fetchList() {
-  showLoader();
+  isLoad.value = true;
   const body = {
     page: store.formQuery.page,
     pageSize: store.formQuery.pageSize,
@@ -155,7 +153,6 @@ async function fetchList() {
     .post(config.API.kpiEvaluation + `/admin`, body)
     .then(async (res) => {
       const data = await res.data.result;
-      maxPage.value = Math.ceil(data.total / store.formQuery.pageSize);
       totalList.value = data.total;
       dataListMain.value = data.data;
     })
@@ -163,7 +160,7 @@ async function fetchList() {
       messageError($q, err);
     })
     .finally(() => {
-      hideLoader();
+      isLoad.value = false;
     });
 }
 
@@ -173,15 +170,6 @@ function changRound() {
   fetchList();
 }
 
-/**
- * function updatePagination
- * @param newPagination ข้อมูล Pagination ใหม่
- */
-function updatePagination(newPagination: Pagination) {
-  store.formQuery.page = 1;
-  store.formQuery.pageSize = newPagination.rowsPerPage;
-}
-
 /** เปลี่ยน tab */
 async function onChangTab() {
   store.formQuery.page = 1;
@@ -190,13 +178,6 @@ async function onChangTab() {
   await fetchList();
 }
 
-watch(
-  () => store.formQuery.pageSize,
-  () => {
-    fetchList();
-  }
-);
-
 onMounted(async () => {
   await fetchRoundOption();
 });
@@ -221,7 +202,7 @@ onMounted(async () => {
 
       <div class="col-12">
         <q-card bordered class="q-pa-md">
-          <div class="items-center col-12 row q-col-gutter-sm q-mb-sm">
+          <div class="items-center col-12 row q-gutter-sm q-mb-sm">
             <datepicker
               class="col-md-1 col-xs-12"
               v-model="store.yearRound"
@@ -260,6 +241,7 @@ onMounted(async () => {
               </template>
             </datepicker>
             <q-select
+              v-if="!isLoadOp"
               class="col-md-2 col-xs-12"
               v-model="store.formQuery.round"
               outlined
@@ -272,7 +254,12 @@ onMounted(async () => {
               map-options
               @update:model-value="changRound"
             />
-
+            <q-skeleton
+              v-else
+              class="col-md-2 col-xs-12"
+              type="QInput"
+              height="40px"
+            />
             <q-space />
 
             <q-input
@@ -339,9 +326,8 @@ onMounted(async () => {
                     :rows="dataListMain"
                     :formQuery="store.formQuery"
                     :total="totalList"
-                    :maxPage="maxPage"
-                    :updatePagination="updatePagination"
                     :fetchList="fetchList"
+                    :is-load="isLoad"
                   />
                 </q-tab-panel>
 
@@ -352,9 +338,8 @@ onMounted(async () => {
                     :rows="dataListMain"
                     :formQuery="store.formQuery"
                     :total="totalList"
-                    :maxPage="maxPage"
-                    :updatePagination="updatePagination"
                     :fetchList="fetchList"
+                    :is-load="isLoad"
                   />
                 </q-tab-panel>
 
@@ -365,9 +350,8 @@ onMounted(async () => {
                     :rows="dataListMain"
                     :formQuery="store.formQuery"
                     :total="totalList"
-                    :maxPage="maxPage"
-                    :updatePagination="updatePagination"
                     :fetchList="fetchList"
+                    :is-load="isLoad"
                   />
                 </q-tab-panel>
 
@@ -378,9 +362,8 @@ onMounted(async () => {
                     :rows="dataListMain"
                     :formQuery="store.formQuery"
                     :total="totalList"
-                    :maxPage="maxPage"
-                    :updatePagination="updatePagination"
                     :fetchList="fetchList"
+                    :is-load="isLoad"
                   />
                 </q-tab-panel>
 
@@ -391,9 +374,8 @@ onMounted(async () => {
                     :rows="dataListMain"
                     :formQuery="store.formQuery"
                     :total="totalList"
-                    :maxPage="maxPage"
-                    :updatePagination="updatePagination"
                     :fetchList="fetchList"
+                    :is-load="isLoad"
                   />
                 </q-tab-panel>
               </q-tab-panels>
diff --git a/src/modules/09_scholarship/views/detail.vue b/src/modules/09_scholarship/views/detail.vue
index 4e84434..5456ee0 100644
--- a/src/modules/09_scholarship/views/detail.vue
+++ b/src/modules/09_scholarship/views/detail.vue
@@ -31,6 +31,7 @@ const {
   success,
 } = mixin;
 
+const isLoad = ref<boolean>(false);
 const isGuarantor = ref<boolean>(false);
 const isGov = ref<boolean>(false);
 const isStatus = ref<string>("");
@@ -287,96 +288,6 @@ function changeStartDate(type: string) {
   }
 }
 
-function onOpenReturn() {
-  dialogReturn.value = true;
-}
-
-async function onDownload(type: string) {
-  showLoader();
-  await http
-    .get(config.API.developmentScholarshipReport + `/${id.value}`)
-    .then(async (res) => {
-      const dataList = res.data.result;
-      await genReport(
-        dataList,
-        "ฟอร์มรายงานตัวกลับเข้ารับราชการ(ต้นแบบ)",
-        type
-      );
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-async function clickUpload(file: any) {
-  const fileName = { fileName: file.name };
-
-  dialogConfirm(
-    $q,
-    async () => {
-      const selectedFile = file;
-      const formdata = new FormData();
-      formdata.append("file", selectedFile);
-      await http
-        .post(
-          config.API.developmentSalaryFile(
-            "ระบบพัฒนาบุคคล",
-            "ฟอร์มรายงานตัวกลับเข้ารับราชการ",
-            id.value
-          ),
-          {
-            replace: false,
-            fileList: fileName,
-          }
-        )
-        .then(async (res) => {
-          const foundKey: string | undefined = Object.keys(res.data).find(
-            (key) =>
-              res.data[key]?.fileName !== undefined &&
-              res.data[key]?.fileName !== ""
-          );
-          foundKey &&
-            uploadFileDoc(res.data[foundKey]?.uploadUrl, documentFile.value);
-        })
-        .catch((err) => {
-          messageError($q, err);
-        });
-    },
-    "ยืนยันการอัปโหลดไฟล์",
-    "ต้องการยืนยันการอัปโหลดไฟล์นี้หรือไม่ ?"
-  );
-}
-
-/**
- * ฟังก์ชั่นสำหรับอัปโหลดไฟล์เอกสารหลักฐาน
- */
-async function uploadFileDoc(uploadUrl: string, file: any) {
-  const Data = new FormData();
-  Data.append("file", documentFile.value);
-  showLoader();
-  await axios
-    .put(uploadUrl, file, {
-      headers: {
-        "Content-Type": file.type,
-      },
-    })
-    .then((res) => {
-      success($q, "อัปโหลดไฟล์สำเร็จ");
-      fetchDataDetail(id.value);
-      getFile();
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-      documentFile.value = null;
-    });
-}
-
 function getFile() {
   http
     .get(
@@ -418,11 +329,13 @@ function downloadFile(file: any) {
 }
 
 function fetchDataDetail(id: string) {
-  showLoader();
+  isLoad.value = true;
   http
     .get(config.API.developmentScholarship + `/${id}`)
     .then((res) => {
       const data: DataSholarship = res.data.result;
+      isGov.value = data.citizenId ? true : false;
+
       formBody.rank = data.rank;
       formBody.prefix = data.prefix;
       formBody.firstName = data.firstName;
@@ -508,14 +421,14 @@ function fetchDataDetail(id: string) {
         : "-";
       dataGuarantor.org = data.guarantorOrg ? data.guarantorOrg : "-";
       isStatus.value = data.status;
-      isGov.value = data.citizenId ? true : false;
       isGuarantor.value = data.guarantorCitizenId ? true : false;
+      isLoad.value = false;
     })
     .catch((err) => {
       messageError($q, err);
     })
     .finally(() => {
-      hideLoader();
+      isLoad.value = false;
     });
 }
 
@@ -543,11 +456,11 @@ onMounted(async () => {
       </div>
 
       <q-card flat bordered class="col-12 q-pa-md">
-        <q-toolbar class="q-px-none q-pb-sm">
+        <q-toolbar class="q-px-none q-pb-sm" v-if="fileList">
           <div class="row q-col-gutter-x-sm full-width">
             <q-space />
 
-            <div v-if="fileList" class="col-2 text-right">
+            <div class="col-2 text-right">
               <q-btn
                 size="12px"
                 flat
@@ -568,54 +481,71 @@ onMounted(async () => {
             ข้อมูลราชการ
           </div>
           <div class="col-12"><q-separator /></div>
-          <div class="row col-12 q-col-gutter-md q-pa-md" v-if="isGov">
+          <div class="row col-12 q-col-gutter-md q-pa-md">
             <div class="col-xs-12 col-md-6">
               <div class="row q-col-gutter-md">
                 <div class="col-4 text-grey">เลขประจำตัวประชาชน</div>
-                <div class="col-8 text-weight-medium">
+                <div v-if="!isLoad" class="col-8 text-weight-medium">
                   {{ dataPerson.citizenId ? dataPerson.citizenId : "-" }}
                 </div>
+                <div v-else class="col-8">
+                  <q-skeleton type="text" />
+                </div>
                 <div class="col-4 text-grey">ชื่อ-นามสกุล</div>
-                <div class="col-8 text-weight-medium">
+                <div v-if="!isLoad" class="col-8 text-weight-medium">
                   {{ dataPerson.firstName ? dataPerson.name : "-" }}
                 </div>
+                <div v-else class="col-8">
+                  <q-skeleton type="text" />
+                </div>
                 <div class="col-4 text-grey">ตำแหน่งในสายงาน</div>
-                <div class="col-8 text-weight-medium">
+                <div v-if="!isLoad" class="col-8 text-weight-medium">
                   {{ dataPerson.position ? dataPerson.position : "-" }}
                 </div>
+                <div v-else class="col-8">
+                  <q-skeleton type="text" />
+                </div>
                 <div class="col-4 text-grey">ตำแหน่งประเภท</div>
-                <div class="col-8 text-weight-medium">
+                <div v-if="!isLoad" class="col-8 text-weight-medium">
                   {{ dataPerson.type ? dataPerson.type : "-" }}
                 </div>
+                <div v-else class="col-8">
+                  <q-skeleton type="text" />
+                </div>
               </div>
             </div>
             <div class="col-xs-12 col-md-6">
               <div class="row q-col-gutter-md">
                 <div class="col-4 text-grey">ระดับ</div>
-                <div class="col-8 text-weight-medium">
+                <div v-if="!isLoad" class="col-8 text-weight-medium">
                   {{ dataPerson.level ? dataPerson.level : "-" }}
                 </div>
+                <div v-else class="col-8">
+                  <q-skeleton type="text" />
+                </div>
                 <div class="col-4 text-grey">ตำแหน่งทางการบริหาร</div>
-                <div class="col-8 text-weight-medium">
+                <div v-if="!isLoad" class="col-8 text-weight-medium">
                   {{ dataPerson.positionSide ? dataPerson.positionSide : "-" }}
                 </div>
+                <div v-else class="col-8">
+                  <q-skeleton type="text" />
+                </div>
                 <div class="col-4 text-grey">หน่วยงานที่สังกัด</div>
-                <div class="col-8 text-weight-medium text-html">
+                <div v-if="!isLoad" class="col-8 text-weight-medium text-html">
                   {{ dataPerson.org ? dataPerson.org : "-" }}
                 </div>
+                <div v-else class="col-8">
+                  <q-skeleton type="text" />
+                </div>
               </div>
             </div>
           </div>
-          <div class="row col-12 q-pa-md" v-else>
-            <q-banner class="bg-grey-3 text-black col-12 text-center">
-              เลือกข้าราชการ
-            </q-banner>
-          </div>
         </q-card>
 
         <div class="row q-col-gutter-md q-mt-sm">
           <div class="col-12 col-md-9">
             <q-select
+              v-if="!isLoad"
               class="inputgreen"
               readonly
               dense
@@ -634,6 +564,7 @@ onMounted(async () => {
                   !!val || `${'กรุณาเลือกประเภททุน'}`,
               ]"
             />
+            <q-skeleton v-else type="QInput" height="40px" />
           </div>
           <div
             class="col-12 col-md-3"
@@ -643,6 +574,7 @@ onMounted(async () => {
             "
           >
             <q-select
+              v-if="!isLoad"
               readonly
               dense
               outlined
@@ -661,9 +593,10 @@ onMounted(async () => {
                   !!val || `${'กรุณาเลือกประเภททุน'}`,
               ]"
             />
+            <q-skeleton v-else type="QInput" height="40px" />
           </div>
 
-          <div class="col-12">
+          <div v-if="!isLoad" class="col-12">
             <q-radio
               disable
               v-model="formBody.planType"
@@ -684,11 +617,18 @@ onMounted(async () => {
               class="q-pl-sm"
             />
           </div>
+          <div v-else class="col-12">
+            <div class="row q-gutter-sm">
+              <q-skeleton width="90px" />
+              <q-skeleton width="90px" />
+            </div>
+          </div>
 
           <div class="col-12">
             <div class="row q-col-gutter-md">
               <div class="col-12 col-md-3">
                 <datepicker
+                  v-if="!isLoad"
                   v-model="formBody.scholarshipYear"
                   :locale="'th'"
                   autoApply
@@ -733,9 +673,11 @@ onMounted(async () => {
                     </q-input>
                   </template>
                 </datepicker>
+                <q-skeleton v-else type="QInput" height="40px" />
               </div>
               <div class="col-12 col-md-3">
                 <q-select
+                  v-if="!isLoad"
                   readonly
                   dense
                   outlined
@@ -758,12 +700,14 @@ onMounted(async () => {
                     },
                   ]"
                 />
+                <q-skeleton v-else type="QInput" height="40px" />
               </div>
               <div
                 class="col-12 col-md-3"
                 v-if="formBody.budgetSource == 'OTHER'"
               >
                 <q-input
+                  v-if="!isLoad"
                   readonly
                   dense
                   outlined
@@ -777,9 +721,11 @@ onMounted(async () => {
                     !!val || `${'กรุณากรอกเงินอื่นๆ โปรดระบุ'}`,
                 ]"
                 />
+                <q-skeleton v-else type="QInput" height="40px" />
               </div>
               <div class="col-12 col-md-3">
                 <q-input
+                  v-if="!isLoad"
                   readonly
                   dense
                   outlined
@@ -798,6 +744,7 @@ onMounted(async () => {
                     },
                   ]"
                 />
+                <q-skeleton v-else type="QInput" height="40px" />
               </div>
             </div>
           </div>
@@ -806,6 +753,7 @@ onMounted(async () => {
             <div class="row q-col-gutter-md">
               <div class="col-12 col-md-3">
                 <q-input
+                  v-if="!isLoad"
                   readonly
                   dense
                   outlined
@@ -818,9 +766,11 @@ onMounted(async () => {
                     !!val || `${'กรุณากรอกเลขที่หนังสืออนุมัติ'}`,
                 ]"
                 />
+                <q-skeleton v-else type="QInput" height="40px" />
               </div>
               <div class="col-12 col-md-3">
                 <datepicker
+                  v-if="!isLoad"
                   v-model="formBody.bookNoDate"
                   :locale="'th'"
                   autoApply
@@ -860,9 +810,11 @@ onMounted(async () => {
                     </q-input>
                   </template>
                 </datepicker>
+                <q-skeleton v-else type="QInput" height="40px" />
               </div>
               <div class="col-12 col-md-3">
                 <datepicker
+                  v-if="!isLoad"
                   v-model="formBody.bookApproveDate"
                   :locale="'th'"
                   autoApply
@@ -902,6 +854,7 @@ onMounted(async () => {
                     </q-input>
                   </template>
                 </datepicker>
+                <q-skeleton v-else type="QInput" height="40px" />
               </div>
               <div
                 v-if="
@@ -911,6 +864,7 @@ onMounted(async () => {
                 class="col-12 col-md-2"
               >
                 <q-select
+                  v-if="!isLoad"
                   outlined
                   dense
                   label="เวลาราชการ"
@@ -924,15 +878,18 @@ onMounted(async () => {
                   map-options
                 >
                 </q-select>
+                <q-skeleton v-else type="QInput" height="40px" />
               </div>
               <div class="col-12 col-md-2">
                 <q-checkbox
+                  v-if="!isLoad"
                   disable
                   keep-color
                   color="primary"
                   v-model="formBody.isNoUseBudget"
                   label="ไม่ใช้งบประมาณ"
                 />
+                <q-skeleton v-else width="90px" />
               </div>
             </div>
           </div>
@@ -941,6 +898,7 @@ onMounted(async () => {
             <div class="row col-12 q-col-gutter-md">
               <div class="col-12 col-md-3">
                 <q-input
+                  v-if="!isLoad"
                   readonly
                   dense
                   outlined
@@ -954,9 +912,11 @@ onMounted(async () => {
                       !!val || `${'กรุณากรอกเลขที่สัญญา'}`,
                   ]"
                 />
+                <q-skeleton v-else type="QInput" height="40px" />
               </div>
               <div class="col-12 col-md-3">
                 <datepicker
+                  v-if="!isLoad"
                   v-model="formBody.contractDate"
                   :locale="'th'"
                   autoApply
@@ -996,12 +956,14 @@ onMounted(async () => {
                     </q-input>
                   </template>
                 </datepicker>
+                <q-skeleton v-else type="QInput" height="40px" />
               </div>
 
               <div class="col-12">
                 <div class="row q-col-gutter-md">
                   <div class="col-12 col-md-3">
                     <q-input
+                      v-if="!isLoad"
                       dense
                       readonly
                       outlined
@@ -1011,9 +973,11 @@ onMounted(async () => {
                       v-model="formBody.reportBackNo"
                       label="เลขที่หนังสือรายงานตัวกลับ"
                     />
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
                   <div class="col-12 col-md-3">
                     <datepicker
+                      v-if="!isLoad"
                       v-model="formBody.reportBackNoDate"
                       :locale="'th'"
                       autoApply
@@ -1049,9 +1013,11 @@ onMounted(async () => {
                         </q-input>
                       </template>
                     </datepicker>
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
                   <div class="col-12 col-md-3">
                     <datepicker
+                      v-if="!isLoad"
                       v-model="formBody.reportBackDate"
                       :locale="'th'"
                       autoApply
@@ -1087,6 +1053,7 @@ onMounted(async () => {
                         </q-input>
                       </template>
                     </datepicker>
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
                 </div>
               </div>
@@ -1113,6 +1080,7 @@ onMounted(async () => {
                       ]"
                     /> -->
                     <q-select
+                      v-if="!isLoad"
                       dense
                       outlined
                       readonly
@@ -1132,9 +1100,11 @@ onMounted(async () => {
                       !!val || `${'กรุณากรอกระดับปริญญา'}`,
                   ]"
                     />
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
                   <div class="col-12 col-md-3">
                     <q-input
+                      v-if="!isLoad"
                       readonly
                       dense
                       outlined
@@ -1148,9 +1118,11 @@ onMounted(async () => {
                           !!val || `${'กรุณากรอกหลักสูตรการศึกษา'}`,
                       ]"
                     />
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
                   <div class="col-12 col-md-3">
                     <q-input
+                      v-if="!isLoad"
                       readonly
                       dense
                       outlined
@@ -1164,9 +1136,11 @@ onMounted(async () => {
                           !!val || `${'กรุณากรอกสาขาวิชา'}`,
                       ]"
                     />
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
                   <div class="col-12 col-md-3">
                     <q-input
+                      v-if="!isLoad"
                       dense
                       readonly
                       outlined
@@ -1180,9 +1154,11 @@ onMounted(async () => {
                           !!val || `${'กรุณากรอกคณะ'}`,
                       ]"
                     />
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
                   <div class="col-12 col-md-3">
                     <q-input
+                      v-if="!isLoad"
                       dense
                       readonly
                       outlined
@@ -1196,9 +1172,11 @@ onMounted(async () => {
                           !!val || `${'กรุณากรอกสถาบันการศึกษา'}`,
                       ]"
                     />
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
                   <div class="col-12 col-md-3">
                     <datepicker
+                      v-if="!isLoad"
                       v-model="formBody.startDate"
                       :locale="'th'"
                       autoApply
@@ -1240,9 +1218,11 @@ onMounted(async () => {
                         </q-input>
                       </template>
                     </datepicker>
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
                   <div class="col-12 col-md-3">
                     <datepicker
+                      v-if="!isLoad"
                       v-model="formBody.endDate"
                       :locale="'th'"
                       autoApply
@@ -1287,9 +1267,11 @@ onMounted(async () => {
                         </q-input>
                       </template>
                     </datepicker>
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
                   <div class="col-12 col-md-3">
                     <q-input
+                      v-if="!isLoad"
                       dense
                       outlined
                       readonly
@@ -1299,9 +1281,11 @@ onMounted(async () => {
                       class="inputgreen"
                       v-model="formBody.totalPeriod"
                     />
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
                   <div class="col-12 col-md-6">
                     <q-input
+                      v-if="!isLoad"
                       dense
                       outlined
                       readonly
@@ -1311,9 +1295,11 @@ onMounted(async () => {
                       class="inputgreen"
                       v-model="formBody.studyPlace"
                     />
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
                   <div class="col-12 col-md-6">
                     <q-input
+                      v-if="!isLoad"
                       dense
                       outlined
                       readonly
@@ -1323,9 +1309,11 @@ onMounted(async () => {
                       class="inputgreen"
                       v-model="formBody.studyTopic"
                     />
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
                   <div class="col-12 col-md-3">
                     <datepicker
+                      v-if="!isLoad"
                       v-model="formBody.studyStartDate"
                       :locale="'th'"
                       autoApply
@@ -1363,9 +1351,11 @@ onMounted(async () => {
                         </q-input>
                       </template>
                     </datepicker>
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
                   <div class="col-12 col-md-3">
                     <datepicker
+                      v-if="!isLoad"
                       v-model="formBody.studyEndDate"
                       :locale="'th'"
                       readonly
@@ -1403,10 +1393,12 @@ onMounted(async () => {
                         </q-input>
                       </template>
                     </datepicker>
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
                   <div class="col-md-6" v-if="$q.screen.gt.sm"></div>
                   <div class="col-12 col-md-6">
                     <q-input
+                      v-if="!isLoad"
                       dense
                       readonly
                       outlined
@@ -1416,9 +1408,11 @@ onMounted(async () => {
                       class="inputgreen"
                       v-model="formBody.studyCountry"
                     />
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
                   <div class="col-12 col-md-6">
                     <q-input
+                      v-if="!isLoad"
                       dense
                       readonly
                       outlined
@@ -1428,9 +1422,11 @@ onMounted(async () => {
                       class="inputgreen"
                       v-model="formBody.studyAbroadTopic"
                     />
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
                   <div class="col-12 col-md-3">
                     <datepicker
+                      v-if="!isLoad"
                       v-model="formBody.studyAbroadStartDate"
                       :locale="'th'"
                       autoApply
@@ -1470,9 +1466,11 @@ onMounted(async () => {
                         </q-input>
                       </template>
                     </datepicker>
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
                   <div class="col-12 col-md-3">
                     <datepicker
+                      v-if="!isLoad"
                       v-model="formBody.studyAbroadEndDate"
                       :locale="'th'"
                       autoApply
@@ -1516,6 +1514,7 @@ onMounted(async () => {
                         </q-input>
                       </template>
                     </datepicker>
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
                 </div>
               </div>
@@ -1528,6 +1527,7 @@ onMounted(async () => {
                 <div class="row q-col-gutter-md">
                   <div class="col-12 col-md-6">
                     <q-input
+                      v-if="!isLoad"
                       dense
                       outlined
                       readonly
@@ -1541,9 +1541,11 @@ onMounted(async () => {
                           !!val || `กรุณากรอกหลักสูตรการฝึกอบรม`,
                       ]"
                     />
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
                   <div class="col-12 col-md-6">
                     <q-input
+                      v-if="!isLoad"
                       dense
                       outlined
                       lazy-rules
@@ -1557,9 +1559,11 @@ onMounted(async () => {
                           !!val || `${'กรุณากรอกสาขา'}`,
                       ]"
                     />
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
                   <div class="col-12 col-md-3">
                     <q-input
+                      v-if="!isLoad"
                       dense
                       outlined
                       readonly
@@ -1573,9 +1577,11 @@ onMounted(async () => {
                           !!val || `${'กรุณากรอกสถาบันการศึกษา/หน่วยงานผู้จัดการฝึกอบรม'}`,
                       ]"
                     />
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
                   <div class="col-12 col-md-3">
                     <datepicker
+                      v-if="!isLoad"
                       v-model="formBody.startDate"
                       :locale="'th'"
                       autoApply
@@ -1617,9 +1623,11 @@ onMounted(async () => {
                         </q-input>
                       </template>
                     </datepicker>
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
                   <div class="col-12 col-md-3">
                     <datepicker
+                      v-if="!isLoad"
                       v-model="formBody.endDate"
                       :locale="'th'"
                       readonly
@@ -1664,9 +1672,11 @@ onMounted(async () => {
                         </q-input>
                       </template>
                     </datepicker>
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
                   <div class="col-12 col-md-3">
                     <q-input
+                      v-if="!isLoad"
                       dense
                       outlined
                       lazy-rules
@@ -1676,9 +1686,11 @@ onMounted(async () => {
                       class="inputgreen"
                       v-model="formBody.totalPeriod"
                     />
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
                   <div class="col-12 col-md-6">
                     <q-input
+                      v-if="!isLoad"
                       dense
                       outlined
                       lazy-rules
@@ -1688,9 +1700,11 @@ onMounted(async () => {
                       class="inputgreen"
                       v-model="formBody.studyPlace"
                     />
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
                   <div class="col-12 col-md-6">
                     <q-input
+                      v-if="!isLoad"
                       dense
                       outlined
                       readonly
@@ -1700,9 +1714,11 @@ onMounted(async () => {
                       class="inputgreen"
                       v-model="formBody.studyTopic"
                     />
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
                   <div class="col-12 col-md-3">
                     <datepicker
+                      v-if="!isLoad"
                       v-model="formBody.studyStartDate"
                       :locale="'th'"
                       readonly
@@ -1740,9 +1756,11 @@ onMounted(async () => {
                         </q-input>
                       </template>
                     </datepicker>
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
                   <div class="col-12 col-md-3">
                     <datepicker
+                      v-if="!isLoad"
                       v-model="formBody.studyEndDate"
                       :locale="'th'"
                       autoApply
@@ -1780,6 +1798,7 @@ onMounted(async () => {
                         </q-input>
                       </template>
                     </datepicker>
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
                 </div>
               </div>
@@ -1792,6 +1811,7 @@ onMounted(async () => {
                 <div class="row q-col-gutter-md">
                   <div class="col-12 col-md-6">
                     <q-input
+                      v-if="!isLoad"
                       dense
                       outlined
                       readonly
@@ -1805,9 +1825,11 @@ onMounted(async () => {
                           !!val || `${'กรุณากรอกหลักสูตรการฝึกอบรม'}`,
                       ]"
                     />
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
                   <div class="col-12 col-md-6">
                     <q-input
+                      v-if="!isLoad"
                       dense
                       outlined
                       lazy-rules
@@ -1821,9 +1843,11 @@ onMounted(async () => {
                           !!val || `${'กรุณากรอกสาขา'}`,
                       ]"
                     />
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
                   <div class="col-12 col-md-3">
                     <q-input
+                      v-if="!isLoad"
                       dense
                       outlined
                       lazy-rules
@@ -1837,9 +1861,11 @@ onMounted(async () => {
                           !!val || `${'กรุณากรอกสถาบันการศึกษา/หน่วยงานผู้จัดการฝึกอบรม'}`,
                       ]"
                     />
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
                   <div class="col-12 col-md-3">
                     <datepicker
+                      v-if="!isLoad"
                       v-model="formBody.startDate"
                       :locale="'th'"
                       readonly
@@ -1881,9 +1907,11 @@ onMounted(async () => {
                         </q-input>
                       </template>
                     </datepicker>
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
                   <div class="col-12 col-md-3">
                     <datepicker
+                      v-if="!isLoad"
                       v-model="formBody.endDate"
                       :locale="'th'"
                       autoApply
@@ -1928,9 +1956,11 @@ onMounted(async () => {
                         </q-input>
                       </template>
                     </datepicker>
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
                   <div class="col-12 col-md-3">
                     <q-input
+                      v-if="!isLoad"
                       dense
                       outlined
                       readonly
@@ -1940,9 +1970,11 @@ onMounted(async () => {
                       class="inputgreen"
                       v-model="formBody.totalPeriod"
                     />
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
                   <div class="col-6">
                     <q-input
+                      v-if="!isLoad"
                       dense
                       outlined
                       readonly
@@ -1952,9 +1984,11 @@ onMounted(async () => {
                       class="inputgreen"
                       v-model="formBody.studyPlace"
                     />
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
                   <div class="col-6">
                     <q-input
+                      v-if="!isLoad"
                       dense
                       outlined
                       lazy-rules
@@ -1964,9 +1998,11 @@ onMounted(async () => {
                       class="inputgreen"
                       v-model="formBody.studyTopic"
                     />
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
                   <div class="col-12 col-md-3">
                     <datepicker
+                      v-if="!isLoad"
                       v-model="formBody.studyStartDate"
                       :locale="'th'"
                       readonly
@@ -2004,9 +2040,11 @@ onMounted(async () => {
                         </q-input>
                       </template>
                     </datepicker>
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
                   <div class="col-12 col-md-3">
                     <datepicker
+                      v-if="!isLoad"
                       v-model="formBody.studyEndDate"
                       readonly
                       :locale="'th'"
@@ -2051,10 +2089,12 @@ onMounted(async () => {
                         </q-input>
                       </template>
                     </datepicker>
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
                   <div class="col-md-6" v-if="$q.screen.gt.sm"></div>
                   <div class="col-12 col-md-6">
                     <q-input
+                      v-if="!isLoad"
                       dense
                       outlined
                       readonly
@@ -2064,9 +2104,11 @@ onMounted(async () => {
                       class="inputgreen"
                       v-model="formBody.studyCountry"
                     />
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
                   <div class="col-12 col-md-6">
                     <q-input
+                      v-if="!isLoad"
                       dense
                       outlined
                       readonly
@@ -2076,9 +2118,11 @@ onMounted(async () => {
                       class="inputgreen"
                       v-model="formBody.studyAbroadTopic"
                     />
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
                   <div class="col-12 col-md-3">
                     <datepicker
+                      v-if="!isLoad"
                       v-model="formBody.studyAbroadStartDate"
                       :locale="'th'"
                       autoApply
@@ -2118,9 +2162,11 @@ onMounted(async () => {
                         </q-input>
                       </template>
                     </datepicker>
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
                   <div class="col-12 col-md-3">
                     <datepicker
+                      v-if="!isLoad"
                       v-model="formBody.studyAbroadEndDate"
                       :locale="'th'"
                       autoApply
@@ -2158,6 +2204,7 @@ onMounted(async () => {
                         </q-input>
                       </template>
                     </datepicker>
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
                 </div>
               </div>
@@ -2214,6 +2261,7 @@ onMounted(async () => {
                       ]"
                     /> -->
                     <q-select
+                      v-if="!isLoad"
                       dense
                       outlined
                       readonly
@@ -2233,10 +2281,12 @@ onMounted(async () => {
                       !!val || `${'กรุณากรอกระดับปริญญา'}`,
                   ]"
                     />
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
 
                   <div class="col-12 col-md-3">
                     <q-input
+                      v-if="!isLoad"
                       dense
                       outlined
                       lazy-rules
@@ -2256,6 +2306,7 @@ onMounted(async () => {
                           : 'หลักสูตรการฝึกอบรม'}`,
                   ]"
                     />
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
 
                   <div
@@ -2263,6 +2314,7 @@ onMounted(async () => {
                     v-if="formBody.scholarshipType !== 'TRAINING'"
                   >
                     <q-input
+                      v-if="!isLoad"
                       dense
                       outlined
                       lazy-rules
@@ -2276,6 +2328,7 @@ onMounted(async () => {
                           !!val || `${'กรุณากรอกสาขาวิชา'}`,
                       ]"
                     />
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
 
                   <div
@@ -2283,6 +2336,7 @@ onMounted(async () => {
                     v-if="formBody.scholarshipType !== 'TRAINING'"
                   >
                     <q-input
+                      v-if="!isLoad"
                       dense
                       outlined
                       lazy-rules
@@ -2296,10 +2350,12 @@ onMounted(async () => {
                           !!val || `${'กรุณากรอกคณะ'}`,
                       ]"
                     />
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
 
                   <div class="col-12 col-md-6">
                     <q-input
+                      v-if="!isLoad"
                       dense
                       outlined
                       readonly
@@ -2317,10 +2373,12 @@ onMounted(async () => {
                           !!val || `กรุณากรอก${formBody.scholarshipType === 'STUDY' ? 'สถาบันการศึกษา':'หน่วยงานผู้จัด'}`,
                       ]"
                     />
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
 
                   <div class="col-12 col-md-3">
                     <datepicker
+                      v-if="!isLoad"
                       v-model="formBody.startDate"
                       :locale="'th'"
                       autoApply
@@ -2366,9 +2424,11 @@ onMounted(async () => {
                         </q-input>
                       </template>
                     </datepicker>
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
                   <div class="col-12 col-md-3">
                     <datepicker
+                      v-if="!isLoad"
                       v-model="formBody.endDate"
                       :locale="'th'"
                       autoApply
@@ -2414,9 +2474,11 @@ onMounted(async () => {
                         </q-input>
                       </template>
                     </datepicker>
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
                   <div class="col-12 col-md-6">
                     <q-input
+                      v-if="!isLoad"
                       dense
                       outlined
                       lazy-rules
@@ -2434,6 +2496,7 @@ onMounted(async () => {
                           !!val || `กรุณากรอก${formBody.scholarshipType === 'STUDY' ? 'สถานที่ไปศึกษา (เมือง/ประเทศ)':'สถานที่เข้ารับการฝึกอบรม (เมือง/ประเทศ)'}`,
                       ]"
                     />
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
 
                   <div
@@ -2441,6 +2504,7 @@ onMounted(async () => {
                     class="col-12 col-md-3"
                   >
                     <q-input
+                      v-if="!isLoad"
                       dense
                       readonly
                       outlined
@@ -2454,10 +2518,12 @@ onMounted(async () => {
                           !!val || `${'กรุณากรอประเทศที่ไปดูงาน'}`,
                       ]"
                     />
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
 
                   <div class="col-12 col-md-3">
                     <datepicker
+                      v-if="!isLoad"
                       v-model="formBody.studyAbroadStartDate"
                       :locale="'th'"
                       autoApply
@@ -2501,9 +2567,11 @@ onMounted(async () => {
                         </q-input>
                       </template>
                     </datepicker>
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
                   <div class="col-12 col-md-3">
                     <datepicker
+                      v-if="!isLoad"
                       v-model="formBody.studyAbroadEndDate"
                       :locale="'th'"
                       autoApply
@@ -2551,9 +2619,11 @@ onMounted(async () => {
                         </q-input>
                       </template>
                     </datepicker>
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
                   <div class="col-12 col-md-3">
                     <q-input
+                      v-if="!isLoad"
                       dense
                       outlined
                       lazy-rules
@@ -2567,6 +2637,7 @@ onMounted(async () => {
                           !!val || `${'กรุณากรอกรวมระยะเวลาทั้งสิ้น'}`,
                       ]"
                     />
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
                 </div>
               </div>
@@ -2581,6 +2652,7 @@ onMounted(async () => {
             <div class="row q-col-gutter-md">
               <div class="col-12 col-md-6">
                 <q-input
+                  v-if="!isLoad"
                   dense
                   outlined
                   lazy-rules
@@ -2594,9 +2666,11 @@ onMounted(async () => {
                       !!val || `${'กรุณากรอกหลักสูตรการฝึกอบรม'}`,
                   ]"
                 />
+                <q-skeleton v-else type="QInput" height="40px" />
               </div>
               <div class="col-12 col-md-6">
                 <q-input
+                  v-if="!isLoad"
                   dense
                   outlined
                   lazy-rules
@@ -2610,9 +2684,11 @@ onMounted(async () => {
                       !!val || `${'กรุณากรอกสถาบันการศึกษา/หน่วยงานผู้จัดการฝึกอบรม'}`,
                   ]"
                 />
+                <q-skeleton v-else type="QInput" height="40px" />
               </div>
               <div class="col-12 col-md-3">
                 <datepicker
+                  v-if="!isLoad"
                   v-model="formBody.startDate"
                   :locale="'th'"
                   autoApply
@@ -2655,9 +2731,11 @@ onMounted(async () => {
                     </q-input>
                   </template>
                 </datepicker>
+                <q-skeleton v-else type="QInput" height="40px" />
               </div>
               <div class="col-12 col-md-3">
                 <datepicker
+                  v-if="!isLoad"
                   v-model="formBody.endDate"
                   :locale="'th'"
                   readonly
@@ -2697,10 +2775,12 @@ onMounted(async () => {
                     </q-input>
                   </template>
                 </datepicker>
+                <q-skeleton v-else type="QInput" height="40px" />
               </div>
               <div class="col-md-6" v-if="$q.screen.gt.sm"></div>
               <div class="col-12 col-md-6">
                 <q-input
+                  v-if="!isLoad"
                   dense
                   outlined
                   lazy-rules
@@ -2710,9 +2790,11 @@ onMounted(async () => {
                   class="inputgreen"
                   v-model="formBody.studyPlace"
                 />
+                <q-skeleton v-else type="QInput" height="40px" />
               </div>
               <div class="col-12 col-md-6">
                 <q-input
+                  v-if="!isLoad"
                   dense
                   outlined
                   readonly
@@ -2722,9 +2804,11 @@ onMounted(async () => {
                   class="inputgreen"
                   v-model="formBody.studyTopic"
                 />
+                <q-skeleton v-else type="QInput" height="40px" />
               </div>
               <div class="col-12 col-md-3">
                 <datepicker
+                  v-if="!isLoad"
                   v-model="formBody.studyStartDate"
                   :locale="'th'"
                   readonly
@@ -2767,9 +2851,11 @@ onMounted(async () => {
                     </q-input>
                   </template>
                 </datepicker>
+                <q-skeleton v-else type="QInput" height="40px" />
               </div>
               <div class="col-12 col-md-3">
                 <datepicker
+                  v-if="!isLoad"
                   v-model="formBody.studyEndDate"
                   :locale="'th'"
                   autoApply
@@ -2813,9 +2899,11 @@ onMounted(async () => {
                     </q-input>
                   </template>
                 </datepicker>
+                <q-skeleton v-else type="QInput" height="40px" />
               </div>
               <div class="col-12 col-md-3">
                 <q-input
+                  v-if="!isLoad"
                   dense
                   outlined
                   lazy-rules
@@ -2825,10 +2913,12 @@ onMounted(async () => {
                   class="inputgreen"
                   v-model="formBody.totalPeriod"
                 />
+                <q-skeleton v-else type="QInput" height="40px" />
               </div>
               <div class="col-md-3" v-if="$q.screen.gt.sm"></div>
               <div class="col-12 col-md-6">
                 <q-input
+                  v-if="!isLoad"
                   dense
                   outlined
                   lazy-rules
@@ -2838,9 +2928,11 @@ onMounted(async () => {
                   class="inputgreen"
                   v-model="formBody.studyCountry"
                 />
+                <q-skeleton v-else type="QInput" height="40px" />
               </div>
               <div class="col-12 col-md-6">
                 <q-input
+                  v-if="!isLoad"
                   dense
                   outlined
                   lazy-rules
@@ -2850,9 +2942,11 @@ onMounted(async () => {
                   class="inputgreen"
                   v-model="formBody.studyAbroadTopic"
                 />
+                <q-skeleton v-else type="QInput" height="40px" />
               </div>
               <div class="col-12 col-md-3">
                 <datepicker
+                  v-if="!isLoad"
                   v-model="formBody.studyAbroadStartDate"
                   :locale="'th'"
                   autoApply
@@ -2890,9 +2984,11 @@ onMounted(async () => {
                     </q-input>
                   </template>
                 </datepicker>
+                <q-skeleton v-else type="QInput" height="40px" />
               </div>
               <div class="col-12 col-md-3">
                 <datepicker
+                  v-if="!isLoad"
                   v-model="formBody.studyAbroadEndDate"
                   :locale="'th'"
                   autoApply
@@ -2930,12 +3026,14 @@ onMounted(async () => {
                     </q-input>
                   </template>
                 </datepicker>
+                <q-skeleton v-else type="QInput" height="40px" />
               </div>
             </div>
           </div>
 
           <div class="col-12">
             <q-input
+              v-if="!isLoad"
               readonly
               outlined
               dense
@@ -2946,10 +3044,14 @@ onMounted(async () => {
               hide-bottom-space
               type="textarea"
             />
+            <q-skeleton v-else type="QInput" height="40px" />
           </div>
 
           <!-- ผู้ค้ำประกัน -->
-          <div class="col-12" v-if="formBody.scholarshipType !== 'EXECUTIVE'">
+          <div
+            class="col-12"
+            v-if="formBody.scholarshipType !== 'EXECUTIVE' && isGuarantor"
+          >
             <q-card bordered tyle="border: 1px solid #d6dee1">
               <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
                 ข้อมูลผู้ค้ำประกัน
@@ -2962,37 +3064,61 @@ onMounted(async () => {
                 <div class="col">
                   <div class="row q-col-gutter-md">
                     <div class="col-4 text-grey">เลขประจำตัวประชาชน</div>
-                    <div class="col-8 text-weight-medium">
+                    <div v-if="!isLoad" class="col-8 text-weight-medium">
                       {{ dataGuarantor.citizenId }}
                     </div>
+                    <div v-else class="col-8">
+                      <q-skeleton type="text" />
+                    </div>
                     <div class="col-4 text-grey">ชื่อ-นามสกุล</div>
-                    <div class="col-8 text-weight-medium">
+                    <div v-if="!isLoad" class="col-8 text-weight-medium">
                       {{ dataGuarantor.name }}
                     </div>
+                    <div v-else class="col-8">
+                      <q-skeleton type="text" />
+                    </div>
                     <div class="col-4 text-grey">ตำแหน่ง</div>
-                    <div class="col-8 text-weight-medium">
+                    <div v-if="!isLoad" class="col-8 text-weight-medium">
                       {{ dataGuarantor.position }}
                     </div>
+                    <div v-else class="col-8">
+                      <q-skeleton type="text" />
+                    </div>
                     <div class="col-4 text-grey">ตำแหน่งประเภท</div>
-                    <div class="col-8 text-weight-medium">
+                    <div v-if="!isLoad" class="col-8 text-weight-medium">
                       {{ dataGuarantor.type }}
                     </div>
+                    <div v-else class="col-8">
+                      <q-skeleton type="text" />
+                    </div>
                   </div>
                 </div>
                 <div class="col">
                   <div class="row q-col-gutter-md">
                     <div class="col-4 text-grey">ระดับตำแหน่ง</div>
-                    <div class="col-8 text-weight-medium">
+                    <div v-if="!isLoad" class="col-8 text-weight-medium">
                       {{ dataGuarantor.level }}
                     </div>
+                    <div v-else class="col-8">
+                      <q-skeleton type="text" />
+                    </div>
                     <div class="col-4 text-grey">ตำแหน่งทางการบริหาร</div>
-                    <div class="col-8 text-weight-medium">
+                    <div v-if="!isLoad" class="col-8 text-weight-medium">
                       {{ dataGuarantor.positionSide }}
                     </div>
+                    <div v-else class="col-8">
+                      <q-skeleton type="text" />
+                    </div>
                     <div class="col-4 text-grey">หน่วยงานที่สังกัด</div>
-                    <div class="col-8 text-weight-medium text-html">
+                    <div
+                      v-if="!isLoad"
+                      class="col-8 text-weight-medium text-html"
+                    >
                       {{ dataGuarantor.org }}
                     </div>
+                    <div v-else class="col-8">
+                      <q-skeleton type="text" />
+                    </div>
                   </div>
                 </div>
               </div>
diff --git a/src/modules/09_scholarship/views/main.vue b/src/modules/09_scholarship/views/main.vue
index ad8856d..0d873c6 100644
--- a/src/modules/09_scholarship/views/main.vue
+++ b/src/modules/09_scholarship/views/main.vue
@@ -14,7 +14,7 @@ import type {
 } from "@/modules/09_scholarship/interface/index/Main";
 
 const mixin = useCounterMixin();
-const { showLoader, hideLoader, messageError } = mixin;
+const { messageError } = mixin;
 const router = useRouter();
 
 const $q = useQuasar();
@@ -24,6 +24,7 @@ const currentPage = ref<number>(1);
 const page = ref<number>(1);
 const rowsPerPage = ref<number>(10);
 
+const isLoad = ref<boolean>(false);
 const rows = ref<Scholarship[]>([]);
 const year = ref<number>(0);
 const type = ref<string>("DOMESTICE");
@@ -85,7 +86,7 @@ const visibleColumns = ref<string[]>(["scholarshipYear", "scholarshipType"]);
 
 /** ดึงข้อมูล */
 async function getData() {
-  showLoader();
+  isLoad.value = true;
   await http
     .get(
       config.API.developmentScholarship +
@@ -98,7 +99,7 @@ async function getData() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoad.value = false;
     });
 }
 
@@ -106,40 +107,20 @@ function onEdit(id: string) {
   router.push(`/scholarship/${id}`);
 }
 
-// watch(
-//   () => currentPage.value,
-//   () => {
-//     rowsPerPage.value = pagination.value.rowsPerPage;
-//     getData();
-//   }
-// );
-
-// watch(
-//   () => pagination.value.rowsPerPage,
-//   () => {
-//     rowsPerPage.value = pagination.value.rowsPerPage;
-//     currentPage.value = 1;
-//     getData();
-//   }
-// );
-
 async function getProfileId() {
-  if (dataStore.profileId) {
-    profilId.value = dataStore.profileId;
-  } else {
-    showLoader();
-    try {
+  isLoad.value = true;
+  try {
+    if (!dataStore.profileId) {
       const res = await http.get(config.API.profilePosition());
       dataStore.profileId = res.data.result.profileId;
-      profilId.value = dataStore.profileId;
-    } catch (e) {
-      messageError($q, e);
-    } finally {
-      hideLoader();
     }
+    profilId.value = dataStore.profileId;
+    await getData();
+  } catch (e) {
+    messageError($q, e);
+  } finally {
+    isLoad.value = false;
   }
-
-  await getData();
 }
 
 function convertType(val: string) {
@@ -253,7 +234,7 @@ onMounted(async () => {
             />
           </div>
 
-          <div>
+          <div class="col-12">
             <d-table
               flat
               bordered
@@ -263,21 +244,9 @@ onMounted(async () => {
               :columns="columns"
               :visible-columns="visibleColumns"
               :rows-per-page-options="[10, 25, 50, 100]"
-              v-model:pagination="pagination"
+              :pagination="pagination"
+              :loading="isLoad"
             >
-              <template v-slot:pagination="scope">
-                ทั้งหมด {{ rows.length }} รายการ
-                <q-pagination
-                  v-model="pagination.page"
-                  active-color="primary"
-                  color="dark"
-                  :max="scope.pagesNumber"
-                  :max-pages="5"
-                  size="sm"
-                  boundary-links
-                  direction-links
-                ></q-pagination>
-              </template>
               <template v-slot:header="props">
                 <q-tr :props="props">
                   <q-th
diff --git a/src/modules/10_registry/01_Information/01_Information.vue b/src/modules/10_registry/01_Information/01_Information.vue
index fc736f7..9e30df3 100644
--- a/src/modules/10_registry/01_Information/01_Information.vue
+++ b/src/modules/10_registry/01_Information/01_Information.vue
@@ -1,19 +1,20 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted, computed } from "vue";
-import { useCounterMixin } from "@/stores/mixin";
-import { useDataStore } from "@/stores/data";
-import { useQuasar, type QTableColumn, type QTableProps } from "quasar";
+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 DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
+/** import Type */
 import type { InformationData } from "@/interface/Main";
 
-const link = ref<string>("");
+/** import Component */
+import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
+
 const $q = useQuasar();
 const dataStore = useDataStore();
-const mixin = useCounterMixin();
 const {
   showLoader,
   hideLoader,
@@ -21,16 +22,23 @@ const {
   date2Thai,
   dialogConfirm,
   success,
-} = mixin;
-
-const editPhone = ref<boolean>(false);
-const editEmail = ref<boolean>(false);
-const rowsHistory = ref<any[]>([]);
-const rowsHistoryData = ref<any[]>([]);
-const modalHistory = ref<boolean>(false);
-const phone = ref<string>("");
-const email = ref<string>("");
+} = useCounterMixin();
 
+const link = ref<string>(""); // link สำหรับดึงข้อมูล
+const editPhone = ref<boolean>(false); // แก้ไขเบอร์โทร
+const editEmail = ref<boolean>(false); // แก้ไขอีเมล
+const rowsHistory = ref<any[]>([]); // ข้อมูลประวัติการแก้ไข
+const rowsHistoryData = ref<any[]>([]); // ข้อมูลประวัติการแก้ไข (สำหรับ filter)
+const modalHistory = ref<boolean>(false); // เปิด modal ประวัติการแก้ไขข้อมูลส่วนตัว
+const phone = ref<string>(""); // เบอร์โทร
+const email = ref<string>(""); // อีเมล
+const isLoading = ref<boolean>(false); // ตัวแปรโหลดข้อมูล
+const isLoadingHistory = ref<boolean>(false); // ตัวแปรโหลดข้อมูลประวัติการแก้ไข
+const mainEmail = ref<string>(""); // อีเมลหลัก
+const mainPhone = ref<string>(""); // เบอร์โทรหลัก
+const isValidPhone = ref<boolean>(true); // validate เบอร์โทร
+const isValidEmail = ref<boolean>(true); // validate อีเมล
+const emailVerify = ref<string | null>(null); // สถานะการยืนยันอีเมล
 /** ตัวแปรข้อมูล */
 const formDataInformation = reactive<InformationData>({
   rank: "", //ยศ
@@ -48,8 +56,6 @@ const formDataInformation = reactive<InformationData>({
   phone: "", //เบอร์โทร
   email: "",
 });
-
-const emailVerify = ref<string | null>(null);
 const visibleColumnsHistory = ref<string[]>([
   "citizenId",
   "prefix",
@@ -237,27 +243,19 @@ const columnsHistory = ref<QTableProps["columns"]>([
   },
 ]);
 
-function onHistory() {
-  modalHistory.value = true;
-}
-
-const mainEmail = ref<string>("");
-const mainPhone = ref<string>("");
-
+/** ตรวจสอบอีเมล */
 const isCheckEmail = computed(() => {
   return mainEmail.value === formDataInformation.email ? true : false;
 });
 
+/** ตรวจสอบเบอร์โทร */
 const isCheckPhone = computed(() => {
-  console.log("mainPhone", mainPhone.value);
-  console.log("formDataInformation", formDataInformation.phone);
-
   return mainPhone.value === formDataInformation.phone ? true : false;
 });
 
-/** get data */
+/** ฟังก์ชันดึงข้อมูลประวัติส่วนตัว */
 async function getData() {
-  showLoader();
+  isLoading.value = true;
   await http
     .get(config.API.dataUserInformationByType(link.value))
     .then(async (res) => {
@@ -285,24 +283,27 @@ async function getData() {
       phone.value = data.phone;
 
       emailVerify.value = data.statusEmail;
-      hideLoader();
     })
 
     .catch((e) => {
       messageError($q, e);
-      hideLoader();
     })
-    .finally(() => {});
+    .finally(() => {
+      isLoading.value = false;
+    });
 }
 
-/** get history */
-function getHistory() {
+/** ฟังก์ชันดึงข้อมูลประวัติการแก้ไข */
+async function getHistory() {
+  isLoadingHistory.value = true;
+  rowsHistory.value = [];
+  rowsHistoryData.value = [];
   const url =
     dataStore.officerType == "OFFICER"
       ? config.API.dataUserInformatioHistory("")
       : config.API.dataUserInformatioHistory("-employee");
-  showLoader();
-  http
+
+  await http
     .get(url)
     .then((res) => {
       const data = res.data.result;
@@ -313,14 +314,16 @@ function getHistory() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoadingHistory.value = false;
     });
 }
 
-const isValidPhone = ref<boolean>(true); // validate เบอร์โทร
-const isValidEmail = ref<boolean>(true); // validate อีเมล
+/** ฟังก์ชันเปิด modal ประวัติการแก้ไขข้อมูลส่วนตัว */
+function onHistory() {
+  modalHistory.value = true;
+}
 
-/** บันทึกเบอร์โทร */
+/** ฟังก์ชันบันทึกเบอร์โทร */
 async function onSavePhone() {
   if (!formDataInformation.phone || formDataInformation.phone.length != 10) {
     isValidPhone.value = false;
@@ -353,7 +356,7 @@ async function onSavePhone() {
   }
 }
 
-/** บันทึก email */
+/** ฟังก์ชันบันทึก email */
 async function onSaveEmail() {
   if (!formDataInformation.email) {
     isValidEmail.value = false;
@@ -388,6 +391,7 @@ onMounted(async () => {
   await getData();
 });
 </script>
+
 <template>
   <div class="col-12">
     <q-toolbar class="q-px-none">
@@ -402,13 +406,17 @@ onMounted(async () => {
         dense
         round
         size="14px"
+        :loading="isLoading"
         @click="onHistory"
       >
         <q-tooltip>ประวัติแก้ไขข้อมูลส่วนตัว</q-tooltip>
       </q-btn>
     </q-toolbar>
     <q-card bordered class="bg-grey-1 q-pa-md">
-      <div class="row">
+      <div v-if="isLoading">
+        <q-skeleton height="160px" />
+      </div>
+      <div v-else class="row">
         <div class="col-12 col-sm-12 col-md-6 q-gutter-y-sm">
           <div class="row">
             <div class="col-4 text-grey-6 text-weight-medium">
@@ -670,5 +678,6 @@ onMounted(async () => {
     :rows-data="rowsHistoryData"
     :visibleColumns="visibleColumnsHistory"
     :columns="columnsHistory"
+    :is-loading="isLoadingHistory"
   />
 </template>
diff --git a/src/modules/10_registry/01_Information/02_ChangeName.vue b/src/modules/10_registry/01_Information/02_ChangeName.vue
index dcac788..0a7a972 100644
--- a/src/modules/10_registry/01_Information/02_ChangeName.vue
+++ b/src/modules/10_registry/01_Information/02_ChangeName.vue
@@ -1,33 +1,26 @@
 <script setup lang="ts">
-import { useCounterMixin } from "@/stores/mixin";
-import { useDataStore } from "@/stores/data";
-import { useQuasar, type QTableProps } from "quasar";
 import { ref, onMounted } from "vue";
 
+import { useCounterMixin } from "@/stores/mixin";
+import { useDataStore } from "@/stores/data";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
+/** import type*/
+import { useQuasar, type QTableProps } from "quasar";
 import type { ChangNameRows } from "@/modules/10_registry/interface/response/01_Information";
-import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
 
-const link = ref<string>("");
 const $q = useQuasar();
-const mixin = useCounterMixin();
 const dataStore = useDataStore();
 const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
-  mixin;
-
-const rows = ref<ChangNameRows[]>([]);
-const rowsData = ref<ChangNameRows[]>([]);
-const idByrow = ref<string>("");
-const filter = ref<string>("");
-const rowsHistory = ref<ChangNameRows[]>([]);
-const rowsHistoryData = ref<ChangNameRows[]>([]);
-const mode = ref<boolean>($q.screen.gt.xs);
-
-const modalHistory = ref<boolean>(false);
-/** ตัวแปรข้อมูล */
+  useCounterMixin();
 
+const mode = ref<boolean>($q.screen.gt.xs); // true = desktop mode, false = mobile mode
+const isLoading = ref<boolean>(false); // สถานะการโหลดข้อมูล
+const link = ref<string>(""); // ลิงก์สำหรับดึงข้อมูลประวัติการเปลี่ยนชื่อ-นามสกุล
+const rows = ref<ChangNameRows[]>([]); // ข้อมูลประวัติการเปลี่ยนชื่อ-นามสกุล
+const rowsData = ref<ChangNameRows[]>([]); // ข้อมูลประวัติการเปลี่ยนชื่อ-นามสกุลสำหรับค้นหา
+const filter = ref<string>(""); // ค่าที่ใช้สำหรับค้นหาในตาราง
 const visibleColumns = ref<string[]>([
   "prefix",
   "firstName",
@@ -98,93 +91,10 @@ const pagination = ref({
   sortBy: "lastUpdatedAt",
 });
 
-const visibleColumnsHistory = ref<string[]>([
-  "prefix",
-  "firstName",
-  "lastName",
-  "status",
-  "lastUpdateFullName",
-  "lastUpdatedAt",
-]);
-const columnsHistory = ref<QTableProps["columns"]>([
-  {
-    name: "prefix",
-    align: "left",
-    label: "คำนำหน้าชื่อ",
-    sortable: true,
-    field: "prefix",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "firstName",
-    align: "left",
-    label: "ชื่อ",
-    sortable: true,
-    field: "firstName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "lastName",
-    align: "left",
-    label: "นามสกุล",
-    sortable: true,
-    field: "lastName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "status",
-    align: "left",
-    label: "สถานะการเปลี่ยนชื่อ",
-    sortable: true,
-    field: "status",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "lastUpdateFullName",
-    align: "left",
-    label: "ผู้ดำเนินการ",
-    sortable: true,
-    field: "lastUpdateFullName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "lastUpdatedAt",
-    align: "left",
-    label: "วันที่แก้ไข",
-    sortable: true,
-    field: "lastUpdatedAt",
-    format: (v) => date2Thai(v),
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-]);
-
-function onHistory(id: string) {
-  modalHistory.value = true;
-  idByrow.value = id;
-}
-
-/** get data */
+/** ฟังก์ชันดึงข้อมูลประวัติการเปลี่ยนชื่อ */
 async function getData() {
-  showLoader();
-  http
+  isLoading.value = true;
+  await http
     .get(config.API.dataUserChangeNameByType(link.value))
     .then((res) => {
       const data = res.data.result;
@@ -195,33 +105,11 @@ async function getData() {
       messageError($q, e);
     })
     .finally(() => {
-      setTimeout(() => {
-        hideLoader();
-      }, 2000);
-    });
-}
-
-/** get history */
-function getHistory() {
-  showLoader();
-  http
-    .get(
-      config.API.dataUserChangeNameHistoryByType(link.value) +
-        `/${idByrow.value}`
-    )
-    .then((res) => {
-      const data = res.data.result;
-      rowsHistory.value = data;
-      rowsHistoryData.value = data;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
+      isLoading.value = false;
     });
 }
 
+/** ฟังก์ชันค้นหาข้อมูลในตาราง */
 function onSearch() {
   rows.value = onSearchDataTable(
     filter.value,
@@ -230,9 +118,10 @@ function onSearch() {
   );
 }
 
-/**
- * ฟังก์ชันโหลไฟลเอกสารหลักฐาน
+/***
+ * ฟังก์ชันดาวน์โหลดไฟล์เอกสารหลักฐาน
  * @param id รายการที่ต้องการโหลด
+ * @param profileId รหัสโปรไฟล์ของผู้ใช้
  */
 async function onDownloadFile(id: string, profileId: string) {
   showLoader();
@@ -263,8 +152,8 @@ onMounted(async () => {
   await getData();
 });
 </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"
@@ -301,97 +190,94 @@ onMounted(async () => {
         :display-value="$q.lang.table.columns"
       />
     </q-toolbar>
-    <d-table
-      flat
-      dense
-      bordered
-      virtual-scroll
-      :rows="rows.length !== 0 ? rows : []"
-      :columns="columns"
-      :grid="!mode"
-      :rows-per-page-options="[10, 25, 50, 100]"
-      :visible-columns="visibleColumns"
-      :virtual-scroll-sticky-size-start="48"
-      v-model:pagination="pagination"
-    >
-      <template v-slot:header="props">
-        <q-tr :props="props">
-          <q-th v-for="col in props.cols" :key="col.name" :props="props">
-            <span class="text-weight-medium">{{ col.label }}</span>
-          </q-th>
-          <q-th auto-width />
-        </q-tr>
-      </template>
 
-      <template v-if="mode" v-slot:body="props">
-        <q-tr :props="props" class="cursor-pointer">
-          <q-td v-for="(col, index) in props.cols" :key="col.name">
-            <div v-if="col.name == 'no'">
-              {{ props.rowIndex + 1 }}
-            </div>
-            <div v-else>
-              {{ col.value ? col.value : "-" }}
-            </div>
-          </q-td>
-          <q-td auto-width>
-            <q-btn
-              color="green"
-              flat
-              dense
-              round
-              icon="mdi-file-document-outline"
-              @click="onDownloadFile(props.row.id, props.row.profileId)"
-            >
-              <q-tooltip>ดาวน์โหลด</q-tooltip>
-            </q-btn>
-          </q-td>
-        </q-tr>
-      </template>
-      <template v-else v-slot:item="props">
-        <div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
-          <q-card bordered flat>
-            <q-list dense class="q-mt-lg relative-position">
-              <q-td auto-width>
-                <q-btn
-                  color="green"
-                  flat
-                  dense
-                  round
-                  class="absolute_button"
-                  icon="mdi-file-document-outline"
-                  @click="onDownloadFile(props.row.id, props.row.profileId)"
-                >
-                  <q-tooltip>ดาวน์โหลด</q-tooltip>
-                </q-btn>
-              </q-td>
-              <q-item v-for="col in props.cols" :key="col.name">
-                <q-item-section>
-                  <q-item-label class="text-grey-6 text-weight-medium">{{
-                    col.label
-                  }}</q-item-label>
-                </q-item-section>
-                <q-item-section>
-                  <q-item-label class="text-dark text-weight-medium">{{
-                    col.value ? col.value : "-"
-                  }}</q-item-label>
-                </q-item-section>
-              </q-item>
-            </q-list>
-          </q-card>
-        </div>
-      </template>
-    </d-table>
+    <div class="col-12">
+      <d-table
+        flat
+        dense
+        bordered
+        virtual-scroll
+        row-key="id"
+        :rows="rows.length !== 0 ? rows : []"
+        :columns="columns"
+        :grid="!mode"
+        :rows-per-page-options="[10, 25, 50, 100]"
+        :visible-columns="visibleColumns"
+        :virtual-scroll-sticky-size-start="48"
+        :pagination="pagination"
+        :loading="isLoading"
+      >
+        <template v-slot:header="props">
+          <q-tr :props="props">
+            <q-th v-for="col in props.cols" :key="col.name" :props="props">
+              <span class="text-weight-medium">{{ col.label }}</span>
+            </q-th>
+            <q-th auto-width />
+          </q-tr>
+        </template>
+
+        <template v-if="mode" v-slot:body="props">
+          <q-tr :props="props" class="cursor-pointer">
+            <q-td v-for="(col, index) in props.cols" :key="col.name">
+              <div v-if="col.name == 'no'">
+                {{ props.rowIndex + 1 }}
+              </div>
+              <div v-else>
+                {{ col.value ? col.value : "-" }}
+              </div>
+            </q-td>
+            <q-td auto-width>
+              <q-btn
+                color="green"
+                flat
+                dense
+                round
+                icon="mdi-file-document-outline"
+                @click="onDownloadFile(props.row.id, props.row.profileId)"
+              >
+                <q-tooltip>ดาวน์โหลด</q-tooltip>
+              </q-btn>
+            </q-td>
+          </q-tr>
+        </template>
+        <template v-else v-slot:item="props">
+          <div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
+            <q-card bordered flat>
+              <q-list dense class="q-mt-lg relative-position">
+                <q-td auto-width>
+                  <q-btn
+                    color="green"
+                    flat
+                    dense
+                    round
+                    class="absolute_button"
+                    icon="mdi-file-document-outline"
+                    @click="onDownloadFile(props.row.id, props.row.profileId)"
+                  >
+                    <q-tooltip>ดาวน์โหลด</q-tooltip>
+                  </q-btn>
+                </q-td>
+                <q-item v-for="col in props.cols" :key="col.name">
+                  <q-item-section>
+                    <q-item-label class="text-grey-6 text-weight-medium">{{
+                      col.label
+                    }}</q-item-label>
+                  </q-item-section>
+                  <q-item-section>
+                    <q-item-label class="text-dark text-weight-medium">{{
+                      col.value ? col.value : "-"
+                    }}</q-item-label>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card>
+          </div>
+        </template>
+      </d-table>
+    </div>
   </div>
-  <DialogHistory
-    v-model:modal="modalHistory"
-    :title="'ประวัติแก้ไขการเปลี่ยนชื่อ-นามสกุล'"
-    :getData="getHistory"
-    :rows="rowsHistory"
-    :rows-data="rowsHistoryData"
-    :visibleColumns="visibleColumnsHistory"
-    :columns="columnsHistory"
-  />
 </template>
+
 <style scoped>
 .absolute_button {
   position: absolute;
diff --git a/src/modules/10_registry/01_Information/03_Address.vue b/src/modules/10_registry/01_Information/03_Address.vue
index e848b40..b8e1652 100644
--- a/src/modules/10_registry/01_Information/03_Address.vue
+++ b/src/modules/10_registry/01_Information/03_Address.vue
@@ -6,8 +6,8 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import { useDataStore } from "@/stores/data";
-import { useRegistryInFormationStore } from "@/modules/10_registry/store/registry";
 
+/** import type */
 import type {
   Address,
   Provinces,
@@ -15,28 +15,26 @@ import type {
   SubDistricts,
 } from "@/modules/10_registry/interface/response/01_Information";
 
-//history dialog
+/** import component */
 import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
+import SkeletonAddress from "@/modules/10_registry/components/skeleton/Address.vue";
 
-const link = ref<string>("");
-const store = useRegistryInFormationStore();
-const dataStore = useDataStore();
-const rowsHistory = ref<any[]>([]);
-const rowsHistoryData = ref<any[]>([]);
 const $q = useQuasar();
-const mixin = useCounterMixin();
-const { showLoader, hideLoader, messageError, date2Thai } = mixin;
-
-const modalHistory = ref<boolean>(false);
-/** ตัวแปรข้อมูล */
+const dataStore = useDataStore();
+const { messageError, date2Thai } = useCounterMixin();
 
+const isLoading = ref<boolean>(false); // สถานะการโหลดข้อมูล
+const isLoadingHistory = ref<boolean>(false); // สถานะการโหลดประวัติข้อมูลที่อยู่
+const link = ref<string>(""); // ลิงก์สำหรับดึงข้อมูลที่อยู่
+const rowsHistory = ref<any[]>([]); // ข้อมูลประวัติที่อยู่
+const rowsHistoryData = ref<any[]>([]); // ข้อมูลประวัติที่อยู่สำหรับค้นหา
+const modalHistory = ref<boolean>(false); // สถานะการแสดงโมดัลประวัติที่อยู่
 const formData = reactive({
   registrationAddress: "", //ที่อยู่ตามทะเบียนบ้าน
   registrationProvince: "", //จังหวัด
   registrationDistrict: "", //เขต / อำเภอ
   registrationSubDistrict: "", //แขวง / ตำบล
   registrationZipCode: "", //รหัสไปรษณีย์
-
   currentAddress: "", //ที่อยู่ปัจจุบัน
   currentProvince: "", //จังหวัด
   currentDistrict: "", //เขต / อำเภอ
@@ -44,11 +42,11 @@ const formData = reactive({
   currentZipCode: "", //รหัสไปรษณีย์
 });
 
-const provinceData = ref<Provinces[]>([]);
-const districtRegistration = ref<Districts[]>([]);
-const districtCurrent = ref<Districts[]>([]);
-const subDistrictRegistration = ref<SubDistricts[]>([]);
-const subDistrictCurrent = ref<SubDistricts[]>([]);
+const provinceData = ref<Provinces[]>([]); // ข้อมูลจังหวัด
+const districtRegistration = ref<Districts[]>([]); // เขต / อำเภอตามทะเบียนบ้าน
+const districtCurrent = ref<Districts[]>([]); // เขต / อำเภอปัจจุบัน
+const subDistrictRegistration = ref<SubDistricts[]>([]); // แขวง / ตำบลตามทะเบียนบ้าน
+const subDistrictCurrent = ref<SubDistricts[]>([]); // แขวง / ตำบลปัจจุบัน
 
 const visibleColumnsHistory = ref<string[]>([
   "currentAddress",
@@ -65,7 +63,6 @@ const visibleColumnsHistory = ref<string[]>([
   "lastUpdateFullName",
   "lastUpdatedAt",
 ]);
-
 const columnsHistory = ref<QTableProps["columns"]>([
   {
     name: "registrationAddress",
@@ -217,21 +214,18 @@ const columnsHistory = ref<QTableProps["columns"]>([
   },
 ]);
 
-function onHistory() {
-  modalHistory.value = true;
-}
-
-/** get data */
+/** ฟังก์ชันดึงข้อมูลที่อยู่ */
 async function getData() {
-  showLoader();
-  http
+  await http
     .get(config.API.dataUserAddressByType(link.value))
-    .then((res) => {
+    .then(async (res) => {
       const data: Address = res.data.result;
-      fetchDistrict(data.registrationProvinceId, "1");
-      fetchDistrict(data.currentProvinceId, "2");
-      fetchSubDistrict(data.registrationDistrictId, "1");
-      fetchSubDistrict(data.currentDistrictId, "2");
+      await Promise.all([
+        fetchDistrict(data.registrationProvinceId, "1"),
+        fetchDistrict(data.currentProvinceId, "2"),
+        fetchSubDistrict(data.registrationDistrictId, "1"),
+        fetchSubDistrict(data.currentDistrictId, "2"),
+      ]);
 
       formData.registrationAddress = data.registrationAddress;
       formData.registrationProvince = data.registrationProvinceId;
@@ -247,42 +241,41 @@ async function getData() {
     })
     .catch((e) => {
       messageError($q, e);
-    })
-    .finally(() => {
-      setTimeout(() => {
-        hideLoader();
-      }, 2000);
     });
 }
 
-/** get history */
-function getHistory() {
+/** ฟังก์ชันดึงข้อมูลประวัติที่อยู่ */
+async function getHistory() {
+  isLoadingHistory.value = true;
+  rowsHistory.value = [];
+  rowsHistoryData.value = [];
   const url =
     dataStore.officerType == "OFFICER"
       ? config.API.dataUserHistory("")
       : config.API.dataUserHistory("-employee");
-  showLoader();
-  http
+
+  await http
     .get(url)
     .then((res) => {
       const data = res.data.result;
       rowsHistory.value = data;
-      console.log("🚀 ~ .then ~ data:", data);
       rowsHistoryData.value = data;
     })
     .catch((e) => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoadingHistory.value = false;
     });
 }
 
-/**
- *function fetch ข้อมูลจังหวัด
- */
-function fetchProvince() {
-  http
+function onHistory() {
+  modalHistory.value = true;
+}
+
+/** ฟังก์ชันดึงข้อมูลจังหวัด */
+async function fetchProvince() {
+  await http
     .get(config.API.profileNewProvince)
     .then((res) => {
       const data = res.data.result;
@@ -294,13 +287,13 @@ function fetchProvince() {
 }
 
 /**
- * function fetch ข้อมูลอำเภอ
+ * ฟังก์ชันดึงข้อมูลอำเภอ
  * @param id จังหวัด
  * @param position ที่อยู่ตามทะเบียนบ้าน,ที่อยู่ปัจจุบัน
  */
-function fetchDistrict(id: string | null, position: string) {
+async function fetchDistrict(id: string | null, position: string) {
   if (!id) return;
-  http
+  await http
     .get(config.API.profileNewDistrictByPId(id))
     .then((res) => {
       const data = res.data.result.districts;
@@ -316,13 +309,13 @@ function fetchDistrict(id: string | null, position: string) {
 }
 
 /**
- * function fetch ข้อมูลอำเภ
+ * ฟังก์ชันดึงข้อมูลอำเภอ
  * @param id อำเภอ
  * @param position ที่อยู่ตามทะเบียนบ้าน,ที่อยู่ปัจจุบัน
  */
-function fetchSubDistrict(id: string | null, position: string) {
+async function fetchSubDistrict(id: string | null, position: string) {
   if (!id) return;
-  http
+  await http
     .get(config.API.profileNewSubDistrictByDId(id))
     .then((res) => {
       const data = res.data.result.subDistricts;
@@ -338,8 +331,8 @@ function fetchSubDistrict(id: string | null, position: string) {
 }
 
 /**
- * function แปลงชื้่อจังหวัด
- * @param id
+ * ฟังก์ชันแปลงชื้่อจังหวัด
+ * @param id รหัสจังหวัด
  */
 function convertProvinceName(id: string) {
   const province = provinceData.value.find((e: Provinces) => e.id === id);
@@ -347,8 +340,8 @@ function convertProvinceName(id: string) {
 }
 
 /**
- * function แปลงชื้่ออำเภอ
- * @param id
+ * ฟังก์ชันแปลงชื้่ออำเภอ
+ * @param id รหัสอำเภอ
  */
 function convertDistrictName(id: string, type: string) {
   const data =
@@ -358,8 +351,8 @@ function convertDistrictName(id: string, type: string) {
 }
 
 /**
- * function แปลงชื้่อตำบล
- * @param id
+ * ฟังก์ชัน แปลงชื้่อตำบล
+ * @param id รหัสตำบล
  */
 function convertSubDistrictName(id: string, type: string) {
   const data =
@@ -369,9 +362,14 @@ function convertSubDistrictName(id: string, type: string) {
 }
 
 onMounted(async () => {
+  isLoading.value = true;
   link.value = await dataStore.getProFileType();
-  await fetchProvince();
-  await getData();
+  try {
+    await fetchProvince();
+    await getData();
+  } finally {
+    isLoading.value = false;
+  }
 });
 </script>
 <template>
@@ -386,6 +384,7 @@ onMounted(async () => {
         dense
         round
         size="14px"
+        :loading="isLoading"
         @click="onHistory"
       >
         <q-tooltip>ประวัติข้อมูลที่อยู่</q-tooltip>
@@ -402,7 +401,8 @@ onMounted(async () => {
           </q-item>
           <q-separator />
           <q-card-section>
-            <div class="col-12 col-sm-12 col-md-6 q-gutter-y-sm">
+            <SkeletonAddress v-if="isLoading" />
+            <div v-else class="col-12 col-sm-12 col-md-6 q-gutter-y-sm">
               <div class="row">
                 <div class="col-5 text-grey-6 text-weight-medium">
                   ที่อยู่ตามทะเบียนบ้าน
@@ -481,7 +481,8 @@ onMounted(async () => {
           </q-item>
           <q-separator />
           <q-card-section>
-            <div class="col-12 col-sm-12 col-md-6 q-gutter-y-sm">
+            <SkeletonAddress v-if="isLoading" />
+            <div v-else class="col-12 col-sm-12 col-md-6 q-gutter-y-sm">
               <div class="row">
                 <div class="col-5 text-grey-6 text-weight-medium">
                   ที่อยู่ปัจจุบัน
@@ -547,5 +548,6 @@ onMounted(async () => {
     :rows-data="rowsHistoryData"
     :visibleColumns="visibleColumnsHistory"
     :columns="columnsHistory"
+    :is-loading="isLoadingHistory"
   />
 </template>
diff --git a/src/modules/10_registry/01_Information/04_Family.vue b/src/modules/10_registry/01_Information/04_Family.vue
index c40a590..97bf98e 100644
--- a/src/modules/10_registry/01_Information/04_Family.vue
+++ b/src/modules/10_registry/01_Information/04_Family.vue
@@ -1,33 +1,28 @@
 <script setup lang="ts">
-import { useQuasar, type QTableProps } from "quasar";
 import { ref, reactive, onMounted } from "vue";
+import { useQuasar, type QTableProps } from "quasar";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
-import { useRegistryInFormationStore } from "@/modules/10_registry/store/registry";
 import { useDataStore } from "@/stores/data";
 import { useCounterMixin } from "@/stores/mixin";
 
 import type { FormChildren } from "@/modules/10_registry/interface/index/Family";
 
 import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
+import SkeletonFamily from "@/modules/10_registry/components/skeleton/Family.vue";
 
-const link = ref<string>("");
 const $q = useQuasar();
-const mixin = useCounterMixin();
-const { showLoader, hideLoader, messageError, date2Thai } = mixin;
-
-const idFamily = ref<string>("");
-const store = useRegistryInFormationStore();
 const dataStore = useDataStore();
-const rowsHistory = ref<any[]>([]);
-const rowsHistoryData = ref<any[]>([]);
+const { messageError, date2Thai } = useCounterMixin();
 
-const typeForm = ref<string>("");
-const modalHistory = ref<boolean>(false);
-/** ตัวแปรข้อมูล */
-
-const fatherData = reactive<any>({
+const link = ref<string>(""); // ลิงก์สำหรับดึงข้อมูลครอบครัว
+const idFamily = ref<string>(""); // ID ของครอบครัว
+const rowsHistory = ref<any[]>([]); // ข้อมูลประวัติครอบครัว
+const rowsHistoryData = ref<any[]>([]); // ข้อมูลประวัติครอบครัวสำหรับค้นหา
+const typeForm = ref<string>(""); // ประเภทของข้อมูลที่แสดง (father, mother, couple, children)
+const modalHistory = ref<boolean>(false); // สถานะการแสดงประวัติครอบครัว
+const fatherData = reactive({
   isLive: null,
   citizenId: "",
   prefix: "",
@@ -36,7 +31,7 @@ const fatherData = reactive<any>({
   job: "",
   profileId: "",
 });
-const motherData = reactive<any>({
+const motherData = reactive({
   isLive: null,
   citizenId: "",
   prefix: "",
@@ -45,7 +40,7 @@ const motherData = reactive<any>({
   job: "",
   profileId: "",
 });
-const coupleData = reactive<any>({
+const coupleData = reactive({
   isLive: null,
   citizenId: "",
   prefix: "",
@@ -56,7 +51,6 @@ const coupleData = reactive<any>({
   statusMarital: "",
   profileId: "",
 });
-
 const childData = ref<FormChildren[]>([]);
 
 const visibleColumnsHistory = ref<string[]>([
@@ -161,21 +155,26 @@ const columnsHistory = ref<QTableProps["columns"]>([
   },
 ]);
 
-const checkFatherData = ref<boolean>(false);
-const checkMotherData = ref<boolean>(false);
-const checkCoupleData = ref<boolean>(false);
-const checkChildData = ref<boolean>(false);
+const checkFatherData = ref<boolean>(false); // สถานะการมีข้อมูลบิดา
+const checkMotherData = ref<boolean>(false); // สถานะการมีข้อมูลมารดา
+const checkCoupleData = ref<boolean>(false); // สถานะการมีข้อมูลคู่สมรส
+const checkChildData = ref<boolean>(false); // สถานะการมีข้อมูลบุตร
 
-function onHistory(type: string, id: string) {
-  modalHistory.value = true;
-  typeForm.value = type;
-  idFamily.value = id ? id : "user";
-}
+const isLoadingHistory = ref<boolean>(false); // สถานะการโหลดประวัติข้อมูล
+const isLoading = reactive({
+  father: false,
+  mother: false,
+  couple: false,
+});
 
-/** get data */
+/**
+ * ฟังก์ชันดึงข้อมูลสมาชิกในครอบครัว
+ * @param type ประเภทข้อมูล (father, mother, couple, children)
+ */
 async function getData(type: string) {
-  showLoader();
-  http
+  (isLoading as any)[type] = true;
+
+  await http
     .get(config.API.dataUserFamilyByType(link.value, type))
     .then((res) => {
       const data = res.data.result;
@@ -219,14 +218,24 @@ async function getData(type: string) {
       messageError($q, e);
     })
     .finally(() => {
-      setTimeout(() => {
-        hideLoader();
-      }, 2000);
+      (isLoading as any)[type] = false;
     });
 }
 
-/** get history */
-function getHistory() {
+/**
+ * ฟังก์ชันเปิดประวัติการแก้ไขข้อมูล
+ * @param type ประเภทข้อมูล (father, mother, couple, children)
+ * @param id ID ของครอบครัว (ใช้สำหรับบุตร)
+ */
+function onHistory(type: string, id: string) {
+  modalHistory.value = true;
+  typeForm.value = type;
+  idFamily.value = id ? id : "user";
+}
+
+/** ฟังก์ชันดึงประวัติการแก้ไขข้อมูล */
+async function getHistory() {
+  isLoadingHistory.value = true;
   rowsHistory.value = [];
   rowsHistoryData.value = [];
   const url =
@@ -238,8 +247,7 @@ function getHistory() {
           idFamily.value
         );
 
-  showLoader();
-  http
+  await http
     .get(url)
     .then((res) => {
       const data = res.data.result;
@@ -261,7 +269,7 @@ function getHistory() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoadingHistory.value = false;
     });
 }
 
@@ -292,12 +300,14 @@ onMounted(async () => {
               flat
               dense
               round
+              :isLoading="isLoading.father"
               size="14px"
               @click="onHistory('father', '')"
             >
               <q-tooltip>ประวัติการแก้ไขข้อมูลบิดา</q-tooltip>
             </q-btn>
-            <div class="col-12">
+            <SkeletonFamily v-if="isLoading.father" :type="'father'" />
+            <div class="col-12" v-else>
               <q-card bordered class="bg-grey-1 q-pa-sm">
                 <div class="row">
                   <div class="col-12 col-sm-12 col-md-12 q-gutter-y-sm">
@@ -366,11 +376,13 @@ onMounted(async () => {
               dense
               round
               size="14px"
+              :isLoading="isLoading.mother"
               @click="onHistory('mother', '')"
             >
               <q-tooltip>ประวัติการแก้ไขข้อมูลมารดา</q-tooltip>
             </q-btn>
-            <div class="col-12">
+            <SkeletonFamily v-if="isLoading.mother" :type="'mother'" />
+            <div v-else class="col-12">
               <q-card bordered class="bg-grey-1 q-pa-sm">
                 <div class="row">
                   <div class="col-12 col-sm-12 col-md-12 q-gutter-y-sm">
@@ -441,12 +453,14 @@ onMounted(async () => {
               flat
               dense
               round
+              :isLoading="isLoading.couple"
               size="14px"
               @click="onHistory('couple', '')"
             >
               <q-tooltip>ประวัติการแก้ไขข้อมูลคู่สมรส</q-tooltip>
             </q-btn>
-            <div class="col-12">
+            <SkeletonFamily v-if="isLoading.couple" :type="'couple'" />
+            <div v-else class="col-12">
               <q-card bordered class="bg-grey-1 q-pa-sm">
                 <div class="row">
                   <div class="col-12 col-sm-12 col-md-6 q-gutter-y-sm">
@@ -632,6 +646,7 @@ onMounted(async () => {
         ? columnsHistory
         : columnsHistory?.filter((e) => e.name !== 'lastNameOld')
     "
+    :is-loading="isLoadingHistory"
   />
 </template>
 
diff --git a/src/modules/10_registry/01_Information/05_Educations.vue b/src/modules/10_registry/01_Information/05_Educations.vue
index 83dd3ef..4bff039 100644
--- a/src/modules/10_registry/01_Information/05_Educations.vue
+++ b/src/modules/10_registry/01_Information/05_Educations.vue
@@ -1,12 +1,11 @@
 <script setup lang="ts">
-import { useCounterMixin } from "@/stores/mixin";
-import { useQuasar, type QTableProps } from "quasar";
 import { ref, onMounted } from "vue";
-import { useDataStore } from "@/stores/data";
-//history dialog
+import { useQuasar, type QTableProps } from "quasar";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useDataStore } from "@/stores/data";
+import { useCounterMixin } from "@/stores/mixin";
 
 import type { EducationProfile } from "@/modules/10_registry/interface/index/Main";
 
@@ -16,20 +15,18 @@ const link = ref<string>("");
 const $q = useQuasar();
 const mixin = useCounterMixin();
 const dataStore = useDataStore();
-const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
-  mixin;
-
-const rows = ref<EducationProfile[]>([]);
-const rowsData = ref<EducationProfile[]>([]);
-const rowsHistory = ref<EducationProfile[]>([]);
-const rowsHistoryData = ref<EducationProfile[]>([]);
-const idByRow = ref<string>("");
-const filter = ref<string>("");
-const mode = ref<boolean>($q.screen.gt.xs);
-
-const modalHistory = ref<boolean>(false);
-/** ตัวแปรข้อมูล */
+const { messageError, date2Thai, onSearchDataTable } = mixin;
 
+const isLoading = ref<boolean>(false); // สถานะการโหลดข้อมูล
+const isLoadingHistory = ref<boolean>(false); // สถานะการโหลดประวัติการศึกษา
+const rows = ref<EducationProfile[]>([]); // ข้อมูลประวัติการศึกษา
+const rowsData = ref<EducationProfile[]>([]); // ข้อมูลประวัติการศึกษาสำหรับค้นหา
+const rowsHistory = ref<EducationProfile[]>([]); // ข้อมูลประวัติการศึกษาสำหรับแสดงในโมดัล
+const rowsHistoryData = ref<EducationProfile[]>([]); // ข้อมูลประวัติการศึกษาสำหรับค้นหาในโมดัล
+const idByRow = ref<string>(""); // ID ของแถวที่ถูกเลือกสำหรับดูประวัติ
+const filter = ref<string>(""); // ค่าที่ใช้สำหรับค้นหาในตาราง
+const mode = ref<boolean>($q.screen.gt.xs); // true = desktop mode, false = mobile mode
+const modalHistory = ref<boolean>(false); // สถานะการแสดงประวัติการศึกษา
 const visibleColumns = ref<string[]>([
   "educationLevel",
   "institute",
@@ -266,10 +263,26 @@ const columns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
-const pagination = ref({
-  // sortBy: "lastUpdatedAt",
-});
-
+const visibleColumnsHistory = ref<string[]>([
+  "educationLevel",
+  "institute",
+  "degree",
+  "field",
+  "gpa",
+  "country",
+  "duration",
+  "durationYear",
+  "other",
+  "fundName",
+  "isEducation",
+  "isHigh",
+  "endDate",
+  "startDate",
+  "finishDate",
+  "note",
+  "lastUpdateFullName",
+  "lastUpdatedAt",
+]);
 const columnsHistory = ref<QTableProps["columns"]>([
   {
     name: "educationLevel",
@@ -486,37 +499,11 @@ const columnsHistory = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
-const visibleColumnsHistory = ref<string[]>([
-  "educationLevel",
-  "institute",
-  "degree",
-  "field",
-  "gpa",
-  "country",
-  "duration",
-  "durationYear",
-  "other",
-  "fundName",
-  "isEducation",
-  "isHigh",
-  "endDate",
-  "startDate",
-  "finishDate",
-  "note",
-  "lastUpdateFullName",
-  "lastUpdatedAt",
-]);
 
-/** เปิด dialog ประวัติ */
-function onHistory(id: string) {
-  modalHistory.value = true;
-  idByRow.value = id;
-}
-
-/** get data */
+/** ฟังก์ชันดึงข้อมูลการศึกษา */
 async function getData() {
-  showLoader();
-  http
+  isLoading.value = true;
+  await http
     .get(config.API.dataUserEducationsByType(link.value))
     .then((res) => {
       const data = res.data.result;
@@ -527,16 +514,25 @@ async function getData() {
       messageError($q, e);
     })
     .finally(() => {
-      setTimeout(() => {
-        hideLoader();
-      }, 2000);
+      isLoading.value = false;
     });
 }
 
+/**
+ * เปิด dialog ประวัติการศึกษา
+ * @param id ID ของแถวที่ถูกเลือกสำหรับดูประวัติ
+ */
+function onHistory(id: string) {
+  modalHistory.value = true;
+  idByRow.value = id;
+}
+
 /** get history */
-function getHistory() {
-  showLoader();
-  http
+async function getHistory() {
+  isLoadingHistory.value = true;
+  rowsHistory.value = [];
+  rowsHistoryData.value = [];
+  await http
     .get(config.API.dataUserEducationsHistoryByType(link.value, idByRow.value))
     .then((res) => {
       const data = res.data.result;
@@ -547,10 +543,11 @@ function getHistory() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoadingHistory.value = false;
     });
 }
 
+/** ฟังก์ชันค้นหาข้อมูลการศึกษา */
 function onSearch() {
   rows.value = onSearchDataTable(
     filter.value,
@@ -561,7 +558,6 @@ function onSearch() {
 
 onMounted(async () => {
   link.value = await dataStore.getProFileType();
-
   await getData();
 });
 </script>
@@ -603,6 +599,7 @@ onMounted(async () => {
         :display-value="$q.lang.table.columns"
       />
     </q-toolbar>
+
     <d-table
       flat
       dense
@@ -611,10 +608,12 @@ onMounted(async () => {
       :rows="rows.length !== 0 ? rows : []"
       :columns="columns"
       :grid="!mode"
-      :rows-per-page-options="[10, 25, 50, 100]"
+      :rows-per-page-options="[1, 10, 25, 50, 100]"
       :visible-columns="visibleColumns"
       :virtual-scroll-sticky-size-start="48"
-      v-model:pagination="pagination"
+      :loading="isLoading"
+      row-key="id"
+      :pagination="{ page: 1, rowsPerPage: 10 }"
     >
       <template v-slot:header="props">
         <q-tr :props="props">
@@ -687,6 +686,7 @@ onMounted(async () => {
       </template>
     </d-table>
   </div>
+
   <DialogHistory
     v-model:modal="modalHistory"
     :title="'ประวัติแก้ไขประวัติการศึกษา'"
@@ -695,6 +695,7 @@ onMounted(async () => {
     :rows-data="rowsHistoryData"
     :visibleColumns="visibleColumnsHistory"
     :columns="columnsHistory"
+    :is-loading="isLoadingHistory"
   />
 </template>
 
diff --git a/src/modules/10_registry/01_Information/06_Ability.vue b/src/modules/10_registry/01_Information/06_Ability.vue
index be54300..bc77c5b 100644
--- a/src/modules/10_registry/01_Information/06_Ability.vue
+++ b/src/modules/10_registry/01_Information/06_Ability.vue
@@ -1,33 +1,34 @@
 <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 components */
 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>("");
 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 +188,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 +202,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 +231,11 @@ function getHistory() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoadingHistory.value = false;
     });
 }
 
+/** ฟังก์ชันค้นหาข้อมูล */
 function onSearch() {
   rows.value = onSearchDataTable(
     filter.value,
@@ -241,6 +247,7 @@ function onSearch() {
 /**
  * ฟังก์ชันโหลไฟลเอกสารหลักฐาน
  * @param id รายการที่ต้องการโหลด
+ * @param profileId ID ของโปรไฟล์ที่ต้องการโหลด
  */
 async function onDownloadFile(id: string, profileId: string) {
   showLoader();
@@ -272,7 +279,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,6 +315,7 @@ onMounted(async () => {
         :display-value="$q.lang.table.columns"
       />
     </q-toolbar>
+
     <d-table
       flat
       dense
@@ -320,7 +327,9 @@ onMounted(async () => {
       :rows-per-page-options="[10, 25, 50, 100]"
       :visible-columns="visibleColumns"
       :virtual-scroll-sticky-size-start="48"
-      v-model:pagination="pagination"
+      :pagination="pagination"
+      :loading="isLoading"
+      row-key="id"
     >
       <template v-slot:header="props">
         <q-tr :props="props">
@@ -422,6 +431,7 @@ onMounted(async () => {
       </template>
     </d-table>
   </div>
+
   <DialogHistory
     v-model:modal="modalHistory"
     :title="'ประวัติแก้ไขความสามารถพิเศษ'"
@@ -430,8 +440,10 @@ onMounted(async () => {
     :rows-data="rowsHistoryData"
     :visibleColumns="visibleColumnsHistory"
     :columns="columnsHistory"
+    :is-loading="isLoadingHistory"
   />
 </template>
+
 <style scoped>
 .absolute_button {
   position: absolute;
diff --git a/src/modules/10_registry/02_Government/01_Government.vue b/src/modules/10_registry/02_Government/01_Government.vue
index f47c4db..62afbc2 100644
--- a/src/modules/10_registry/02_Government/01_Government.vue
+++ b/src/modules/10_registry/02_Government/01_Government.vue
@@ -7,30 +7,26 @@ import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import { useDataStore } from "@/stores/data";
 
-import { useRegistryInFormationStore } from "@/modules/10_registry/store/registry";
-
 import type {
   ProfileAppointment,
   FormDataGovernment,
 } from "@/modules/10_registry/interface/index/Main";
-//history dialog
+
+/** import components */
 import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
+import GovernmentSkeleton from "@/modules/10_registry/components/skeleton/Government.vue";
 
-const link = ref<string>("");
 const $q = useQuasar();
-const mixin = useCounterMixin();
 const dataPerson = useDataStore();
-const checkType = ref<boolean>(
-  dataPerson.officerType == "OFFICER" ? true : false
-);
-const store = useRegistryInFormationStore();
-const { showLoader, hideLoader, messageError, date2Thai, dateToISO } = mixin;
+const { messageError, date2Thai, dateToISO } = useCounterMixin();
 
-const rowsHistory = ref<ProfileAppointment[]>([]);
-const rowsHistoryData = ref<ProfileAppointment[]>([]);
-const modalHistory = ref<boolean>(false);
+const link = ref<string>(""); //ลิงค์สำหรับดึงข้อมูล
+const isLoading = ref<boolean>(false); //สถานะการโหลดข้อมูล
+const isLoadingHistory = ref<boolean>(false); //สถานะการโหลดประวัติข้อมูล
+const rowsHistory = ref<ProfileAppointment[]>([]); //ข้อมูลประวัติราชการ
+const rowsHistoryData = ref<ProfileAppointment[]>([]); //ข้อมูลประวัติราชการ
+const modalHistory = ref<boolean>(false); //สถานะการเปิด modal ประวัติข้อมูล
 
-/** ตัวแปรข้อมูล */
 const formData = reactive<FormDataGovernment>({
   org: "",
   positionField: "",
@@ -138,7 +134,6 @@ const columnsHistory = ref<QTableProps["columns"]>([
 ]);
 
 /** ไม่เเน่ใจ ใช้เเบบไหน คอมเม้นไว้ก่อน */
-
 // const columnsHistory = ref<QTableProps["columns"]>([
 //   {
 //     name: "oc",
@@ -343,15 +338,14 @@ const columnsHistory = ref<QTableProps["columns"]>([
 //       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
 //   },
 // ]);
+const checkType = ref<boolean>(
+  dataPerson.officerType == "OFFICER" ? true : false
+);
 
-function onHistory() {
-  modalHistory.value = true;
-}
-
-/** get data */
-function getData() {
-  showLoader();
-  http
+/** ฟังก์ชันดึงข้อมูล */
+async function getData() {
+  isLoading.value = true;
+  await http
     .get(config.API.dataUserGovernmentByType(link.value))
     .then((res) => {
       const data = res.data.result;
@@ -378,18 +372,25 @@ function getData() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoading.value = false;
     });
 }
 
-/** get history */
-function getHistory() {
+/** ฟังก์ชันเปิด modal ประวัติข้อมูล */
+function onHistory() {
+  modalHistory.value = true;
+}
+
+/** ฟังก์ชันดึงประวัติข้อมูลราชการ */
+async function getHistory() {
+  isLoadingHistory.value = true;
+  rowsHistory.value = [];
+  rowsHistoryData.value = [];
   const url =
     dataPerson.officerType == "OFFICER"
       ? config.API.dataUserGovernmentHistory("")
       : config.API.dataUserGovernmentHistory("-employee");
-  showLoader();
-  http
+  await http
     .get(url)
     .then((res) => {
       const data = res.data.result;
@@ -400,13 +401,13 @@ function getHistory() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoadingHistory.value = false;
     });
 }
 
 onMounted(async () => {
   link.value = await dataPerson.getProFileType();
-  getData();
+  await getData();
 });
 </script>
 <template>
@@ -421,12 +422,15 @@ onMounted(async () => {
         dense
         round
         size="14px"
+        :isLoading="isLoading"
         @click="onHistory"
       >
         <q-tooltip>ประวัติข้อมูลราชการ</q-tooltip>
       </q-btn>
     </q-toolbar>
-    <q-card bordered class="bg-grey-1 q-pa-md">
+    <GovernmentSkeleton v-if="isLoading" />
+
+    <q-card v-else bordered class="bg-grey-1 q-pa-md">
       <div class="row q-col-gutter-y-sm">
         <div class="col-12 col-sm-12 col-md-6">
           <div class="row q-col-gutter-y-sm">
@@ -584,5 +588,6 @@ onMounted(async () => {
     :rows-data="rowsHistoryData"
     :visibleColumns="visibleColumnsHistory"
     :columns="columnsHistory"
+    :is-loading="isLoadingHistory"
   />
 </template>
diff --git a/src/modules/10_registry/02_Government/02_Discipline.vue b/src/modules/10_registry/02_Government/02_Discipline.vue
index bda0aad..7ac9611 100644
--- a/src/modules/10_registry/02_Government/02_Discipline.vue
+++ b/src/modules/10_registry/02_Government/02_Discipline.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { useCounterMixin } from "@/stores/mixin";
-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 { useRegistryDataStore } from "@/modules/10_registry/store/Main";
 
@@ -12,27 +12,24 @@ import type { DisciplineDetail } from "@/modules/10_registry/interface/index/Mai
 
 import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
 
-const link = ref<string>("");
 const $q = useQuasar();
-const mixin = useCounterMixin();
 const dataStore = useDataStore();
 const { getPathUploadFlie } = useRegistryDataStore();
 const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
-  mixin;
+  useCounterMixin();
 
-const rows = ref<DisciplineDetail[]>([]);
-const rowsData = ref<DisciplineDetail[]>([]);
-const idByRow = ref<string>("");
-const filter = ref<string>("");
-const rowsHistory = ref<DisciplineDetail[]>([]);
-const rowsHistoryData = ref<DisciplineDetail[]>([]);
 const mode = ref<boolean>($q.screen.gt.xs);
-
-const fileGroup = ref<string>("เอกสารวินัย");
-
-const modalHistory = ref<boolean>(false);
-/** ตัวแปรข้อมูล */
-
+const link = ref<string>(""); // ลิงค์สำหรับดึงข้อมูลประเภทโปรไฟล์
+const isLoading = ref<boolean>(false); // ใช้สำหรับโหลดข้อมูลหลัก
+const isLoadingHistory = ref<boolean>(false); // ใช้สำหรับโหลดข้อมูลประวัติการแก้ไข;
+const rows = ref<DisciplineDetail[]>([]); // ข้อมูลหลักที่จะแสดงในตาราง
+const rowsData = ref<DisciplineDetail[]>([]); // ข้อมูลหลักที่ใช้สำหรับค้นหา
+const idByRow = ref<string>(""); // ใช้เก็บ ID ของแถวที่ถูกเลือก
+const filter = ref<string>(""); // ตัวแปรสำหรับค้นหาในตาราง
+const rowsHistory = ref<DisciplineDetail[]>([]); // ข้อมูลประวัติการแก้ไข
+const rowsHistoryData = ref<DisciplineDetail[]>([]); // ข้อมูลประวัติการแก้ไขที่ใช้สำหรับค้นหา
+const fileGroup = ref<string>("เอกสารวินัย"); // กลุ่มไฟล์ที่ใช้สำหรับดาวน์โหลด
+const modalHistory = ref<boolean>(false); // ใช้สำหรับเปิด/ปิด modal ประวัติการแก้ไข
 const visibleColumns = ref<string[]>([
   "level",
   "detail",
@@ -142,15 +139,10 @@ const pagination = ref({
   sortBy: "lastUpdatedAt",
 });
 
-function onHistory(id: string) {
-  modalHistory.value = true;
-  idByRow.value = id;
-}
-
-/** get data */
-function getData() {
-  showLoader();
-  http
+/** ฟังก์ชันสำหรับดึงข้อมูลวินัย */
+async function getData() {
+  isLoading.value = true;
+  await http
     .get(config.API.dataUserDisciplineByType(link.value))
     .then((res) => {
       const data = res.data.result;
@@ -161,14 +153,25 @@ function getData() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      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.dataUserDisciplineHistoryByType(link.value, idByRow.value))
     .then((res) => {
       const data = res.data.result;
@@ -179,15 +182,28 @@ function getHistory() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoadingHistory.value = false;
     });
 }
 
+/**
+ * ฟังก์ชันดาวน์โหลดไฟล์เอกสารหลักฐาน
+ * @param id ID ของไฟล์ที่ต้องการดาวน์โหลด
+ * @param profileId ID ของโปรไฟล์
+ */
 async function onDownloadFile(id: string, profileId: string) {
-  const data = await getPathUploadFlie(fileGroup.value, profileId, id);
-  window.open(data.downloadUrl, "_blank");
+  showLoader();
+  try {
+    const data = await getPathUploadFlie(fileGroup.value, profileId, id);
+    window.open(data.downloadUrl, "_blank");
+  } catch (e) {
+    messageError($q, e);
+  } finally {
+    hideLoader();
+  }
 }
 
+/** ฟังก์ชันค้นหาข้อมูลในตาราง */
 function onSearch() {
   rows.value = onSearchDataTable(
     filter.value,
@@ -198,7 +214,7 @@ function onSearch() {
 
 onMounted(async () => {
   link.value = await dataStore.getProFileType();
-  getData();
+  await getData();
 });
 </script>
 <template>
@@ -237,6 +253,7 @@ onMounted(async () => {
         :display-value="$q.lang.table.columns"
       />
     </q-toolbar>
+
     <d-table
       flat
       dense
@@ -248,7 +265,9 @@ onMounted(async () => {
       :rows-per-page-options="[10, 25, 50, 100]"
       :visible-columns="visibleColumns"
       :virtual-scroll-sticky-size-start="48"
-      v-model:pagination="pagination"
+      :pagination="pagination"
+      :loading="isLoading"
+      row-key="id"
     >
       <template v-slot:header="props">
         <q-tr :props="props">
@@ -302,6 +321,7 @@ onMounted(async () => {
           </q-td>
         </q-tr>
       </template>
+
       <template v-else v-slot:item="props">
         <div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
           <q-card bordered flat>
@@ -349,6 +369,7 @@ onMounted(async () => {
       </template>
     </d-table>
   </div>
+
   <DialogHistory
     v-model:modal="modalHistory"
     :title="'ประวัติแก้ไขวินัย'"
@@ -357,6 +378,7 @@ onMounted(async () => {
     :rows-data="rowsHistoryData"
     :visibleColumns="visibleColumns"
     :columns="columns"
+    :is-loading="isLoadingHistory"
   />
 </template>
 <style scoped>
diff --git a/src/modules/10_registry/02_Government/03_Leave.vue b/src/modules/10_registry/02_Government/03_Leave.vue
index c959295..8202f19 100644
--- a/src/modules/10_registry/02_Government/03_Leave.vue
+++ b/src/modules/10_registry/02_Government/03_Leave.vue
@@ -1,34 +1,31 @@
 <script setup lang="ts">
-import { useCounterMixin } from "@/stores/mixin";
-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 { LeaveFormType } from "@/modules/10_registry/interface/index/Main";
+
 import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
 
-const link = ref<string>("");
 const $q = useQuasar();
-const mixin = useCounterMixin();
 const dataStore = useDataStore();
-const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
-  mixin;
-
-const idByRow = ref<string>("");
-const rows = ref<LeaveFormType[]>([]);
-const rowsData = ref<LeaveFormType[]>([]);
-const filter = ref<string>("");
-const rowsHistory = ref<any[]>([]);
-const rowsHistoryData = ref<any[]>([]);
+const { messageError, date2Thai, onSearchDataTable } = useCounterMixin();
 
 const mode = ref<boolean>($q.screen.gt.xs);
-
-const modalHistory = ref<boolean>(false);
-/** ตัวแปรข้อมูล */
-
+const link = ref<string>(""); // ลิงค์สำหรับดึงข้อมูลการลา
+const isLoading = ref<boolean>(false); // สำหรับการโหลดข้อมูลการลา
+const isLoadingHistory = ref<boolean>(false); // สำหรับการโหลดประวัติการลา
+const rows = ref<LeaveFormType[]>([]); // ข้อมูลการลา
+const rowsData = ref<LeaveFormType[]>([]); // ข้อมูลการลา (สำหรับค้นหา)
+const filter = ref<string>(""); // ค่าที่ใช้สำหรับค้นหาข้อมูลการลา
+const idByRow = ref<string>(""); // id ของแถวที่เลือกเพื่อดูประวัติการลา
+const rowsHistory = ref<LeaveFormType[]>([]); // ข้อมูลประวัติการลา
+const rowsHistoryData = ref<LeaveFormType[]>([]); // ข้อมูลประวัติการลา (สำหรับค้นหา)
+const modalHistory = ref<boolean>(false); // ตัวแปรสำหรับการเปิดปิด modal ประวัติการลา
 const visibleColumns = ref<string[]>([
   "no",
   "typeLeave",
@@ -39,7 +36,6 @@ const visibleColumns = ref<string[]>([
   "lastUpdateFullName",
   "lastUpdatedAt",
 ]);
-
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -136,7 +132,6 @@ const columns = ref<QTableProps["columns"]>([
 const pagination = ref({
   sortBy: "lastUpdatedAt",
 });
-
 const visibleColumnsHistory = ref<string[]>([
   "no",
   "typeLeave",
@@ -243,15 +238,10 @@ const columnsHistory = ref<QTableProps["columns"]>([
   },
 ]);
 
-function onHistory(id: string) {
-  modalHistory.value = true;
-  idByRow.value = id;
-}
-
-/** get data */
-function getData() {
-  showLoader();
-  http
+/** ฟังก์ชันสำหรับดึงข้อมูลการลา */
+async function getData() {
+  isLoading.value = true;
+  await http
     .get(config.API.dataUserLeaveByType(link.value))
     .then((res) => {
       const data = res.data.result;
@@ -275,14 +265,25 @@ function getData() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      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.dataUserLeaveHistoryByType(link.value, idByRow.value))
     .then((res) => {
       const data = res.data.result;
@@ -306,10 +307,15 @@ function getHistory() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoadingHistory.value = false;
     });
 }
 
+/**
+ * ฟังก์ชันสำหรับแสดงสถานะการลา
+ * @param val ค่าสถานะการลา
+ * @return สถานะการลาในรูปแบบข้อความ
+ */
 function statusLeave(val: string) {
   switch (val) {
     case "waitting":
@@ -325,6 +331,11 @@ function statusLeave(val: string) {
   }
 }
 
+/**
+ * ฟังก์ชันสำหรับแปลงช่วงวันที่เป็นรูปแบบไทย
+ * @param val ช่วงวันที่ที่ต้องการแปลงเป็นรูปแบบไทย
+ * @return ช่วงวันที่ในรูปแบบไทย
+ */
 function dateThaiRange(val: [Date, Date]) {
   if (val === null) {
   } else if (date2Thai(val[0]) === date2Thai(val[1])) {
@@ -334,6 +345,7 @@ function dateThaiRange(val: [Date, Date]) {
   }
 }
 
+/** ฟังก์ชันสำหรับค้นหาข้อมูลในตาราง */
 function onSearch() {
   rows.value = onSearchDataTable(
     filter.value,
@@ -344,11 +356,10 @@ function onSearch() {
 
 onMounted(async () => {
   link.value = await dataStore.getProFileType();
-  getData();
+  await getData();
 });
 </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">การลา</span>
@@ -383,6 +394,7 @@ onMounted(async () => {
         :display-value="$q.lang.table.columns"
       />
     </q-toolbar>
+
     <d-table
       flat
       dense
@@ -394,7 +406,9 @@ onMounted(async () => {
       :rows-per-page-options="[10, 25, 50, 100]"
       :visible-columns="visibleColumns"
       :virtual-scroll-sticky-size-start="48"
-      v-model:pagination="pagination"
+      :pagination="pagination"
+      :loading="isLoading"
+      row-key="id"
     >
       <template v-slot:header="props">
         <q-tr :props="props">
@@ -494,6 +508,7 @@ onMounted(async () => {
       </template>
     </d-table>
   </div>
+
   <DialogHistory
     v-model:modal="modalHistory"
     :title="'ประวัติแก้ไขการลา'"
@@ -503,6 +518,7 @@ onMounted(async () => {
     :visibleColumns="visibleColumnsHistory"
     :columns="columnsHistory"
     :type="'Leave'"
+    :is-loading="isLoadingHistory"
   />
 </template>
 <style scoped>
diff --git a/src/modules/10_registry/02_Government/04_Duty.vue b/src/modules/10_registry/02_Government/04_Duty.vue
index e1efc99..4a6ff94 100644
--- a/src/modules/10_registry/02_Government/04_Duty.vue
+++ b/src/modules/10_registry/02_Government/04_Duty.vue
@@ -1,35 +1,35 @@
 <script setup lang="ts">
-import { useCounterMixin } from "@/stores/mixin";
+import { ref, onMounted } from "vue";
 import { useQuasar, type QTableProps } from "quasar";
-import { ref, reactive, onMounted } from "vue";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
 import { useDataStore } from "@/stores/data";
 import { useRegistryDataStore } from "@/modules/10_registry/store/Main";
 
 import type { DutyFormType } from "@/modules/10_registry/interface/index/Main";
-//history dialog
+
 import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
 
-const link = ref<string>("");
-const dataStore = useDataStore();
-const idByRow = ref<string>("");
-const rows = ref<DutyFormType[]>([]);
-const rowsData = ref<DutyFormType[]>([]);
-const filter = ref<string>("");
-const rowsHistory = ref<DutyFormType[]>([]);
-const rowsHistoryData = ref<DutyFormType[]>([]);
 const $q = useQuasar();
-const mode = ref<any>($q.screen.gt.xs);
-const mixin = useCounterMixin();
+const dataStore = useDataStore();
 const { getPathUploadFlie } = useRegistryDataStore();
 const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
-  mixin;
-
-const modalHistory = ref<boolean>(false);
-/** ตัวแปรข้อมูล */
+  useCounterMixin();
 
+const mode = ref<any>($q.screen.gt.xs); // true = desktop, false = mobile
+const link = ref<string>(""); // ลิงค์สำหรับดึงข้อมูลตามประเภทของผู้ใช้
+const isLoading = ref<boolean>(false); // ตัวแปรสำหรับแสดงสถานะการโหลดข้อมูล
+const isLoadingHistory = ref<boolean>(false); // ตัวแปรสำหรับแสดงสถานะการโหลดประวัติ
+const rows = ref<DutyFormType[]>([]); // ข้อมูลที่ใช้สำหรับแสดงในตาราง
+const rowsData = ref<DutyFormType[]>([]); // ข้อมูลที่ใช้สำหรับค้นหาในตาราง
+const filter = ref<string>(""); // ค่าที่ใช้สำหรับค้นหาในตาราง
+const idByRow = ref<string>(""); // id ของแถวที่เลือกเพื่อดึงประวัติ
+const rowsHistory = ref<DutyFormType[]>([]); // ข้อมูลที่ใช้สำหรับแสดงประวัติ
+const rowsHistoryData = ref<DutyFormType[]>([]); // ข้อมูลที่ใช้สำหรับค้นหาในประวัติ
+const modalHistory = ref<boolean>(false); // ตัวแปรสำหรับเปิด/ปิด modal ประวัติการแก้ไข
+const fileGroup = ref<string>("เอกสารปฏิบัติราชการพิเศษ"); // กลุ่มไฟล์สำหรับดาวน์โหลด
 const visibleColumns = ref<string[]>([
   "dateStart",
   "dateEnd",
@@ -137,7 +137,6 @@ const columns = ref<QTableProps["columns"]>([
 const pagination = ref({
   sortBy: "lastUpdatedAt",
 });
-
 const visibleColumnsHistory = ref<string[]>([
   "dateStart",
   "dateEnd",
@@ -243,17 +242,10 @@ const columnsHistory = ref<QTableProps["columns"]>([
   },
 ]);
 
-const fileGroup = ref<string>("เอกสารปฏิบัติราชการพิเศษ");
-
-function onHistory(id: string) {
-  modalHistory.value = true;
-  idByRow.value = id;
-}
-
-/** get data */
-function getData() {
-  showLoader();
-  http
+/** ฟังก์ชันสำหรับดึงข้อมูลปฏิบัติราชการ */
+async function getData() {
+  isLoading.value = true;
+  await http
     .get(config.API.dataUserDutyByType(link.value))
     .then((res) => {
       const data = res.data.result;
@@ -264,14 +256,25 @@ function getData() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      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.dataUserDutyHistoryByType(link.value, idByRow.value))
     .then((res) => {
       const data = res.data.result;
@@ -282,15 +285,28 @@ function getHistory() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoadingHistory.value = false;
     });
 }
 
+/**
+ * ฟังก์ชันสำหรับดาวน์โหลดไฟล์
+ * @param id ID ของแถวที่เลือก
+ * @param profileId ID ของโปรไฟล์ที่เลือก
+ */
 async function onDownloadFile(id: string, profileId: string) {
-  const data = await getPathUploadFlie(fileGroup.value, profileId, id);
-  window.open(data.downloadUrl, "_blank");
+  showLoader();
+  try {
+    const data = await getPathUploadFlie(fileGroup.value, profileId, id);
+    window.open(data.downloadUrl, "_blank");
+  } catch (e) {
+    messageError($q, e);
+  } finally {
+    hideLoader();
+  }
 }
 
+/** ฟังก์ชันสำหรับค้นหาข้อมูลในตาราง*/
 function onSearch() {
   rows.value = onSearchDataTable(
     filter.value,
@@ -301,11 +317,10 @@ function onSearch() {
 
 onMounted(async () => {
   link.value = await dataStore.getProFileType();
-  getData();
+  await getData();
 });
 </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"
@@ -342,6 +357,7 @@ onMounted(async () => {
         :display-value="$q.lang.table.columns"
       />
     </q-toolbar>
+
     <d-table
       flat
       dense
@@ -353,7 +369,9 @@ onMounted(async () => {
       :rows-per-page-options="[10, 25, 50, 100]"
       :visible-columns="visibleColumns"
       :virtual-scroll-sticky-size-start="48"
-      v-model:pagination="pagination"
+      :pagination="pagination"
+      :loading="isLoading"
+      row-key="id"
     >
       <template v-slot:header="props">
         <q-tr :props="props">
@@ -464,6 +482,7 @@ onMounted(async () => {
     :rows-data="rowsHistoryData"
     :visibleColumns="visibleColumnsHistory"
     :columns="columnsHistory"
+    :is-loading="isLoadingHistory"
   />
 </template>
 <style scoped>
diff --git a/src/modules/10_registry/02_Government/05_Actposition.vue b/src/modules/10_registry/02_Government/05_Actposition.vue
index 4e5ca14..5dff8e9 100644
--- a/src/modules/10_registry/02_Government/05_Actposition.vue
+++ b/src/modules/10_registry/02_Government/05_Actposition.vue
@@ -1,36 +1,35 @@
 <script setup lang="ts">
-import { useCounterMixin } from "@/stores/mixin";
-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 { DutyFormType } from "@/modules/10_registry/interface/index/Main";
-//history dialog
+
+/** import components */
 import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
 
-const link = ref<string>("");
-const dataStore = useDataStore();
-const idByRow = ref<string>("");
-const rows = ref<DutyFormType[]>([]);
-const rowsData = ref<DutyFormType[]>([]);
-const filter = ref<string>("");
-const rowsHistory = ref<DutyFormType[]>([]);
-const rowsHistoryData = ref<DutyFormType[]>([]);
 const $q = useQuasar();
-const mode = ref<any>($q.screen.gt.xs);
-const mixin = useCounterMixin();
-const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
-  mixin;
+const dataStore = useDataStore();
+const { messageError, date2Thai, onSearchDataTable } = useCounterMixin();
 
-const modalHistory = ref<boolean>(false);
+const mode = ref<boolean>($q.screen.gt.xs); // true if screen is larger than xs
+const link = ref<string>(""); // ลิงค์สำหรับดึงข้อมูลตามประเภทของผู้ใช้
+const isLoading = ref<boolean>(false); // ตัวแปรสำหรับบอกสถานะการโหลดข้อมูล
+const isLoadingHistory = ref<boolean>(false); // ตัวแปรสำหรับบอกสถานะการโหลดประวัติ
+const rows = ref<DutyFormType[]>([]); // ข้อมูลที่แสดงในตาราง
+const rowsData = ref<DutyFormType[]>([]); // ข้อมูลดิบที่ใช้สำหรับการค้นหา
+const filter = ref<string>(""); // ค่าที่ใช้สำหรับการค้นหา
+const idByRow = ref<string>(""); // id ของแถวที่ถูกเลือกเพื่อดูประวัติ
+const rowsHistory = ref<DutyFormType[]>([]); // ข้อมูลประวัติการแก้ไข
+const rowsHistoryData = ref<DutyFormType[]>([]); // ข้อมูลดิบที่ใช้สำหรับการค้นหาในประวัติ
+const modalHistory = ref<boolean>(false); // แสดงหรือซ่อน modal ประวัติการแก้ไข
 const checkType = ref<boolean>(
   dataStore.officerType == "OFFICER" ? true : false
 );
-/** ตัวแปรข้อมูล */
-
 const visibleColumns = ref<String[]>([
   "dateStart",
   "dateEnd",
@@ -103,10 +102,6 @@ const columns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
-const pagination = ref({
-  sortBy: "lastUpdatedAt",
-});
-
 const visibleColumnsHistory = ref<string[]>([
   "dateStart",
   "dateEnd",
@@ -116,7 +111,6 @@ const visibleColumnsHistory = ref<string[]>([
   "lastUpdateFullName",
   "lastUpdatedAt",
 ]);
-
 const columnsHistory = ref<QTableProps["columns"]>([
   {
     name: "dateStart",
@@ -188,16 +182,14 @@ const columnsHistory = ref<QTableProps["columns"]>([
     format: (v) => date2Thai(v, false, true),
   },
 ]);
+const pagination = ref({
+  sortBy: "lastUpdatedAt",
+});
 
-function onHistory(id: string) {
-  modalHistory.value = true;
-  idByRow.value = id;
-}
-
-/** get data */
-function getData() {
-  showLoader();
-  http
+/** ฟังก์ชันสำหรับดึงข้อมูล */
+async function getData() {
+  isLoading.value = true;
+  await http
     .get(config.API.dataUserActpositionByType(link.value))
     .then((res) => {
       const data = res.data.result;
@@ -208,14 +200,25 @@ function getData() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      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.dataUserActpositionHistoryByType(link.value, idByRow.value))
     .then((res) => {
       const data = res.data.result;
@@ -226,10 +229,11 @@ function getHistory() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoadingHistory.value = false;
     });
 }
 
+/** ฟังก์ชันสำหรับค้นหาข้อมูล */
 function onSearch() {
   rows.value = onSearchDataTable(
     filter.value,
@@ -240,12 +244,11 @@ function onSearch() {
 
 onMounted(async () => {
   link.value = await dataStore.getProFileType();
-  getData();
+  await getData();
 });
 </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"
@@ -282,6 +285,7 @@ onMounted(async () => {
         :display-value="$q.lang.table.columns"
       />
     </q-toolbar>
+
     <d-table
       flat
       dense
@@ -293,7 +297,9 @@ onMounted(async () => {
       :rows-per-page-options="[10, 25, 50, 100]"
       :visible-columns="visibleColumns"
       :virtual-scroll-sticky-size-start="48"
-      v-model:pagination="pagination"
+      :pagination="pagination"
+      :loading="isLoading"
+      row-key="id"
     >
       <template v-slot:header="props">
         <q-tr :props="props">
@@ -363,6 +369,7 @@ onMounted(async () => {
       </template>
     </d-table>
   </div>
+
   <DialogHistory
     v-model:modal="modalHistory"
     :title="'ประวัติแก้ไขรักษาการในตำแหน่ง'"
@@ -371,6 +378,7 @@ onMounted(async () => {
     :rows-data="rowsHistoryData"
     :visibleColumns="visibleColumnsHistory"
     :columns="columnsHistory"
+    :is-loading="isLoadingHistory"
   />
 </template>
 
diff --git a/src/modules/10_registry/02_Government/06_Assistance.vue b/src/modules/10_registry/02_Government/06_Assistance.vue
index aac3697..ac7adc5 100644
--- a/src/modules/10_registry/02_Government/06_Assistance.vue
+++ b/src/modules/10_registry/02_Government/06_Assistance.vue
@@ -1,33 +1,34 @@
 <script setup lang="ts">
-import { useCounterMixin } from "@/stores/mixin";
-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 { DutyFormType } from "@/modules/10_registry/interface/index/Main";
-//history dialog
+
+/** import components */
 import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
 
+const $q = useQuasar();
+
 const link = ref<string>("");
 const dataStore = useDataStore();
-const idByRow = ref<string>("");
-const rows = ref<DutyFormType[]>([]);
-const rowsData = ref<DutyFormType[]>([]);
-const filter = ref<string>("");
-const rowsHistory = ref<DutyFormType[]>([]);
-const rowsHistoryData = ref<DutyFormType[]>([]);
-const $q = useQuasar();
-const mode = ref<any>($q.screen.gt.xs);
-const mixin = useCounterMixin();
 const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
-  mixin;
-
-const modalHistory = ref<boolean>(false);
-/** ตัวแปรข้อมูล */
+  useCounterMixin();
 
+const mode = ref<boolean>($q.screen.gt.xs); // โหมดแสดงผล ถ้าเป็นมือถือจะเป็น false;
+const isLoading = ref<boolean>(false); // สถานะการโหลดข้อมูล
+const isLoadingHistory = ref<boolean>(false); // สถานะการโหลดประวัติข้อมูล
+const rows = ref<DutyFormType[]>([]); // ข้อมูลตารางหลัก
+const rowsData = ref<DutyFormType[]>([]); // ข้อมูลตารางหลักสำหรับค้นหา
+const filter = ref<string>(""); // ตัวแปรค้นหา
+const idByRow = ref<string>(""); // ตัวแปรเก็บ id ของแถวที่เลือกเพื่อดูประวัติ
+const rowsHistory = ref<DutyFormType[]>([]); // ข้อมูลประวัติการแก้ไข
+const rowsHistoryData = ref<DutyFormType[]>([]); // ข้อมูลประวัติการแก้ไขสำหรับค้นหา
+const modalHistory = ref<boolean>(false); // ตัวแปรสำหรับเปิดปิด modal ประวัติการแก้ไข
 const visibleColumns = ref<string[]>([
   "commandName",
   "agency",
@@ -135,7 +136,6 @@ const columns = ref<QTableProps["columns"]>([
 const pagination = ref({
   sortBy: "lastUpdatedAt",
 });
-
 const visibleColumnsHistory = ref<string[]>([
   "commandName",
   "agency",
@@ -241,15 +241,10 @@ const columnsHistory = ref<QTableProps["columns"]>([
   },
 ]);
 
-function onHistory(id: string) {
-  modalHistory.value = true;
-  idByRow.value = id;
-}
-
-/** get data */
-function getData() {
-  showLoader();
-  http
+/** ฟังก์ชันดึงข้อมูลช่วยราชการ */
+async function getData() {
+  isLoading.value = true;
+  await http
     .get(config.API.dataUserAssistanceByType(link.value))
     .then((res) => {
       const data = res.data.result;
@@ -260,14 +255,25 @@ function getData() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      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.dataUserAssistanceHistoryByType(link.value, idByRow.value))
     .then((res) => {
       const data = res.data.result;
@@ -278,13 +284,14 @@ function getHistory() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoadingHistory.value = false;
     });
 }
 
 /**
  * ฟังก์ชันโหลไฟลเอกสารหลักฐาน
  * @param id รายการที่ต้องการโหลด
+ * @param profileId ID ของโปรไฟล์
  */
 async function onDownloadFile(id: string, profileId: string) {
   showLoader();
@@ -310,6 +317,7 @@ async function onDownloadFile(id: string, profileId: string) {
     });
 }
 
+/** ฟังก์ชันค้นหาข้อมูลในตาราง */
 function onSearch() {
   rows.value = onSearchDataTable(
     filter.value,
@@ -320,11 +328,10 @@ function onSearch() {
 
 onMounted(async () => {
   link.value = await dataStore.getProFileType();
-  getData();
+  await getData();
 });
 </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">ช่วยราชการ</span>
@@ -359,6 +366,7 @@ onMounted(async () => {
         :display-value="$q.lang.table.columns"
       />
     </q-toolbar>
+
     <d-table
       flat
       dense
@@ -370,7 +378,9 @@ onMounted(async () => {
       :rows-per-page-options="[10, 25, 50, 100]"
       :visible-columns="visibleColumns"
       :virtual-scroll-sticky-size-start="48"
-      v-model:pagination="pagination"
+      :pagination="pagination"
+      :loading="isLoading"
+      row-key="id"
     >
       <template v-slot:header="props">
         <q-tr :props="props">
@@ -469,6 +479,7 @@ onMounted(async () => {
       </template>
     </d-table>
   </div>
+
   <DialogHistory
     v-model:modal="modalHistory"
     :title="'ประวัติแก้ไขรายการช่วยราชการ'"
@@ -477,6 +488,7 @@ onMounted(async () => {
     :rows-data="rowsHistoryData"
     :visibleColumns="visibleColumnsHistory"
     :columns="columnsHistory"
+    :is-loading="isLoadingHistory"
   />
 </template>
 <style scoped>
diff --git a/src/modules/10_registry/02_Government/07_Position.vue b/src/modules/10_registry/02_Government/07_Position.vue
index 17486b4..8ee5ed1 100644
--- a/src/modules/10_registry/02_Government/07_Position.vue
+++ b/src/modules/10_registry/02_Government/07_Position.vue
@@ -1,49 +1,48 @@
 <script setup lang="ts">
 import { useQuasar, type QTableColumn } from "quasar";
-import { ref, onMounted, computed } from "vue";
+import { ref, onMounted, computed, reactive } from "vue";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import { useDataStore } from "@/stores/data";
-import { useGovernmentPosDataStore } from "@/modules/10_registry/store/Position";
 
 import type {
   SalaryFormType,
   CardDataPos,
 } from "@/modules/10_registry/interface/index/Main";
-import type { DataCommandCode } from "@/modules/10_registry/interface/response/Main";
 
-//history dialog
+/**import components*/
 import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
 
-const link = ref<string>("");
 const $q = useQuasar();
 const dataPerson = useDataStore();
-const store = useGovernmentPosDataStore();
-const mixin = useCounterMixin();
 const {
-  showLoader,
-  hideLoader,
   messageError,
   date2Thai,
   onSearchDataTable,
   formatDatePosition,
   findOrgName,
   findOrgNameHtml,
-} = mixin;
+} = useCounterMixin();
 
-const idByRow = ref<string>("");
-const rows = ref<SalaryFormType[]>([]);
-const rowsData = ref<SalaryFormType[]>([]);
-const filter = ref<string>("");
-const rowsHistory = ref<SalaryFormType[]>([]);
-const rowsHistoryData = ref<SalaryFormType[]>([]);
-const mode = ref<boolean>($q.screen.gt.xs);
 const checkType = ref<boolean>(
   dataPerson.officerType == "OFFICER" ? true : false
-);
-const modalHistory = ref<boolean>(false);
+); // เช็คประเภทผู้ใช้งาน
+const mode = ref<boolean>($q.screen.gt.xs); // เช็คขนาดหน้าจอ ถ้าเป็นขนาดใหญ่กว่า xs จะเป็นโหมดแสดงตาราง
+const isLoading = reactive({
+  position: false, // เช็คสถานะการโหลดข้อมูลตำแหน่ง
+  tenure: false, // เช็คสถานะการโหลดข้อมูลระยะเวลาดำรงตำแหน่ง
+});
+const isLoadingHistory = ref<boolean>(false); // เช็คสถานะการโหลดข้อมูลประวัติ
+const link = ref<string>(""); // link สำหรับดึงข้อมูล
+const rows = ref<SalaryFormType[]>([]); // ข้อมูลตำแหน่ง
+const rowsData = ref<SalaryFormType[]>([]); // ข้อมูลตำแหน่งสำหรับค้นหา
+const idByRow = ref<string>(""); // id ของแถวที่ต้องการดูประวัติ
+const filter = ref<string>(""); // ค่าที่กรอกใน input ค้นหา
+const rowsHistory = ref<SalaryFormType[]>([]); // ข้อมูลประวัติการแก้ไขตำแหน่ง
+const rowsHistoryData = ref<SalaryFormType[]>([]); // ข้อมูลประวัติการแก้ไขตำแหน่งสำหรับค้นหา
+const modalHistory = ref<boolean>(false); // เปิดปิด dialog ประวัติ
 const cardData = ref<CardDataPos[]>([
   {
     label: "ระยะเวลาดำรงตำแหน่งในสายงาน",
@@ -58,7 +57,6 @@ const cardData = ref<CardDataPos[]>([
     data: [],
   },
 ]);
-
 const baseColumns = ref<QTableColumn[]>([
   {
     name: "commandDateAffect",
@@ -315,7 +313,6 @@ const baseVisibleColumns = ref<string[]>([
   "lastUpdateFullName",
   "lastUpdatedAt",
 ]);
-
 const columns = computed<QTableColumn[]>(() => {
   if (!checkType.value) {
     if (baseColumns.value) {
@@ -349,59 +346,9 @@ const columnsHistory = computed<QTableColumn[]>(() => {
 });
 const visibleColumnsHistory = ref<string[]>(baseVisibleColumns.value);
 
-/** เปิด dialog ประวัติ*/
-function onHistory(id: string) {
-  modalHistory.value = true;
-  idByRow.value = id;
-}
-
-/** get data */
-function getData() {
-  showLoader();
-  http
-    .get(config.API.dataUserPosition(link.value))
-    .then((res) => {
-      const data = res.data.result;
-      rows.value = data;
-      rowsData.value = data;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-/** get history */
-function getHistory() {
-  showLoader();
-  http
-    .get(config.API.dataUserSalaryHistoryByType(link.value, idByRow.value))
-    .then((res) => {
-      const data = res.data.result;
-      rowsHistory.value = data;
-      rowsHistoryData.value = data;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-function onSearch() {
-  rows.value = onSearchDataTable(
-    filter.value,
-    rowsData.value,
-    columns.value ? columns.value : []
-  );
-}
-
+/** ฟังก์ชันดึงข้อมูลระยะเวลาดำรงตำแหน่ง */
 async function fetchDataTenure() {
-  console.log(link.value);
-
+  isLoading.tenure = true;
   await http
     .get(config.API.salaryTenurePosition(link.value))
     .then((res) => {
@@ -440,40 +387,78 @@ async function fetchDataTenure() {
     })
     .catch((err) => {
       messageError($q, err);
+    })
+    .finally(() => {
+      isLoading.tenure = false;
     });
 }
 
-/** function fetch ข้อมูลประเภทคำสั่ง*/
-async function fetchDataCommandCode() {
-  if (store.commandCodeData.length > 0) return false;
+/** ฟังก์ชันดึงข้อมูล */
+async function getData() {
+  isLoading.position = true;
   await http
-    .get(config.API.orgCommandCode)
+    .get(config.API.dataUserPosition(link.value))
     .then((res) => {
       const data = res.data.result;
-      const DataCommandCode = data.filter((e: DataCommandCode) =>
-        store.positionCode.includes(e.code)
-      );
-
-      const options = DataCommandCode.map((e: DataCommandCode) => ({
-        id: e.code.toString(),
-        name: e.name,
-      }));
-
-      store.commandCodeData = options;
+      rows.value = data;
+      rowsData.value = data;
     })
-    .catch((err) => {
-      messageError($q, err);
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      isLoading.position = false;
     });
 }
 
+/**
+ * เปิด dialog ประวัติ
+ * @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.dataUserSalaryHistoryByType(link.value, idByRow.value))
+    .then((res) => {
+      const data = res.data.result;
+      rowsHistory.value = data;
+      rowsHistoryData.value = data;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      isLoadingHistory.value = false;
+    });
+}
+
+/** ฟังก์ชันค้นหาข้อมูลในตาราง */
+function onSearch() {
+  rows.value = onSearchDataTable(
+    filter.value,
+    rowsData.value,
+    columns.value ? columns.value : []
+  );
+}
+
 onMounted(async () => {
-  link.value = await dataPerson.getProFileType();
-  if (link.value === "-employee") {
-    cardData.value.splice(2, 1);
+  try {
+    link.value = await dataPerson.getProFileType();
+    if (link.value === "-employee") {
+      cardData.value.splice(2, 1);
+    }
+    await Promise.all([getData(), fetchDataTenure()]);
+  } catch (error) {
+    messageError($q, error);
   }
-  getData();
-  fetchDataTenure();
-  fetchDataCommandCode();
 });
 </script>
 
@@ -492,7 +477,15 @@ onMounted(async () => {
           </div>
           <div class="col-12"><q-separator /></div>
           <q-card-section class="q-pt-none" style="min-height: 200px">
-            <li v-for="data in item.data">{{ data.name }} {{ data.time }}</li>
+            <q-skeleton
+              v-if="isLoading.tenure"
+              type="text"
+              class="q-mb-sm"
+              style="width: 100%"
+            />
+            <li v-else v-for="data in item.data">
+              {{ data.name }} {{ data.time }}
+            </li>
           </q-card-section>
         </q-card>
       </div>
@@ -543,6 +536,9 @@ onMounted(async () => {
         :rows-per-page-options="[10, 25, 50, 100]"
         :visible-columns="visibleColumns"
         :virtual-scroll-sticky-size-start="48"
+        :isLoading="isLoading.position"
+        row-key="id"
+        :pagination="{ page: 1, rowsPerPage: 10 }"
       >
         <template v-slot:header="props">
           <q-tr :props="props">
@@ -664,6 +660,7 @@ onMounted(async () => {
     :rows-data="rowsHistoryData"
     :visibleColumns="visibleColumnsHistory"
     :columns="columnsHistory"
+    :is-loading="isLoadingHistory"
   />
 </template>
 <style scoped>
diff --git a/src/modules/10_registry/03_Salary/01_Salary.vue b/src/modules/10_registry/03_Salary/01_Salary.vue
index efe717d..3ec4a9f 100644
--- a/src/modules/10_registry/03_Salary/01_Salary.vue
+++ b/src/modules/10_registry/03_Salary/01_Salary.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { useQuasar, type QTableColumn } from "quasar";
 import { ref, onMounted, computed } from "vue";
+import { useQuasar, type QTableColumn } from "quasar";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -9,40 +9,32 @@ import { useDataStore } from "@/stores/data";
 
 import type { SalaryFormType } from "@/modules/10_registry/interface/index/Main";
 
-//history dialog
 import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
 
-const link = ref<string>("");
 const $q = useQuasar();
 const dataPerson = useDataStore();
-const mixin = useCounterMixin();
 const {
-  showLoader,
-  hideLoader,
   messageError,
   date2Thai,
   onSearchDataTable,
   findOrgName,
   findOrgNameHtml,
-} = mixin;
-
-const idByRow = ref<string>("");
-const rows = ref<SalaryFormType[]>([]);
-const rowsData = ref<SalaryFormType[]>([]);
-const filter = ref<string>("");
-const rowsHistory = ref<SalaryFormType[]>([]);
-const rowsHistoryData = ref<SalaryFormType[]>([]);
-const mode = ref<boolean>($q.screen.gt.xs);
-const checkType = ref<boolean>(
-  dataPerson.officerType == "OFFICER" ? true : false
-);
-const modalHistory = ref<boolean>(false);
-/** ตัวแปรข้อมูล */
+} = useCounterMixin();
 
+const mode = ref<boolean>($q.screen.gt.xs); //โหมดแสดงผล
+const link = ref<string>(""); //ลิงค์ประเภทข้อมูล
+const isLoading = ref<boolean>(false); //โหลดข้อมูล
+const isLoadingHistory = ref<boolean>(false); //โหลดประวัติ
+const rows = ref<SalaryFormType[]>([]); //ข้อมูลตาราง
+const rowsData = ref<SalaryFormType[]>([]); //ข้อมูล (ค้นหา)
+const filter = ref<string>(""); //ตัวกรองข้อมูล
+const idByRow = ref<string>(""); //id ของแถวที่เลือก
+const rowsHistory = ref<SalaryFormType[]>([]); //ข้อมูลประวัติ
+const rowsHistoryData = ref<SalaryFormType[]>([]); //ข้อมูลประวัติ (ค้นหา)
+const modalHistory = ref<boolean>(false); //เปิดปิด dialog ประวัติ
 const salaryText = computed(() => {
   return link.value == "" ? "เงินเดือน" : "ค่าจ้าง";
 });
-
 const baseColumns = ref<QTableColumn[]>([
   {
     name: "commandDateAffect",
@@ -330,20 +322,6 @@ const visibleColumns = ref<string[]>([
   "lastUpdateFullName",
   "lastUpdatedAt",
 ]);
-
-const columns = computed(() => {
-  if (link.value === "-employee") {
-    if (baseColumns.value) {
-      return baseColumns.value.filter(
-        (column) =>
-          column.name !== "positionSalaryAmount" &&
-          column.name !== "mouthSalaryAmount"
-      );
-    }
-  }
-  return baseColumns.value;
-});
-
 const visibleColumnsHistory = ref<string[]>([
   "commandDateAffect",
   "posNumCodeSit",
@@ -363,20 +341,6 @@ const visibleColumnsHistory = ref<string[]>([
   "lastUpdateFullName",
   "lastUpdatedAt",
 ]);
-
-const columnsHistory = computed(() => {
-  if (link.value === "-employee") {
-    if (baseColumnsHistory.value) {
-      return baseColumnsHistory.value.filter(
-        (column: QTableColumn) =>
-          column.name !== "positionSalaryAmount" &&
-          column.name !== "mouthSalaryAmount"
-      );
-    }
-  }
-  return baseColumns.value;
-});
-
 const baseColumnsHistory = ref<QTableColumn[]>([
   {
     name: "commandDateAffect",
@@ -639,16 +603,36 @@ const baseColumnsHistory = ref<QTableColumn[]>([
   },
 ]);
 
-/** เปิด dialog ประวัติ*/
-function onHistory(id: string) {
-  modalHistory.value = true;
-  idByRow.value = id;
-}
+const columns = computed(() => {
+  if (link.value === "-employee") {
+    if (baseColumns.value) {
+      return baseColumns.value.filter(
+        (column) =>
+          column.name !== "positionSalaryAmount" &&
+          column.name !== "mouthSalaryAmount"
+      );
+    }
+  }
+  return baseColumns.value;
+});
 
-/** get data */
-function getData() {
-  showLoader();
-  http
+const columnsHistory = computed(() => {
+  if (link.value === "-employee") {
+    if (baseColumnsHistory.value) {
+      return baseColumnsHistory.value.filter(
+        (column: QTableColumn) =>
+          column.name !== "positionSalaryAmount" &&
+          column.name !== "mouthSalaryAmount"
+      );
+    }
+  }
+  return baseColumns.value;
+});
+
+/*** ฟังก์ชันสำหรับดึงข้อมูล */
+async function getData() {
+  isLoading.value = true;
+  await http
     .get(config.API.dataUserSalaryByType(link.value))
     .then((res) => {
       const data = res.data.result;
@@ -659,13 +643,24 @@ function getData() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoading.value = false;
     });
 }
 
-/** get history */
-function getHistory() {
-  showLoader();
+/**
+ * ฟังก์ชันสำหรับเปิด dialog ประวัติการแก้ไข
+ * @param id id ของแถวที่เลือก
+ */
+function onHistory(id: string) {
+  modalHistory.value = true;
+  idByRow.value = id;
+}
+
+/** ฟังก์ชันสำหรับดึงข้อมูลประวัติการแก้ไข */
+async function getHistory() {
+  isLoadingHistory.value = true;
+  rowsHistory.value = [];
+  rowsHistoryData.value = [];
   http
     .get(config.API.dataUserSalaryHistoryByType(link.value, idByRow.value))
     .then((res) => {
@@ -677,10 +672,11 @@ function getHistory() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoadingHistory.value = false;
     });
 }
 
+/** ฟังก์ชันสำหรับค้นหาข้อมูลในตาราง */
 function onSearch() {
   rows.value = onSearchDataTable(
     filter.value,
@@ -691,11 +687,10 @@ function onSearch() {
 
 onMounted(async () => {
   link.value = await dataPerson.getProFileType();
-  getData();
+  await getData();
 });
 </script>
 <template>
-  <!-- v-if="mode" -->
   <div class="col-12">
     <q-toolbar class="q-px-none">
       <span class="text-blue-6 text-weight-bold text-body1">{{
@@ -732,17 +727,21 @@ onMounted(async () => {
         :display-value="$q.lang.table.columns"
       />
     </q-toolbar>
+
     <d-table
       flat
       dense
       bordered
       virtual-scroll
+      row-key="id"
       :rows="rows.length !== 0 ? rows : []"
       :columns="columns"
       :grid="!mode"
       :rows-per-page-options="[10, 25, 50, 100]"
       :visible-columns="visibleColumns"
       :virtual-scroll-sticky-size-start="48"
+      :loading="isLoading"
+      :pagination="{ page: 1, rowsPerPage: 10 }"
     >
       <template v-slot:header="props">
         <q-tr :props="props">
@@ -766,7 +765,11 @@ onMounted(async () => {
             <div v-else-if="col.name == 'status'">
               {{ props.row.status ? props.row.status : "-" }}
             </div>
-            <div v-else-if="col.name == 'organization'" class="text-html">
+            <div
+              v-else-if="col.name == 'organization'"
+              class="text-html"
+              style="width: 200px"
+            >
               {{
                 props.row
                   ? findOrgNameHtml({
@@ -851,6 +854,7 @@ onMounted(async () => {
       </template>
     </d-table>
   </div>
+
   <DialogHistory
     v-model:modal="modalHistory"
     :title="`ประวัติแก้ไข${salaryText}`"
@@ -859,8 +863,10 @@ onMounted(async () => {
     :rows-data="rowsHistoryData"
     :visibleColumns="visibleColumnsHistory"
     :columns="columnsHistory"
+    :is-loading="isLoadingHistory"
   />
 </template>
+
 <style scoped>
 .absolute_button {
   position: absolute;
diff --git a/src/modules/10_registry/03_Salary/02_Nopaid.vue b/src/modules/10_registry/03_Salary/02_Nopaid.vue
index aa4d72f..a74d946 100644
--- a/src/modules/10_registry/03_Salary/02_Nopaid.vue
+++ b/src/modules/10_registry/03_Salary/02_Nopaid.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { ref, onMounted, computed } from "vue";
-import { useCounterMixin } from "@/stores/mixin";
 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 { useRegistryDataStore } from "@/modules/10_registry/store/Main";
 
@@ -12,26 +12,27 @@ import type { NopaidFormType } from "@/modules/10_registry/interface/index/Main"
 
 import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
 
-const link = ref<string>("");
-const dataPerson = useDataStore();
-const idByRow = ref<string>("");
-const rows = ref<NopaidFormType[]>([]);
-const rowsData = ref<NopaidFormType[]>([]);
-const filter = ref<string>("");
-const rowsHistory = ref<NopaidFormType[]>([]);
-const rowsHistoryData = ref<NopaidFormType[]>([]);
 const $q = useQuasar();
-const mode = ref<boolean>($q.screen.gt.xs);
-const mixin = useCounterMixin();
-const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
-  mixin;
+const dataPerson = useDataStore();
 const { getPathUploadFlie } = useRegistryDataStore();
+const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
+  useCounterMixin();
 
-const modalHistory = ref<boolean>(false);
+const mode = ref<boolean>($q.screen.gt.xs); //โหมดการแสดงผล
+const link = ref<string>(""); //ประเภทของโปรไฟล์
+const isLoading = ref<boolean>(false); //สถานะการโหลดข้อมูล
+const isLoadingHistory = ref<boolean>(false); //สถานะการโหลดข้อมูลประวัติ
+const rows = ref<NopaidFormType[]>([]); //ข้อมูลที่แสดงในตาราง
+const rowsData = ref<NopaidFormType[]>([]); //ข้อมูลที่ใช้สำหรับค้นหาในตาราง
+const filter = ref<string>(""); //ตัวกรองสำหรับค้นหาในตาราง
+const idByRow = ref<string>(""); // รหัสของแถวที่ถูกเลือกสำหรับประวัติ
+const rowsHistory = ref<NopaidFormType[]>([]); // ข้อมูลประวัติที่แสดงในตาราง
+const rowsHistoryData = ref<NopaidFormType[]>([]); // ข้อมูลประวัติที่ใช้สำหรับค้นหาในตาราง
+const modalHistory = ref<boolean>(false); // สถานะการแสดงโมดัลประวัติ
+// ข้อความสำหรับแสดงในหัวตาราง
 const salaryText = computed(() => {
   return link.value == "" ? "เงินเดือน" : "ค่าจ้าง";
 });
-
 const visibleColumns = ref<string[]>([
   "date",
   "detail",
@@ -41,7 +42,6 @@ const visibleColumns = ref<string[]>([
   "lastUpdateFullName",
   "lastUpdatedAt",
 ]);
-
 const columns = ref<QTableProps["columns"]>([
   {
     name: "date",
@@ -128,7 +128,6 @@ const columns = ref<QTableProps["columns"]>([
 const pagination = ref({
   sortBy: "lastUpdatedAt",
 });
-
 const visibleColumnsHistory = ref<string[]>([
   "date",
   "reference",
@@ -138,7 +137,6 @@ const visibleColumnsHistory = ref<string[]>([
   "lastUpdateFullName",
   "lastUpdatedAt",
 ]);
-
 const columnsHistory = ref<QTableProps["columns"]>([
   {
     name: "date",
@@ -221,18 +219,12 @@ const columnsHistory = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
+const fileGroup = ref<string>(`เอกสารบันทึกวันที่ไม่ได้รับ${salaryText.value}`); // กลุ่มไฟล์สำหรับเอกสารบันทึก
 
-const fileGroup = ref<string>(`เอกสารบันทึกวันที่ไม่ได้รับ${salaryText.value}`);
-
-function onHistory(id: string) {
-  modalHistory.value = true;
-  idByRow.value = id;
-}
-
-/** get data */
-function getData() {
-  showLoader();
-  http
+/** ฟังก์ชันสำหรับดึงข้อมูล */
+async function getData() {
+  isLoading.value = true;
+  await http
     .get(config.API.dataUserNopaidByType(link.value))
     .then((res) => {
       const data = res.data.result;
@@ -243,14 +235,25 @@ function getData() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoading.value = false;
     });
 }
 
-/** get history */
-function getHistory() {
-  showLoader();
-  http
+/**
+ * ฟังก์ชันสำหรับเปิดประวัติการแก้ไข
+ * @param 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.dataUserSalaryNopaidHistoryByType(link.value, idByRow.value)
     )
@@ -263,15 +266,28 @@ function getHistory() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoadingHistory.value = false;
     });
 }
 
+/**
+ * ฟังก์ชันสำหรับดาวน์โหลดไฟล์
+ * @param id รหัสของแถวที่ถูกเลือกสำหรับดาวน์โหลด
+ * @param profileId รหัสโปรไฟล์ของผู้ใช้
+ */
 async function onDownloadFile(id: string, profileId: string) {
-  const data = await getPathUploadFlie(fileGroup.value, profileId, id);
-  window.open(data.downloadUrl, "_blank");
+  showLoader();
+  try {
+    const data = await getPathUploadFlie(fileGroup.value, profileId, id);
+    window.open(data.downloadUrl, "_blank");
+  } catch (e) {
+    messageError($q, e);
+  } finally {
+    hideLoader();
+  }
 }
 
+/** ฟังก์ชันสำหรับค้นหาข้อมูล */
 function onSearch() {
   rows.value = onSearchDataTable(
     filter.value,
@@ -282,11 +298,10 @@ function onSearch() {
 
 onMounted(async () => {
   link.value = await dataPerson.getProFileType();
-  getData();
+  await getData();
 });
 </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">{{
@@ -323,6 +338,7 @@ onMounted(async () => {
         :display-value="$q.lang.table.columns"
       />
     </q-toolbar>
+
     <d-table
       flat
       dense
@@ -334,7 +350,9 @@ onMounted(async () => {
       :rows-per-page-options="[10, 25, 50, 100]"
       :visible-columns="visibleColumns"
       :virtual-scroll-sticky-size-start="48"
-      v-model:pagination="pagination"
+      :pagination="pagination"
+      :loading="isLoading"
+      row-key="id"
     >
       <template v-slot:header="props">
         <q-tr :props="props">
@@ -448,6 +466,7 @@ onMounted(async () => {
     :rows-data="rowsHistoryData"
     :visibleColumns="visibleColumnsHistory"
     :columns="columnsHistory"
+    :is-loading="isLoadingHistory"
   />
 </template>
 <style scoped>
diff --git a/src/modules/10_registry/04_Achievement/01_Certificate.vue b/src/modules/10_registry/04_Achievement/01_Certificate.vue
index 609ccea..6266c34 100644
--- a/src/modules/10_registry/04_Achievement/01_Certificate.vue
+++ b/src/modules/10_registry/04_Achievement/01_Certificate.vue
@@ -1,37 +1,34 @@
 <script setup lang="ts">
-import { useCounterMixin } from "@/stores/mixin";
+import { ref, onMounted } from "vue";
 import { useQuasar, type QTableProps } from "quasar";
-import { ref, reactive, onMounted } from "vue";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
 import { useDataStore } from "@/stores/data";
 import { useRegistryDataStore } from "@/modules/10_registry/store/Main";
 
 import type { CertificateDetail } from "@/modules/10_registry/interface/index/Main";
 
-//history dialog
 import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
 
-const link = ref<string>("");
 const $q = useQuasar();
 const dataPerson = useDataStore();
-const mixin = useCounterMixin();
-const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
-  mixin;
 const { getPathUploadFlie } = useRegistryDataStore();
+const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
+  useCounterMixin();
 
-const idByRow = ref<string>("");
-const rows = ref<CertificateDetail[]>([]);
-const rowsData = ref<CertificateDetail[]>([]);
-const filter = ref<string>("");
-const rowsHistory = ref<CertificateDetail[]>([]);
-const rowsHistoryData = ref<CertificateDetail[]>([]);
-const mode = ref<boolean>($q.screen.gt.xs);
-
-const modalHistory = ref<boolean>(false);
-/** ตัวแปรข้อมูล */
-
+const mode = ref<boolean>($q.screen.gt.xs); //โหมดการแสดงผล
+const link = ref<string>(""); //ลิงค์สำหรับดึงข้อมูล
+const isLoading = ref<boolean>(false); //ตัวแปรสำหรับแสดงสถานะการโหลดข้อมูล
+const isLoadingHistory = ref<boolean>(false); //ตัวแปรสำหรับแสดงสถานะการโหลดประวัติ
+const rows = ref<CertificateDetail[]>([]); //ตัวแปรสำหรับเก็บข้อมูลใบอนุญาตประกอบวิชาชีพ
+const rowsData = ref<CertificateDetail[]>([]); //ตัวแปรสำหรับเก็บข้อมูลใบอนุญาตประกอบวิชาชีพที่ใช้ในการค้นหา
+const filter = ref<string>(""); //ตัวแปรสำหรับเก็บค่าการค้นหา
+const idByRow = ref<string>(""); //ตัวแปรสำหรับเก็บ id ของแถวที่เลือก
+const rowsHistory = ref<CertificateDetail[]>([]); //ตัวแปรสำหรับเก็บข้อมูลประวัติการแก้ไขใบอนุญาตประกอบวิชาชีพ
+const rowsHistoryData = ref<CertificateDetail[]>([]); //ตัวแปรสำหรับเก็บข้อมูลประวัติการแก้ไขใบอนุญาตประกอบวิชาชีพที่ใช้ในการค้นหา
+const modalHistory = ref<boolean>(false); //ตัวแปรสำหรับเปิด/ปิด modal ประวัติการแก้ไขใบอนุญาต
 const visibleColumns = ref<string[]>([
   "certificateType",
   "issuer",
@@ -126,7 +123,6 @@ const columns = ref<QTableProps["columns"]>([
 const pagination = ref({
   sortBy: "lastUpdatedAt",
 });
-
 const visibleColumnsHistory = ref<string[]>([
   "certificateType",
   "issuer",
@@ -218,18 +214,12 @@ const columnsHistory = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
+const fileGroup = ref<string>("เอกสารใบอนุญาตประกอบวิชาชีพ"); //กลุ่มไฟล์สำหรับดาวน์โหลด
 
-const fileGroup = ref<string>("เอกสารใบอนุญาตประกอบวิชาชีพ");
-
-function onHistory(id: string) {
-  modalHistory.value = true;
-  idByRow.value = id;
-}
-
-/** get data */
-function getData() {
-  showLoader();
-  http
+/** ฟังก์ชันสำหรับดึงข้อมูลใบอนุญาตประกอบวิชาชีพ */
+async function getData() {
+  isLoading.value = true;
+  await http
     .get(config.API.dataUserCertificateByType(link.value, "certificate"))
     .then((res) => {
       const data = res.data.result;
@@ -240,14 +230,25 @@ function getData() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      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.dataUserCertificateHistoryByType(
         link.value,
@@ -264,15 +265,28 @@ function getHistory() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoadingHistory.value = false;
     });
 }
 
+/**
+ * ฟังก์ชันสำหรับดาวน์โหลดไฟล์
+ * @param id ID ของไฟล์ที่ต้องการดาวน์โหลด
+ * @param profileId ID ของโปรไฟล์
+ */
 async function onDownloadFile(id: string, profileId: string) {
-  const data = await getPathUploadFlie(fileGroup.value, profileId, id);
-  window.open(data.downloadUrl, "_blank");
+  showLoader();
+  try {
+    const data = await getPathUploadFlie(fileGroup.value, profileId, id);
+    window.open(data.downloadUrl, "_blank");
+  } catch (error) {
+    messageError($q, error);
+  } finally {
+    hideLoader();
+  }
 }
 
+/** ฟังก์ชันสำหรับค้นหาข้อมูลในตาราง */
 function onSearch() {
   rows.value = onSearchDataTable(
     filter.value,
@@ -283,11 +297,10 @@ function onSearch() {
 
 onMounted(async () => {
   link.value = await dataPerson.getProFileType();
-  getData();
+  await getData();
 });
 </script>
 <template>
-  <!-- v-if="mode" -->
   <div class="col-12">
     <q-toolbar class="q-px-none">
       <span class="text-blue-6 text-weight-bold text-body1"
@@ -324,6 +337,7 @@ onMounted(async () => {
         :display-value="$q.lang.table.columns"
       />
     </q-toolbar>
+
     <d-table
       flat
       dense
@@ -335,7 +349,9 @@ onMounted(async () => {
       :rows-per-page-options="[10, 25, 50, 100]"
       :visible-columns="visibleColumns"
       :virtual-scroll-sticky-size-start="48"
-      v-model:pagination="pagination"
+      :pagination="pagination"
+      :loading="isLoading"
+      row-key="id"
     >
       <template v-slot:header="props">
         <q-tr :props="props">
@@ -445,6 +461,7 @@ onMounted(async () => {
     :rows-data="rowsHistoryData"
     :visibleColumns="visibleColumnsHistory"
     :columns="columnsHistory"
+    :is-loading="isLoadingHistory"
   />
 </template>
 <style scoped>
diff --git a/src/modules/10_registry/04_Achievement/02_Training.vue b/src/modules/10_registry/04_Achievement/02_Training.vue
index 9763c1e..2fd80b1 100644
--- a/src/modules/10_registry/04_Achievement/02_Training.vue
+++ b/src/modules/10_registry/04_Achievement/02_Training.vue
@@ -1,34 +1,32 @@
 <script setup lang="ts">
-import { useCounterMixin } from "@/stores/mixin";
-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 { useDataStore } from "@/stores/data";
+import { useCounterMixin } from "@/stores/mixin";
 
 import type { TrainingFormType } from "@/modules/10_registry/interface/index/Main";
 
 //history dialog
 import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
 
-const link = ref<string>("");
-const dataPerson = useDataStore();
-const idByRow = ref<string>("");
-const rows = ref<TrainingFormType[]>([]);
-const rowsData = ref<TrainingFormType[]>([]);
-const filter = ref<string>("");
-const rowsHistory = ref<TrainingFormType[]>([]);
-const rowsHistoryData = ref<TrainingFormType[]>([]);
 const $q = useQuasar();
-const mode = ref<boolean>($q.screen.gt.xs);
-const mixin = useCounterMixin();
-const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
-  mixin;
-
-const modalHistory = ref<boolean>(false);
-/** ตัวแปรข้อมูล */
+const dataPerson = useDataStore();
+const { messageError, date2Thai, onSearchDataTable } = useCounterMixin();
 
+const mode = ref<boolean>($q.screen.gt.xs); // โหมดการแสดงผล
+const link = ref<string>(""); // ลิงก์สำหรับดึงข้อมูลประเภทของผู้ใช้
+const isLoading = ref<boolean>(false); // ตัวแปรสำหรับการโหลดข้อมูล
+const isLoadingHistory = ref<boolean>(false); // ตัวแปรสำหรับการโหลดข้อมูลประวัติ
+const rows = ref<TrainingFormType[]>([]); // ตัวแปรสำหรับเก็บข้อมูลการฝึกอบรม/ดูงาน
+const rowsData = ref<TrainingFormType[]>([]); // ตัวแปรสำหรับเก็บข้อมูลการฝึกอบรม/ดูงาน
+const filter = ref<string>(""); // ตัวแปรสำหรับเก็บค่าการค้นหา
+const idByRow = ref<string>(""); // ตัวแปรสำหรับเก็บ id ของแถวที่เลือก
+const rowsHistory = ref<TrainingFormType[]>([]); // ตัวแปรสำหรับเก็บข้อมูลประวัติการแก้ไขการฝึกอบรม/ดูงาน
+const rowsHistoryData = ref<TrainingFormType[]>([]); // ตัวแปรสำหรับเก็บข้อมูลประวัติการแก้ไขการฝึกอบรม/ดูงานที่ใช้ในการค้นหา
+const modalHistory = ref<boolean>(false); // ตัวแปรสำหรับเปิด/ปิด modal ประวัติการแก้ไขการฝึกอบรม/ดูงาน
 const visibleColumns = ref<string[]>([
   "name", // ชื่อโครงงาน
   "topic", // หัวข้อ
@@ -187,7 +185,6 @@ const columns = ref<QTableProps["columns"]>([
 const pagination = ref({
   sortBy: "lastUpdatedAt",
 });
-
 const visibleColumnsHistory = ref<string[]>([
   "name", // ชื่อโครงงาน
   "topic", // หัวข้อ
@@ -343,15 +340,11 @@ const columnsHistory = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
-function onHistory(id: string) {
-  modalHistory.value = true;
-  idByRow.value = id;
-}
 
 /** get data */
-function getData() {
-  showLoader();
-  http
+async function getData() {
+  isLoading.value = true;
+  await http
     .get(config.API.dataUserCertificateByType(link.value, "training"))
     .then((res) => {
       const data = res.data.result;
@@ -362,14 +355,25 @@ function getData() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      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.dataUserCertificateHistoryByType(
         link.value,
@@ -386,10 +390,11 @@ function getHistory() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoadingHistory.value = false;
     });
 }
 
+/** ฟังก์ชันสำหรับค้นหาข้อมูลในตาราง */
 function onSearch() {
   rows.value = onSearchDataTable(
     filter.value,
@@ -400,11 +405,10 @@ function onSearch() {
 
 onMounted(async () => {
   link.value = await dataPerson.getProFileType();
-  getData();
+  await getData();
 });
 </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"
@@ -441,6 +445,7 @@ onMounted(async () => {
         :display-value="$q.lang.table.columns"
       />
     </q-toolbar>
+
     <d-table
       flat
       dense
@@ -452,7 +457,9 @@ onMounted(async () => {
       :rows-per-page-options="[10, 25, 50, 100]"
       :visible-columns="visibleColumns"
       :virtual-scroll-sticky-size-start="48"
-      v-model:pagination="pagination"
+      :pagination="pagination"
+      :loading="isLoading"
+      row-key="id"
     >
       <template v-slot:header="props">
         <q-tr :props="props">
@@ -517,6 +524,7 @@ onMounted(async () => {
       </template>
     </d-table>
   </div>
+
   <DialogHistory
     v-model:modal="modalHistory"
     :title="'ประวัติแก้ไขการฝึกอบรม/ดูงาน'"
@@ -525,8 +533,10 @@ onMounted(async () => {
     :rows-data="rowsHistoryData"
     :visibleColumns="visibleColumnsHistory"
     :columns="columnsHistory"
+    :is-loading="isLoadingHistory"
   />
 </template>
+
 <style scoped>
 .absolute_button {
   position: absolute;
diff --git a/src/modules/10_registry/04_Achievement/03_Insignia.vue b/src/modules/10_registry/04_Achievement/03_Insignia.vue
index 0e65605..e2dadc0 100644
--- a/src/modules/10_registry/04_Achievement/03_Insignia.vue
+++ b/src/modules/10_registry/04_Achievement/03_Insignia.vue
@@ -1,6 +1,6 @@
 <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";
@@ -10,27 +10,25 @@ import { useRegistryDataStore } from "@/modules/10_registry/store/Main";
 
 import type { InsigniaFormType } from "@/modules/10_registry/interface/index/Main";
 
-//history dialog
 import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
 
-const link = ref<string>("");
-const dataPerson = useDataStore();
-const idByRow = ref<string>("");
-const rows = ref<InsigniaFormType[]>([]);
-const rowsData = ref<InsigniaFormType[]>([]);
-const filter = ref<string>("");
-const rowsHistory = ref<InsigniaFormType[]>([]);
-const rowsHistoryData = ref<InsigniaFormType[]>([]);
 const $q = useQuasar();
-const mode = ref<boolean>($q.screen.gt.xs);
-const mixin = useCounterMixin();
-const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
-  mixin;
+const dataPerson = useDataStore();
 const { getPathUploadFlie } = useRegistryDataStore();
+const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
+  useCounterMixin();
 
-const modalHistory = ref<boolean>(false);
-/** ตัวแปรข้อมูล */
-
+const mode = ref<boolean>($q.screen.gt.xs); // โหมดการแสดงผล
+const link = ref<string>(""); // ลิงก์สำหรับดึงข้อมูลประเภทของผู้ใช้
+const isLoading = ref<boolean>(false); // ตัวแปรสำหรับโหลดข้อมูล
+const isLoadingHistory = ref<boolean>(false); // ตัวแปรสำหรับโหลดข้อมูลประวัติ
+const idByRow = ref<string>(""); // ตัวแปรสำหรับเก็บ id ของแถวที่เลือก
+const rows = ref<InsigniaFormType[]>([]); // ตัวแปรสำหรับเก็บข้อมูลเครื่องราชฯ
+const rowsData = ref<InsigniaFormType[]>([]); // ตัวแปรสำหรับเก็บข้อมูลเครื่องราชฯ ที่ใช้ในการค้นหา
+const filter = ref<string>(""); // ตัวแปรสำหรับเก็บค่าค้นหา
+const rowsHistory = ref<InsigniaFormType[]>([]); // ตัวแปรสำหรับเก็บข้อมูลประวัติการแก้ไขเครื่องราชฯ
+const rowsHistoryData = ref<InsigniaFormType[]>([]); // ตัวแปรสำหรับเก็บข้อมูลประวัติการแก้ไขเครื่องราชฯ ที่ใช้ในการค้นหา
+const modalHistory = ref<boolean>(false); // ตัวแปรสำหรับเปิด/ปิด modal ประวัติการแก้ไขเครื่องราชฯ
 const visibleColumns = ref<String[]>([
   "insignia",
   "insigniaType",
@@ -239,7 +237,6 @@ const columns = ref<QTableProps["columns"]>([
 const pagination = ref({
   sortBy: "lastUpdatedAt",
 });
-
 const visibleColumnsHistory = ref<string[]>([
   "insignia",
   "insigniaType",
@@ -433,18 +430,12 @@ const columnsHistory = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
+const fileGroup = ref<string>("เครื่องราชฯ"); // กลุ่มไฟล์สำหรับดาวน์โหลด
 
-const fileGroup = ref<string>("เครื่องราชฯ");
-
-function onHistory(id: string) {
-  modalHistory.value = true;
-  idByRow.value = id;
-}
-
-/** get data */
-function getData() {
-  showLoader();
-  http
+/** ฟังก์ชันสำหรับดึงข้อมูลเครื่องราชฯ */
+async function getData() {
+  isLoading.value = true;
+  await http
     .get(config.API.dataUserCertificateByType(link.value, "insignia"))
     .then((res) => {
       const data = res.data.result;
@@ -455,14 +446,25 @@ function getData() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      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.dataUserCertificateHistoryByType(
         link.value,
@@ -479,15 +481,28 @@ function getHistory() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoadingHistory.value = false;
     });
 }
 
+/**
+ *  ฟังก์ชันสำหรับดาวน์โหลดไฟล์
+ * @param id ID ของไฟล์ที่ต้องการดาวน์โหลด
+ * @param profileId ID ของโปรไฟล์
+ */
 async function onDownloadFile(id: string, profileId: string) {
-  const data = await getPathUploadFlie(fileGroup.value, profileId, id);
-  window.open(data.downloadUrl, "_blank");
+  showLoader();
+  try {
+    const data = await getPathUploadFlie(fileGroup.value, profileId, id);
+    window.open(data.downloadUrl, "_blank");
+  } catch (error) {
+    messageError($q, error);
+  } finally {
+    hideLoader();
+  }
 }
 
+/** ฟังก์ชันสำหรับค้นหาข้อมูลในตาราง */
 function onSearch() {
   rows.value = onSearchDataTable(
     filter.value,
@@ -498,11 +513,10 @@ function onSearch() {
 
 onMounted(async () => {
   link.value = await dataPerson.getProFileType();
-  getData();
+  await getData();
 });
 </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"
@@ -539,6 +553,7 @@ onMounted(async () => {
         :display-value="$q.lang.table.columns"
       />
     </q-toolbar>
+
     <d-table
       flat
       dense
@@ -550,7 +565,9 @@ onMounted(async () => {
       :rows-per-page-options="[10, 25, 50, 100]"
       :visible-columns="visibleColumns"
       :virtual-scroll-sticky-size-start="48"
-      v-model:pagination="pagination"
+      :pagination="pagination"
+      :loading="isLoading"
+      row-key="id"
     >
       <template v-slot:header="props">
         <q-tr :props="props">
@@ -674,8 +691,10 @@ onMounted(async () => {
     :visibleColumns="visibleColumnsHistory"
     :columns="columnsHistory"
     :type="'insignia'"
+    :is-loading="isLoadingHistory"
   />
 </template>
+
 <style scoped>
 .absolute_button {
   position: absolute;
diff --git a/src/modules/10_registry/04_Achievement/04_Honor.vue b/src/modules/10_registry/04_Achievement/04_Honor.vue
index 3a6366c..6801fd2 100644
--- a/src/modules/10_registry/04_Achievement/04_Honor.vue
+++ b/src/modules/10_registry/04_Achievement/04_Honor.vue
@@ -1,12 +1,11 @@
 <script setup lang="ts">
+import { ref, onMounted } from "vue";
 import { useQuasar, type QTableProps } from "quasar";
-import { ref, reactive, onMounted } from "vue";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import { useDataStore } from "@/stores/data";
-import { useRegistryInFormationStore } from "@/modules/10_registry/store/registry";
 import { useRegistryDataStore } from "@/modules/10_registry/store/Main";
 
 import type { HonorFormData } from "@/modules/10_registry/interface/index/Main";
@@ -14,25 +13,23 @@ import type { HonorFormData } from "@/modules/10_registry/interface/index/Main";
 //history dialog
 import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
 
-const link = ref<string>("");
-const dataPerson = useDataStore();
-const idByRow = ref<string>("");
-const store = useRegistryInFormationStore();
-const rows = ref<HonorFormData[]>([]);
-const rowsData = ref<HonorFormData[]>([]);
-const filter = ref<string>("");
-const rowsHistory = ref<HonorFormData[]>([]);
-const rowsHistoryData = ref<HonorFormData[]>([]);
 const $q = useQuasar();
-const mode = ref<boolean>($q.screen.gt.xs);
-const mixin = useCounterMixin();
-const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
-  mixin;
+const dataPerson = useDataStore();
 const { getPathUploadFlie } = useRegistryDataStore();
+const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
+  useCounterMixin();
 
-const modalHistory = ref<boolean>(false);
-/** ตัวแปรข้อมูล */
-
+const mode = ref<boolean>($q.screen.gt.xs); //โหมดการแสดงผล
+const link = ref<string>(""); //ลิงก์สำหรับดึงข้อมูล
+const isLoading = ref<boolean>(false); //ตัวแปรสำหรับแสดงสถานะการโหลดข้อมูล
+const isLoadingHistory = ref<boolean>(false); //ตัวแปรสำหรับแสดงสถานะการโหลดข้อมูลประวัติ
+const rows = ref<HonorFormData[]>([]); //ตัวแปรสำหรับเก็บข้อมูลประกาศเกียรติคุณ
+const rowsData = ref<HonorFormData[]>([]); //ตัวแปรสำหรับเก็บข้อมูลประกาศเกียรติคุณที่ใช้ในการค้นหา
+const filter = ref<string>(""); //ตัวแปรสำหรับเก็บค่าการค้นหา
+const idByRow = ref<string>(""); //ตัวแปรสำหรับเก็บ id ของแถวที่เลือก
+const rowsHistory = ref<HonorFormData[]>([]); // ตัวแปรสำหรับเก็บข้อมูลประวัติการแก้ไขประกาศเกียรติคุณ
+const rowsHistoryData = ref<HonorFormData[]>([]); // ตัวแปรสำหรับเก็บข้อมูลประวัติการแก้ไขประกาศเกียรติคุณที่ใช้ในการค้นหา
+const modalHistory = ref<boolean>(false); // ตัวแปรสำหรับเปิด/ปิด modal ประวัติการแก้ไขประกาศเกียรติคุณ
 const visibleColumns = ref<String[]>([
   "issuer",
   "detail",
@@ -127,7 +124,6 @@ const columns = ref<QTableProps["columns"]>([
 const pagination = ref({
   sortBy: "lastUpdatedAt",
 });
-
 const visibleColumnsHistory = ref<string[]>([
   "issuer",
   "detail",
@@ -219,18 +215,12 @@ const columnsHistory = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
+const fileGroup = ref<string>("ประกาศเกียรติคุณ"); // กลุ่มไฟล์สำหรับดาวน์โหลด
 
-const fileGroup = ref<string>("ประกาศเกียรติคุณ");
-
-function onHistory(id: string) {
-  modalHistory.value = true;
-  idByRow.value = id;
-}
-
-/** get data */
-function getData() {
-  showLoader();
-  http
+/** ฟังก์ชันสำหรับดึงข้อมูลประกาศเกียรติคุณ */
+async function getData() {
+  isLoading.value = true;
+  await http
     .get(config.API.dataUserCertificateByType(link.value, "honor"))
     .then((res) => {
       const data = res.data.result;
@@ -241,18 +231,30 @@ function getData() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoading.value = false;
     });
 }
 
+/**
+ * เปิด modal ประวัติการแก้ไข
+ * @param id ID ของแถวที่เลือก
+ */
+function onHistory(id: string) {
+  modalHistory.value = true;
+  idByRow.value = id;
+}
+
 /** get history */
-function getHistory() {
+async function getHistory() {
+  isLoadingHistory.value = true;
+  rowsHistory.value = [];
+  rowsHistoryData.value = [];
   const url =
     dataPerson.officerType == "OFFICER"
       ? config.API.dataUserHonorHistory("honor", "", idByRow.value)
       : config.API.dataUserHonorHistory("honor", "-employee", idByRow.value);
-  showLoader();
-  http
+
+  await http
     .get(url)
     .then((res) => {
       const data = res.data.result;
@@ -263,15 +265,28 @@ function getHistory() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoadingHistory.value = false;
     });
 }
 
+/**
+ * ฟังก์ชันสำหรับดาวน์โหลดไฟล์
+ * @param id ID ของไฟล์ที่ต้องการดาวน์โหลด
+ * @param profileId id ของโปรไฟล์
+ */
 async function onDownloadFile(id: string, profileId: string) {
-  const data = await getPathUploadFlie(fileGroup.value, profileId, id);
-  window.open(data.downloadUrl, "_blank");
+  showLoader();
+  try {
+    const data = await getPathUploadFlie(fileGroup.value, profileId, id);
+    window.open(data.downloadUrl, "_blank");
+  } catch (error) {
+    messageError($q, error);
+  } finally {
+    hideLoader();
+  }
 }
 
+/** ฟังก์ชันสำหรับค้นหาข้อมูลในตาราง */
 function onSearch() {
   rows.value = onSearchDataTable(
     filter.value,
@@ -282,11 +297,10 @@ function onSearch() {
 
 onMounted(async () => {
   link.value = await dataPerson.getProFileType();
-  getData();
+  await getData();
 });
 </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"
@@ -323,6 +337,7 @@ onMounted(async () => {
         :display-value="$q.lang.table.columns"
       />
     </q-toolbar>
+
     <d-table
       flat
       dense
@@ -334,7 +349,9 @@ onMounted(async () => {
       :rows-per-page-options="[10, 25, 50, 100]"
       :visible-columns="visibleColumns"
       :virtual-scroll-sticky-size-start="48"
-      v-model:pagination="pagination"
+      :pagination="pagination"
+      :loading="isLoading"
+      row-key="id"
     >
       <template v-slot:header="props">
         <q-tr :props="props">
@@ -445,6 +462,7 @@ onMounted(async () => {
     :rows-data="rowsHistoryData"
     :visibleColumns="visibleColumnsHistory"
     :columns="columnsHistory"
+    :is-loading="isLoadingHistory"
   />
 </template>
 <style scoped>
diff --git a/src/modules/10_registry/04_Achievement/05_Assessments.vue b/src/modules/10_registry/04_Achievement/05_Assessments.vue
index 4e93d23..83ba483 100644
--- a/src/modules/10_registry/04_Achievement/05_Assessments.vue
+++ b/src/modules/10_registry/04_Achievement/05_Assessments.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
+import { ref, onMounted } from "vue";
 import { useQuasar, type QTableProps } from "quasar";
-import { ref, reactive, onMounted } from "vue";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -12,31 +12,27 @@ import type {
   DataOption,
 } from "@/modules/10_registry/interface/index/Main";
 
-//history dialog
 import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
 
-const link = ref<string>("");
-const dataPerson = useDataStore();
-const idByRow = ref<string>("");
-const rows = ref<AssessmentsFormType[]>([]);
-const rowsData = ref<AssessmentsFormType[]>([]);
-const filter = ref<string>("");
-const rowsHistory = ref<AssessmentsFormType[]>([]);
-const rowsHistoryData = ref<AssessmentsFormType[]>([]);
 const $q = useQuasar();
-const mode = ref<boolean>($q.screen.gt.xs);
-const mixin = useCounterMixin();
-const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
-  mixin;
+const dataPerson = useDataStore();
+const { messageError, date2Thai, onSearchDataTable } = useCounterMixin();
 
+const mode = ref<boolean>($q.screen.gt.xs); //โหมดแสดงผล
+const link = ref<string>(""); //ลิงค์สำหรับดึงข้อมูล
+const rows = ref<AssessmentsFormType[]>([]); //ตัวแปรเก็บข้อมูลที่ดึงมา
+const rowsData = ref<AssessmentsFormType[]>([]); //ตัวแปรเก็บข้อมูลที่ดึงมาไว้สำหรับค้นหา
+const filter = ref<string>(""); //ตัวแปรเก็บค่าค้นหา
+const idByRow = ref<string>(""); //ตัวแปรเก็บ id ของแถวที่เลือก
+const rowsHistory = ref<AssessmentsFormType[]>([]); //ตัวแปรเก็บข้อมูลประวัติการแก้ไข
+const rowsHistoryData = ref<AssessmentsFormType[]>([]); //ตัวแปรเก็บข้อมูลประวัติการแก้ไขไว้สำหรับค้นหา
+const isLoading = ref<boolean>(false); //ตัวแปรสำหรับแสดงสถานะการ
+const isLoadingHistory = ref<boolean>(false); //ตัวแปรสำหรับแสดงสถานะการโหลดข้อมูลประวัติ
 const periodOp = ref<DataOption[]>([
   { id: "OCT", name: "ตุลาคม" },
   { id: "APR", name: "เมษายน" },
 ]);
-
-const modalHistory = ref<boolean>(false);
-/** ตัวแปรข้อมูล */
-
+const modalHistory = ref<boolean>(false); //ตัวแปรสำหรับเปิดปิด modal ประวัติการแก้ไข
 const columns = ref<QTableProps["columns"]>([
   {
     name: "date",
@@ -328,7 +324,6 @@ const visibleColumnsHistory = ref<string[]>([
 const pagination = ref({
   sortBy: "lastUpdatedAt",
 });
-
 const visibleColumns = ref<string[]>([
   "point1Total",
   "year",
@@ -344,15 +339,10 @@ const visibleColumns = ref<string[]>([
   "lastUpdatedAt",
 ]);
 
-function onHistory(id: string) {
-  modalHistory.value = true;
-  idByRow.value = id;
-}
-
-/** get data */
-function getData() {
-  showLoader();
-  http
+/** ฟังก์ชันดึงข้อมูล */
+async function getData() {
+  isLoading.value = true;
+  await http
     .get(config.API.dataUserCertificateByType(link.value, "assessments"))
     .then((res) => {
       const data = res.data.result;
@@ -363,14 +353,25 @@ function getData() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      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.dataUserCertificateHistoryByType(
         link.value,
@@ -387,10 +388,14 @@ function getHistory() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoadingHistory.value = false;
     });
 }
 
+/**
+ * ฟังก์ชันตรวจสอบช่วงคะแนน
+ * @param val - ค่าที่ต้องการตรวจสอบ
+ */
 function textRangePoint(val: number | undefined) {
   if (val == undefined) val = -1;
   if (val < 60.0) return "(คะแนนต่ำกว่าร้อยละ 60.00)";
@@ -401,6 +406,10 @@ function textRangePoint(val: number | undefined) {
   else return "";
 }
 
+/**
+ * ฟังก์ชันตรวจสอบคะแนน
+ * @param val - ค่าที่ต้องการตรวจสอบ
+ */
 function textPoint(val: number | undefined) {
   if (val == undefined) val = -1;
   if (val < 60.0) return "ต้องปรับปรุง";
@@ -440,6 +449,7 @@ onMounted(async () => {
         v-model="filter"
         label="ค้นหา"
         style="max-width: 200px"
+        @keydown.enter.prevent="onSearch"
       >
         <template v-slot:append>
           <q-icon name="search" />
@@ -461,6 +471,7 @@ onMounted(async () => {
         :display-value="$q.lang.table.columns"
       />
     </q-toolbar>
+
     <d-table
       flat
       dense
@@ -472,7 +483,9 @@ onMounted(async () => {
       :rows-per-page-options="[10, 25, 50, 100]"
       :visible-columns="visibleColumns"
       :virtual-scroll-sticky-size-start="48"
-      v-model:pagination="pagination"
+      :pagination="pagination"
+      :loading="isLoading"
+      row-key="id"
     >
       <template v-slot:header="props">
         <q-tr :props="props">
@@ -545,6 +558,7 @@ onMounted(async () => {
       </template>
     </d-table>
   </div>
+
   <DialogHistory
     v-model:modal="modalHistory"
     :title="'ประวัติแก้ไขผลการประเมินการปฏิบัติราชการ'"
@@ -553,8 +567,10 @@ onMounted(async () => {
     :rows-data="rowsHistoryData"
     :visibleColumns="visibleColumnsHistory"
     :columns="columnsHistory"
+    :is-loading="isLoadingHistory"
   />
 </template>
+
 <style scoped>
 .absolute_button {
   position: absolute;
diff --git a/src/modules/10_registry/04_Achievement/06_DevelopmentPlan.vue b/src/modules/10_registry/04_Achievement/06_DevelopmentPlan.vue
index eff42db..e114c76 100644
--- a/src/modules/10_registry/04_Achievement/06_DevelopmentPlan.vue
+++ b/src/modules/10_registry/04_Achievement/06_DevelopmentPlan.vue
@@ -1,34 +1,27 @@
 <script setup lang="ts">
-import { useCounterMixin } from "@/stores/mixin";
+import { ref, onMounted } from "vue";
 import { useQuasar, type QTableProps } from "quasar";
-import { ref, reactive, onMounted } from "vue";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
 import { useDataStore } from "@/stores/data";
 
 import DialogDevelop from "@/modules/10_registry/Dialog/DialogDevelopmant.vue";
 
-const typeIDP = ref<string>("");
-const link = ref<string>("");
-const dataPerson = useDataStore();
-const idByRow = ref<string>("");
-const rows = ref<any[]>([]);
-const rowsData = ref<any[]>([]);
-const filter = ref<string>("");
-const rowsHistory = ref<any[]>([]);
-const rowsHistoryData = ref<any[]>([]);
 const $q = useQuasar();
-const mode = ref<boolean>($q.screen.gt.xs);
-const mixin = useCounterMixin();
-const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
-  mixin;
-const modalDevelop = ref<boolean>(false);
-const kpiDevelopmentId = ref<string>("");
-
-const modalHistory = ref<boolean>(false);
-/** ตัวแปรข้อมูล */
+const dataPerson = useDataStore();
+const { messageError, date2Thai, onSearchDataTable } = useCounterMixin();
 
+const mode = ref<boolean>($q.screen.gt.xs); // โหมดแสดงผล
+const typeIDP = ref<string>(""); // ประเภทการพัฒนา
+const link = ref<string>(""); // ลิงค์สำหรับดึงข้อมูล
+const isLoading = ref<boolean>(false); // ตัวแปรสำหรับแสดงสถานะการโหลดข้อมูล
+const rows = ref<any[]>([]); // ข้อมูลที่แสดงในตาราง
+const rowsData = ref<any[]>([]); // ข้อมูลทั้งหมดที่ใช้สำหรับการค้นหา
+const filter = ref<string>(""); // ค่าที่ใช้สำหรับการค้นหา
+const modalDevelop = ref<boolean>(false); // ตัวแปรสำหรับเปิด/ปิด Dialog การพัฒนารายบุคคล
+const kpiDevelopmentId = ref<string>(""); // ตัวแปรสำหรับเก็บ ID การพัฒนารายบุคคล
 const visibleColumns = ref<string[]>([
   "no",
   "name",
@@ -39,7 +32,6 @@ const visibleColumns = ref<string[]>([
   "lastUpdateFullName",
   "lastUpdatedAt",
 ]);
-
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -130,21 +122,15 @@ const columns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
-
 const paginationPlan = ref({
   page: 1,
   rowsPerPage: 10,
 });
 
-function onHistory(id: string) {
-  modalHistory.value = true;
-  idByRow.value = id;
-}
-
-/** get data */
-function getData() {
-  showLoader();
-  http
+/** ฟังก์ชันดึงข้อมูล */
+async function getData() {
+  isLoading.value = true;
+  await http
     .get(config.API.developmentUserByType(link.value))
     .then((res) => {
       const data = res.data.result;
@@ -155,31 +141,7 @@ function getData() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
-    });
-}
-
-/** get history */
-function getHistory() {
-  showLoader();
-  http
-    .get(
-      config.API.dataUserCertificateHistoryByType(
-        link.value,
-        "assessments",
-        idByRow.value
-      )
-    )
-    .then((res) => {
-      const data = res.data.result;
-      rowsHistory.value = data;
-      rowsHistoryData.value = data;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
+      isLoading.value = false;
     });
 }
 
@@ -193,6 +155,7 @@ function openDialogDevelop(data: any) {
   typeIDP.value = data.type;
 }
 
+/** ฟังก์ชันค้นหาข้อมูล */
 function onSearch() {
   rows.value = onSearchDataTable(
     filter.value,
@@ -203,12 +166,13 @@ function onSearch() {
 
 onMounted(async () => {
   link.value = await dataPerson.getProFileType();
-  getData();
+  await getData();
 });
 </script>
 <template>
   <!-- v-if="mode" -->
-  <div class="col-12" v-if="dataPerson.officerType == 'OFFICER'">
+  <!-- v-if="dataPerson.officerType == 'OFFICER'" -->
+  <div class="col-12">
     <q-toolbar class="q-px-none q-mt-md">
       <span class="text-blue-6 text-weight-bold text-body1"
         >การพัฒนารายบุคคล (Individual Development Plan)</span
@@ -244,6 +208,7 @@ onMounted(async () => {
         :display-value="$q.lang.table.columns"
       />
     </q-toolbar>
+
     <d-table
       flat
       dense
@@ -255,6 +220,9 @@ onMounted(async () => {
       :rows-per-page-options="[10, 25, 50, 100]"
       :visible-columns="visibleColumns"
       :virtual-scroll-sticky-size-start="48"
+      :pagination="{ page: 1, rowsPerPage: 10 }"
+      :loading="isLoading"
+      row-key="id"
     >
       <template v-slot:header="props">
         <q-tr :props="props">
diff --git a/src/modules/10_registry/05_Other/01_Other.vue b/src/modules/10_registry/05_Other/01_Other.vue
index 98c91ee..819930c 100644
--- a/src/modules/10_registry/05_Other/01_Other.vue
+++ b/src/modules/10_registry/05_Other/01_Other.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useQuasar, type QTableProps } from "quasar";
+import { is, useQuasar, type QTableProps } from "quasar";
 import { ref, onMounted } from "vue";
 
 import http from "@/plugins/http";
@@ -9,16 +9,15 @@ import { useDataStore } from "@/stores/data";
 
 import type { OtherFormType } from "@/modules/10_registry/interface/index/Main";
 
-//history dialog
 import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
 
-const link = ref<string>("");
 const $q = useQuasar();
-const mixin = useCounterMixin();
 const dataPerson = useDataStore();
-const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
-  mixin;
+const { messageError, date2Thai, onSearchDataTable } = useCounterMixin();
 
+const link = ref<string>("");
+const isLoading = ref<boolean>(false);
+const isLoadingHistory = ref<boolean>(false);
 const idByRow = ref<string>("");
 const rows = ref<OtherFormType[]>([]);
 const rowsData = ref<OtherFormType[]>([]);
@@ -26,10 +25,7 @@ const filter = ref<string>("");
 const rowsHistory = ref<OtherFormType[]>([]);
 const rowsHistoryData = ref<OtherFormType[]>([]);
 const mode = ref<boolean>($q.screen.gt.xs);
-
 const modalHistory = ref<boolean>(false);
-/** ตัวแปรข้อมูล */
-
 const visibleColumns = ref<string[]>([
   "date",
   "detail",
@@ -85,7 +81,6 @@ const columns = ref<QTableProps["columns"]>([
 const pagination = ref({
   sortBy: "lastUpdatedAt",
 });
-
 const visibleColumnsHistory = ref<string[]>([
   "date",
   "detail",
@@ -139,15 +134,10 @@ const columnsHistory = ref<QTableProps["columns"]>([
   },
 ]);
 
-function onHistory(id: string) {
-  modalHistory.value = true;
-  idByRow.value = id;
-}
-
-/** get data */
-function getData() {
-  showLoader();
-  http
+/** ฟังก์ชันดึงข้อมูล */
+async function getData() {
+  isLoading.value = true;
+  await http
     .get(config.API.dataUserOtherByType(link.value))
     .then((res) => {
       const data = res.data.result;
@@ -156,14 +146,27 @@ function getData() {
     })
     .catch((e) => {
       messageError($q, e);
-      hideLoader();
+    })
+    .finally(() => {
+      isLoading.value = false;
     });
 }
 
-/** get history */
-function getHistory() {
-  showLoader();
-  http
+/**
+ * ฟังก์ชันเปิดโมดัลดูประวัติ
+ * @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.dataUserOtherHistoryByType(link.value, idByRow.value))
     .then((res) => {
       const data = res.data.result;
@@ -174,10 +177,11 @@ function getHistory() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoadingHistory.value = false;
     });
 }
 
+/** ฟังก์ชันค้นหาข้อมูลในตาราง */
 function onSearch() {
   rows.value = onSearchDataTable(
     filter.value,
@@ -188,11 +192,10 @@ function onSearch() {
 
 onMounted(async () => {
   link.value = await dataPerson.getProFileType();
-  getData();
+  await getData();
 });
 </script>
 <template>
-  <!-- v-if="mode" -->
   <div class="col-12">
     <q-toolbar class="q-px-none">
       <span class="text-blue-6 text-weight-bold text-body1">ข้อมูลอื่นๆ</span>
@@ -227,6 +230,7 @@ onMounted(async () => {
         :display-value="$q.lang.table.columns"
       />
     </q-toolbar>
+
     <d-table
       flat
       dense
@@ -238,7 +242,9 @@ onMounted(async () => {
       :rows-per-page-options="[10, 25, 50, 100]"
       :visible-columns="visibleColumns"
       :virtual-scroll-sticky-size-start="48"
-      v-model:pagination="pagination"
+      :pagination="pagination"
+      :loading="isLoading"
+      row-key="id"
     >
       <template v-slot:header="props">
         <q-tr :props="props">
@@ -269,6 +275,7 @@ onMounted(async () => {
           </q-td>
         </q-tr>
       </template>
+
       <template v-else v-slot:item="props">
         <div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
           <q-card bordered flat>
@@ -301,15 +308,9 @@ onMounted(async () => {
           </q-card>
         </div>
       </template>
-      <template v-slot:no-data>
-        <div
-          class="full-width row flex-center q-pa-sm rounded-borders text-weight-medium"
-        >
-          <span> ไม่พบข้อมูล </span>
-        </div>
-      </template>
     </d-table>
   </div>
+
   <DialogHistory
     v-model:modal="modalHistory"
     :title="'ประวัติแก้ไขข้อมูลอื่นๆ'"
@@ -318,6 +319,7 @@ onMounted(async () => {
     :rows-data="rowsHistoryData"
     :visibleColumns="visibleColumnsHistory"
     :columns="columnsHistory"
+    :is-loading="isLoadingHistory"
   />
 </template>
 <style scoped>
diff --git a/src/modules/10_registry/05_Other/02_File.vue b/src/modules/10_registry/05_Other/02_File.vue
index 4b26eb1..1e9472e 100644
--- a/src/modules/10_registry/05_Other/02_File.vue
+++ b/src/modules/10_registry/05_Other/02_File.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useCounterMixin } from "@/stores/mixin";
-import { useQuasar, type QTableProps } from "quasar";
-import { ref, reactive, onMounted } from "vue";
+import { is, useQuasar } from "quasar";
+import { ref, onMounted } from "vue";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -9,23 +9,17 @@ import { useRegistryInFormationStore } from "@/modules/10_registry/store/registr
 
 import type { FileFormType } from "@/modules/10_registry/interface/index/Main";
 
-const fileList = ref<FileFormType[]>([]);
-const store = useRegistryInFormationStore();
 const $q = useQuasar();
-const mixin = useCounterMixin();
-const { showLoader, hideLoader, messageError, date2Thai } = mixin;
+const store = useRegistryInFormationStore();
+const { showLoader, hideLoader, messageError } = useCounterMixin();
 
-const modalHistory = ref<boolean>(false);
-/** ตัวแปรข้อมูล */
+const isLoading = ref<boolean>(false);
+const fileList = ref<FileFormType[]>([]);
 
-function onHistory() {
-  modalHistory.value = true;
-}
-
-/** get data */
-function getData() {
-  showLoader();
-  http
+/** ฟังก์ชันดึงข้อมูลไฟล์ */
+async function getData() {
+  isLoading.value = true;
+  await http
     .get(
       config.API.fileByFileUser(
         "ระบบทะเบียนประวัติ",
@@ -41,9 +35,7 @@ function getData() {
       messageError($q, e);
     })
     .finally(() => {
-      setTimeout(() => {
-        hideLoader();
-      }, 1500);
+      isLoading.value = false;
     });
 }
 
@@ -51,9 +43,9 @@ function getData() {
  * ดาวน์โหลดลิงค์ไฟล์
  * @param fileName file name
  */
-function downloadFile(fileName: string) {
+async function downloadFile(fileName: string) {
   showLoader();
-  http
+  await http
     .get(
       config.API.fileByFile(
         "ระบบทะเบียนประวัติ",
@@ -69,7 +61,7 @@ function downloadFile(fileName: string) {
     .catch((e) => {
       messageError($q, e);
     })
-    .finally(async () => {
+    .finally(() => {
       hideLoader();
     });
 }
@@ -78,8 +70,8 @@ onMounted(() => {
   getData();
 });
 </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">เอกสารหลักฐาน</span>
@@ -89,7 +81,12 @@ onMounted(() => {
         ไฟล์เอกสารหลักฐาน
       </div>
       <div class="col-12"><q-separator /></div>
-      <div class="row col-12 q-col-gutter-y-sm q-pa-sm">
+
+      <div v-if="isLoading" class="col-12 q-pa-sm">
+        <q-skeleton type="QSlider" />
+      </div>
+
+      <div v-else class="row col-12 q-col-gutter-y-sm q-pa-sm">
         <div v-if="fileList.length > 0" class="col-xs-12 row">
           <q-list class="full-width rounded-borders" bordered separator>
             <q-item
@@ -124,6 +121,7 @@ onMounted(() => {
     </q-card>
   </div>
 </template>
+
 <style scoped>
 .absolute_button {
   position: absolute;
diff --git a/src/modules/10_registry/05_Other/03_FileOther.vue b/src/modules/10_registry/05_Other/03_FileOther.vue
index 4682422..585997b 100644
--- a/src/modules/10_registry/05_Other/03_FileOther.vue
+++ b/src/modules/10_registry/05_Other/03_FileOther.vue
@@ -9,23 +9,17 @@ import { useRegistryInFormationStore } from "@/modules/10_registry/store/registr
 
 import type { FileFormType } from "@/modules/10_registry/interface/index/Main";
 
-const fileList = ref<FileFormType[]>([]);
-const store = useRegistryInFormationStore();
 const $q = useQuasar();
-const mixin = useCounterMixin();
-const { showLoader, hideLoader, messageError, date2Thai } = mixin;
+const store = useRegistryInFormationStore();
+const { showLoader, hideLoader, messageError } = useCounterMixin();
 
-const modalHistory = ref<boolean>(false);
-/** ตัวแปรข้อมูล */
+const isLoading = ref<boolean>(false);
+const fileList = ref<FileFormType[]>([]);
 
-function onHistory() {
-  modalHistory.value = true;
-}
-
-/** get data */
-function getData() {
-  showLoader();
-  http
+/** ฟังก์ชันดึงข้อมูลไฟล์ */
+async function getData() {
+  isLoading.value = true;
+  await http
     .get(
       config.API.fileByFileUser(
         "ระบบทะเบียนประวัติ",
@@ -41,9 +35,7 @@ function getData() {
       messageError($q, e);
     })
     .finally(() => {
-      setTimeout(() => {
-        hideLoader();
-      }, 1500);
+      isLoading.value = false;
     });
 }
 
@@ -51,9 +43,9 @@ function getData() {
  * ดาวน์โหลดลิงค์ไฟล์
  * @param fileName file name
  */
-function downloadFile(fileName: string) {
+async function downloadFile(fileName: string) {
   showLoader();
-  http
+  await http
     .get(
       config.API.fileByFile(
         "ระบบทะเบียนประวัติ",
@@ -69,7 +61,7 @@ function downloadFile(fileName: string) {
     .catch((e) => {
       messageError($q, e);
     })
-    .finally(async () => {
+    .finally(() => {
       hideLoader();
     });
 }
@@ -89,7 +81,11 @@ onMounted(() => {
         ไฟล์เอกสาร ก.พ.7
       </div>
       <div class="col-12"><q-separator /></div>
-      <div class="row col-12 q-col-gutter-y-sm q-pa-sm">
+      <div v-if="isLoading" class="col-12 q-pa-sm">
+        <q-skeleton type="QSlider" />
+      </div>
+
+      <div v-else class="row col-12 q-col-gutter-y-sm q-pa-sm">
         <div v-if="fileList.length > 0" class="col-xs-12 row">
           <q-list class="full-width rounded-borders" bordered separator>
             <q-item
diff --git a/src/modules/10_registry/Dialog/DialogHistory.vue b/src/modules/10_registry/Dialog/DialogHistory.vue
index e615ee9..03afa18 100644
--- a/src/modules/10_registry/Dialog/DialogHistory.vue
+++ b/src/modules/10_registry/Dialog/DialogHistory.vue
@@ -1,35 +1,47 @@
 <script setup lang="ts">
 import { ref, watch } from "vue";
 
-import DialogHeader from "@/components/DialogHeader.vue";
-import type { QTableProps } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 
-const type = ref<string>("");
-const mixin = useCounterMixin();
-const { date2Thai, onSearchDataTable, findOrgNameHtml } = mixin;
-const modal = defineModel<boolean>("modal", { required: true });
-const title = defineModel<string>("title", { required: true });
+/** import type */
+import type { QTableProps } from "quasar";
 
-const filter = ref<string>("");
+/** import component */
+import DialogHeader from "@/components/DialogHeader.vue";
 
-const rows = defineModel<any>("rows");
-const rowsData = defineModel<any>("rowsData");
-const columns = defineModel<QTableProps["columns"]>("columns");
-const visibleColumns = defineModel<string[]>("visibleColumns");
+const { date2Thai, onSearchDataTable, findOrgNameHtml } = useCounterMixin();
+
+/** define model */
+const modal = defineModel<boolean>("modal", { required: true }); // modal visibility
+const isLoading = defineModel<boolean>("isLoading", { required: true }); // loading state
+const title = defineModel<string>("title", { required: true }); // dialog title
+const rows = defineModel<any[]>("rows"); // data rows for the table
+const rowsData = defineModel<any[]>("rowsData"); // raw data for the table
+const columns = defineModel<QTableProps["columns"]>("columns"); // table columns definition
+const visibleColumns = defineModel<string[]>("visibleColumns"); // visible columns in the table
+
+/** define props */
+const props = defineProps({
+  getData: Function, // function to fetch data
+  type: String, // type of data (e.g., "Leave", "insignia")
+});
+
+const type = ref<string>(""); // ประเภทของข้อมูล
+const filter = ref<string>(""); // filter input for searching
 const pagination = ref({
   sortBy: "lastUpdatedAt",
 });
 
-const props = defineProps({
-  getData: Function,
-  type: String,
-});
+/** ปิด Dialog และรีเซ็ตค่า */
 function close() {
   modal.value = false;
   filter.value = "";
 }
 
+/**
+ * ฟังก์ชันแปลงวันที่เป็นรูปแบบไทย
+ * @param val - date range value
+ */
 function dateThaiRange(val: [Date, Date]) {
   if (val === null) {
   } else if (date2Thai(val[0]) === date2Thai(val[1])) {
@@ -39,6 +51,10 @@ function dateThaiRange(val: [Date, Date]) {
   }
 }
 
+/**
+ * ฟังก์ชันแปลงสถานะการลาเป็นข้อความที่
+ * @param val  สถานะการลา
+ */
 function statusLeave(val: string) {
   switch (val) {
     case "waitting":
@@ -54,10 +70,11 @@ function statusLeave(val: string) {
   }
 }
 
+/** ฟังก์ชันค้นหาข้อมูลในตาราง */
 function onSearch() {
   rows.value = onSearchDataTable(
     filter.value,
-    rowsData.value,
+    rowsData.value ? rowsData.value : [],
     columns.value ? columns.value : []
   );
 }
@@ -112,140 +129,139 @@ watch(
           </div>
         </div>
 
-        <d-table
-          flat
-          dense
-          bordered
-          virtual-scroll
-          :rows="rows"
-          :columns="columns"
-          :rows-per-page-options="[10, 25, 50, 100]"
-          :visible-columns="visibleColumns"
-          :virtual-scroll-sticky-size-start="48"
-          v-model:pagination="pagination"
-        >
-          <template v-slot:header="props">
-            <q-tr :props="props">
-              <q-th v-for="col in props.cols" :key="col.name" :props="props">
-                <span class="text-weight-medium">{{ col.label }}</span>
-              </q-th>
-            </q-tr>
-          </template>
+        <div class="col-12">
+          <d-table
+            flat
+            dense
+            bordered
+            virtual-scroll
+            :rows="rows"
+            :columns="columns"
+            :rows-per-page-options="[10, 25, 50, 100]"
+            :visible-columns="visibleColumns"
+            :virtual-scroll-sticky-size-start="48"
+            :pagination="pagination"
+            :loading="isLoading"
+            row-key="id"
+          >
+            <template v-slot:header="props">
+              <q-tr :props="props">
+                <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                  <span class="text-weight-medium">{{ col.label }}</span>
+                </q-th>
+              </q-tr>
+            </template>
 
-          <template v-slot:body="props">
-            <q-tr :props="props" class="cursor-pointer">
-              <q-td v-for="(col, index) in props.cols" :key="col.name">
-                <div v-if="col.name == 'no'">
-                  {{ props.rowIndex + 1 }}
-                </div>
-                <div v-else-if="col.name == 'insignia' && type == 'insignia'">
-                  {{ props.row.insignia ? `${props.row.insignia.name} ` : "-"
-                  }}{{
-                    props.row.insignia.shortName
-                      ? `(${props.row.insignia.shortName})`
-                      : ""
-                  }}
-                </div>
+            <template v-slot:body="props">
+              <q-tr :props="props" class="cursor-pointer">
+                <q-td v-for="(col, index) in props.cols" :key="col.name">
+                  <div v-if="col.name == 'no'">
+                    {{ props.rowIndex + 1 }}
+                  </div>
+                  <div v-else-if="col.name == 'insignia' && type == 'insignia'">
+                    {{ props.row.insignia ? `${props.row.insignia.name} ` : "-"
+                    }}{{
+                      props.row.insignia.shortName
+                        ? `(${props.row.insignia.shortName})`
+                        : ""
+                    }}
+                  </div>
 
-                <div v-else-if="col.name == 'dateLeave' && type == 'Leave'">
-                  {{
-                    dateThaiRange([
-                      props.row.dateStartLeave,
-                      props.row.dateEndLeave,
-                    ])
-                  }}
-                </div>
-                <div v-else-if="col.name == 'status' && type == 'Leave'">
-                  {{ props.row.status ? statusLeave(props.row.status) : "-" }}
-                </div>
-                <div v-else-if="col.name == 'organization'">
-                  {{
-                    props.row
-                      ? findOrgNameHtml({
-                          root: props.row.orgRoot,
-                          child1: props.row.orgChild1,
-                          child2: props.row.orgChild2,
-                          child3: props.row.orgChild3,
-                          child4: props.row.orgChild4,
-                        })
-                      : "-"
-                  }}
-                </div>
-                <div v-else>
-                  {{ col.value ? col.value : "-" }}
-                </div>
-              </q-td>
-            </q-tr>
-          </template>
-          <template v-slot:item="props">
-            <div
-              class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3 grid-style-transition"
-            >
-              <q-card bordered flat class="q-pt-md">
-                <q-list dense>
-                  <q-item v-for="col in props.cols" :key="col.name">
-                    <q-item-section class="fix_top">
-                      <q-item-label class="text-grey-6 text-weight-medium">{{
-                        col.label
-                      }}</q-item-label>
-                    </q-item-section>
-                    <q-item-section
-                      v-if="col.name == 'insignia' && type == 'insignia'"
-                      class="fix_top"
-                    >
-                      <q-item-label class="text-dark text-weight-medium">
-                        {{
-                          props.row.insignia
-                            ? `${props.row.insignia.name} `
-                            : "-"
-                        }}{{
-                          props.row.insignia.shortName
-                            ? `(${props.row.insignia.shortName})`
-                            : ""
-                        }}</q-item-label
+                  <div v-else-if="col.name == 'dateLeave' && type == 'Leave'">
+                    {{
+                      dateThaiRange([
+                        props.row.dateStartLeave,
+                        props.row.dateEndLeave,
+                      ])
+                    }}
+                  </div>
+                  <div v-else-if="col.name == 'status' && type == 'Leave'">
+                    {{ props.row.status ? statusLeave(props.row.status) : "-" }}
+                  </div>
+                  <div v-else-if="col.name == 'organization'">
+                    {{
+                      props.row
+                        ? findOrgNameHtml({
+                            root: props.row.orgRoot,
+                            child1: props.row.orgChild1,
+                            child2: props.row.orgChild2,
+                            child3: props.row.orgChild3,
+                            child4: props.row.orgChild4,
+                          })
+                        : "-"
+                    }}
+                  </div>
+                  <div v-else>
+                    {{ col.value ? col.value : "-" }}
+                  </div>
+                </q-td>
+              </q-tr>
+            </template>
+            <template v-slot:item="props">
+              <div
+                class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3 grid-style-transition"
+              >
+                <q-card bordered flat class="q-pt-md">
+                  <q-list dense>
+                    <q-item v-for="col in props.cols" :key="col.name">
+                      <q-item-section class="fix_top">
+                        <q-item-label class="text-grey-6 text-weight-medium">{{
+                          col.label
+                        }}</q-item-label>
+                      </q-item-section>
+                      <q-item-section
+                        v-if="col.name == 'insignia' && type == 'insignia'"
+                        class="fix_top"
                       >
-                    </q-item-section>
-                    <q-item-section
-                      v-else-if="col.name == 'dateLeave' && type == 'Leave'"
-                      class="fix_top"
-                    >
-                      <q-item-label class="text-dark text-weight-medium">
-                        {{
-                          dateThaiRange([
-                            props.row.dateStartLeave,
-                            props.row.dateEndLeave,
-                          ])
-                        }}</q-item-label
+                        <q-item-label class="text-dark text-weight-medium">
+                          {{
+                            props.row.insignia
+                              ? `${props.row.insignia.name} `
+                              : "-"
+                          }}{{
+                            props.row.insignia.shortName
+                              ? `(${props.row.insignia.shortName})`
+                              : ""
+                          }}</q-item-label
+                        >
+                      </q-item-section>
+                      <q-item-section
+                        v-else-if="col.name == 'dateLeave' && type == 'Leave'"
+                        class="fix_top"
                       >
-                    </q-item-section>
-                    <q-item-section
-                      v-else-if="col.name == 'status' && type == 'Leave'"
-                      class="fix_top"
-                    >
-                      <q-item-label class="text-dark text-weight-medium">
-                        {{
-                          props.row.status ? statusLeave(props.row.status) : "-"
-                        }}</q-item-label
+                        <q-item-label class="text-dark text-weight-medium">
+                          {{
+                            dateThaiRange([
+                              props.row.dateStartLeave,
+                              props.row.dateEndLeave,
+                            ])
+                          }}</q-item-label
+                        >
+                      </q-item-section>
+                      <q-item-section
+                        v-else-if="col.name == 'status' && type == 'Leave'"
+                        class="fix_top"
                       >
-                    </q-item-section>
-                    <q-item-section v-else class="fix_top">
-                      <q-item-label class="text-dark text-weight-medium">{{
-                        col.value ? col.value : "-"
-                      }}</q-item-label>
-                    </q-item-section>
-                  </q-item>
-                </q-list>
-              </q-card>
-            </div>
-          </template>
-          <template v-slot:no-data>
-            <div
-              class="full-width row flex-center q-pa-sm rounded-borders text-weight-medium"
-            >
-              <span> ไม่พบข้อมูล </span>
-            </div>
-          </template>
-        </d-table>
+                        <q-item-label class="text-dark text-weight-medium">
+                          {{
+                            props.row.status
+                              ? statusLeave(props.row.status)
+                              : "-"
+                          }}</q-item-label
+                        >
+                      </q-item-section>
+                      <q-item-section v-else class="fix_top">
+                        <q-item-label class="text-dark text-weight-medium">{{
+                          col.value ? col.value : "-"
+                        }}</q-item-label>
+                      </q-item-section>
+                    </q-item>
+                  </q-list>
+                </q-card>
+              </div>
+            </template>
+          </d-table>
+        </div>
       </q-card-section>
     </q-card>
   </q-dialog>
diff --git a/src/modules/10_registry/components/DialogAddRequestEdit.vue b/src/modules/10_registry/components/DialogAddRequestEdit.vue
index 7df4b27..f230cef 100644
--- a/src/modules/10_registry/components/DialogAddRequestEdit.vue
+++ b/src/modules/10_registry/components/DialogAddRequestEdit.vue
@@ -12,9 +12,7 @@ import DialogHeader from "@/components/DialogHeader.vue";
 import { useRequestEditStore } from "@/modules/10_registry/store/RequestEdit";
 import { useCounterMixin } from "@/stores/mixin";
 
-/**
- * use
- */
+/** use*/
 const $q = useQuasar();
 const link = ref<string>("");
 const store = useRequestEditStore();
@@ -22,24 +20,23 @@ const dataStore = useDataStore();
 const { dialogConfirm, showLoader, hideLoader, messageError, success } =
   useCounterMixin();
 
-/**
- *  props
- */
+/** props*/
 const modalInfo = ref<boolean>(false);
 const modal = defineModel<boolean>("modal", { required: true });
 const props = defineProps({
-  fetchData: { type: Function, requied: true },
+  fetchData: { type: Function, required: true },
 });
 
-const isReadOnly = ref<boolean>(false);
-const profileId = ref<string>("");
+const isReadOnly = ref<boolean>(false); // อ่านข้อมูลได้อย่างเดียว
+const profileId = ref<string>(""); // profileId ของผู้ยื่นคำร้องq
 const formData = reactive({
   topic: "",
   detail: "",
   document: null,
 });
-const topicOption = ref<string[]>(store.optionTopic);
+const topicOption = ref<string[]>(store.optionTopic); // ตัวเลือกเรื่องที่ต้องการแก้ไข
 
+/** function ปิด Dialog และเคลียร์ข้อมูล */
 function closeDialog() {
   modal.value = false;
   formData.topic = "";
@@ -47,9 +44,7 @@ function closeDialog() {
   formData.document = null;
 }
 
-/**
- * function ยืนยันการยื่นคำร้องขอแก้ไขข้อมูล
- */
+/** function ยืนยันการยื่นคำร้องขอแก้ไขข้อมูล */
 function onSubmit() {
   dialogConfirm(
     $q,
@@ -65,17 +60,18 @@ function onSubmit() {
         })
         .then(async (res) => {
           if (formData.document) {
-            createURLUpload(res.data.result, formData.document);
+            await createURLUpload(res.data.result, formData.document);
           } else {
             formData.document = null;
             await props.fetchData?.();
             await success($q, "บันทึกข้อมูลสำเร็จ");
             closeDialog();
-            hideLoader();
           }
         })
         .catch((err) => {
           messageError($q, err);
+        })
+        .finally(() => {
           hideLoader();
         });
     },
@@ -86,10 +82,12 @@ function onSubmit() {
 
 /**
  * function สร้าง URL อัปโหลไฟล์เอกสารหลักฐาน
+ * @param id คำร้องขอแก้ไขข้อมูล
+ * @param file ไฟล์ที่อัปโหลด
  */
-function createURLUpload(id: string, file: any) {
+async function createURLUpload(id: string, file: any) {
   const fileName = { fileName: file.name };
-  http
+  await http
     .post(
       config.API.file(
         "ระบบทะเบียนประวัติ",
@@ -108,7 +106,7 @@ function createURLUpload(id: string, file: any) {
           res.data[key]?.fileName !== ""
       );
       foundKey &&
-        uploadFileDoc(res.data[foundKey]?.uploadUrl, formData.document);
+        (await uploadFileDoc(res.data[foundKey]?.uploadUrl, formData.document));
     })
     .catch((err) => {
       messageError($q, err);
@@ -117,32 +115,29 @@ function createURLUpload(id: string, file: any) {
 
 /**
  * function สำหรับอัพโหลดไฟล์เอกสารหลักฐาน
+ * @param uploadUrl URL สำหรับอัปโหลดไฟล์
+ * @param file ไฟล์ที่อัปโหลด
  */
-function uploadFileDoc(uploadUrl: string, file: any) {
-  showLoader();
-  axios
+async function uploadFileDoc(uploadUrl: string, file: any) {
+  await axios
     .put(uploadUrl, file, {
       headers: {
         "Content-Type": file.type,
       },
     })
-    .then(async (res) => {
+    .then(async () => {
       await props.fetchData?.();
       await success($q, "บันทึกข้อมูลสำเร็จ");
       closeDialog();
     })
     .catch((e) => {
       messageError($q, e);
-      hideLoader();
-    })
-    .finally(() => {
-      hideLoader();
     });
 }
 
 /**
- * class input
- * @param val
+ * function สำหรับจัดการ class ของ input
+ * @param val ค่าที่ใช้ในการกำหนด class
  */
 function classInput(val: boolean) {
   return {
@@ -164,9 +159,7 @@ function filterOption(val: string, update: Function) {
   });
 }
 
-/**
- * function fetch profileId
- */
+/** function fetch profileId */
 async function fetchProfile() {
   try {
     isReadOnly.value = dataStore.officerType === "OFFICER";
diff --git a/src/modules/10_registry/components/skeleton/Address.vue b/src/modules/10_registry/components/skeleton/Address.vue
new file mode 100644
index 0000000..9dca1e0
--- /dev/null
+++ b/src/modules/10_registry/components/skeleton/Address.vue
@@ -0,0 +1,40 @@
+<template>
+  <div class="col-12 col-sm-12 col-md-6 q-gutter-y-sm">
+    <div class="row">
+      <div class="col-5 text-grey-6 text-weight-medium">
+        ที่อยู่ตามทะเบียนบ้าน
+      </div>
+      <div class="col-7">
+        <q-skeleton type="text" />
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="col-5 text-grey-6 text-weight-medium">จังหวัด</div>
+      <div class="col-7">
+        <q-skeleton type="text" />
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="col-5 text-grey-6 text-weight-medium">เขต / อำเภอ</div>
+      <div class="col-7">
+        <q-skeleton type="text" />
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="col-5 text-grey-6 text-weight-medium">แขวง / ตำบล</div>
+      <div class="col-7">
+        <q-skeleton type="text" />
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="col-5 text-grey-6 text-weight-medium">รหัสไปรษณีย์</div>
+      <div class="col-7">
+        <q-skeleton type="text" />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/modules/10_registry/components/skeleton/Family.vue b/src/modules/10_registry/components/skeleton/Family.vue
new file mode 100644
index 0000000..2e44348
--- /dev/null
+++ b/src/modules/10_registry/components/skeleton/Family.vue
@@ -0,0 +1,103 @@
+<script setup lang="ts">
+const type = defineModel("type", {
+  type: String,
+  default: "",
+});
+</script>
+
+<template>
+  <div class="col-12" v-if="type === 'couple'">
+    <q-card bordered class="bg-grey-1 q-pa-sm">
+      <div class="row">
+        <div class="col-12 col-sm-12 col-md-6 q-gutter-y-sm">
+          <div class="row">
+            <div class="col-5 text-grey-6 text-weight-medium">
+              สถานภาพการสมรส
+            </div>
+            <div class="col-7">
+              <q-skeleton type="text" />
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-5 text-grey-6 text-weight-medium">
+              เลขประจำตัวประชาชน
+            </div>
+            <div class="col-7">
+              <q-skeleton type="text" />
+            </div>
+          </div>
+
+          <div class="row">
+            <div class="col-5 text-grey-6 text-weight-medium">ชื่อ-นามสกุล</div>
+            <div class="col-7">
+              <q-skeleton type="text" />
+            </div>
+          </div>
+
+          <div class="row">
+            <div class="col-5 text-grey-6 text-weight-medium">นามสกุลเดิม</div>
+            <div class="col-7">
+              <q-skeleton type="text" />
+            </div>
+          </div>
+        </div>
+        <div class="col-12 col-sm-12 col-md-6 q-gutter-y-sm">
+          <div class="row">
+            <div class="col-5 text-grey-6 text-weight-medium">
+              สถานภาพการมีชีวิต
+            </div>
+            <div class="col-7">
+              <q-skeleton type="text" />
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-5 text-grey-6 text-weight-medium">อาชีพ</div>
+            <div class="col-7">
+              <q-skeleton type="text" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </q-card>
+  </div>
+
+  <div class="col-12" v-else>
+    <q-card bordered class="bg-grey-1 q-pa-sm">
+      <div class="row">
+        <div class="col-12 col-sm-12 col-md-12 q-gutter-y-sm">
+          <div class="row">
+            <div class="col-5 text-grey-6 text-weight-medium">
+              เลขประจำตัวประชาชน
+            </div>
+            <div class="col-7">
+              <q-skeleton type="text" />
+            </div>
+          </div>
+
+          <div class="row">
+            <div class="col-5 text-grey-6 text-weight-medium">ชื่อ-นามสกุล</div>
+            <div class="col-7">
+              <q-skeleton type="text" />
+            </div>
+          </div>
+
+          <div class="row">
+            <div class="col-5 text-grey-6 text-weight-medium">
+              สถานภาพการมีชีวิต
+            </div>
+            <div class="col-7">
+              <q-skeleton type="text" />
+            </div>
+          </div>
+
+          <div class="row">
+            <div class="col-5 text-grey-6 text-weight-medium">อาชีพ</div>
+            <div class="col-7">
+              <q-skeleton type="text" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </q-card>
+  </div>
+</template>
diff --git a/src/modules/10_registry/components/skeleton/Government.vue b/src/modules/10_registry/components/skeleton/Government.vue
new file mode 100644
index 0000000..dfcc69d
--- /dev/null
+++ b/src/modules/10_registry/components/skeleton/Government.vue
@@ -0,0 +1,110 @@
+<template>
+  <q-card bordered class="bg-grey-1 q-pa-md">
+    <div class="row q-col-gutter-y-sm">
+      <div class="col-12 col-sm-12 col-md-6">
+        <div class="row q-col-gutter-y-sm">
+          <div class="col-5 text-grey-6 text-weight-medium">สังกัด</div>
+          <div class="col-7 text-html">
+            <q-skeleton class="q-mb-sm" type="text" />
+          </div>
+          <div class="col-5 text-grey-6 text-weight-medium">
+            <q-skeleton class="q-mb-sm" type="text" />
+          </div>
+          <div class="col-7">
+            <q-skeleton class="q-mb-sm" type="text" />
+          </div>
+
+          <div class="col-5 text-grey-6 text-weight-medium">
+            <q-skeleton class="q-mb-sm" type="text" />
+          </div>
+          <div class="col-7">
+            <q-skeleton class="q-mb-sm" type="text" />
+          </div>
+        </div>
+      </div>
+
+      <div class="col-12 col-sm-12 col-md-6">
+        <div class="row q-col-gutter-y-sm">
+          <div class="col-5 text-grey-6 text-weight-medium">
+            <q-skeleton class="q-mb-sm" type="text" />
+          </div>
+          <div class="col-7">
+            <q-skeleton class="q-mb-sm" type="text" />
+          </div>
+          <div class="col-5 text-grey-6 text-weight-medium">
+            <q-skeleton class="q-mb-sm" type="text" />
+          </div>
+          <div class="col-7">
+            <q-skeleton class="q-mb-sm" type="text" />
+          </div>
+          <div class="col-5 text-grey-6 text-weight-medium">ด้าน/สาขา</div>
+          <div class="col-7">
+            <q-skeleton class="q-mb-sm" type="text" />
+          </div>
+        </div>
+      </div>
+    </div>
+    <q-separator class="q-my-md" />
+    <div class="row">
+      <div class="col-12 col-sm-12 col-md-6 q-gutter-y-sm">
+        <div class="row">
+          <div class="col-6 text-grey-6 text-weight-medium">
+            วันที่สั่งบรรจุ
+          </div>
+          <div class="col-6">
+            <q-skeleton class="q-mb-sm" type="text" />
+          </div>
+        </div>
+
+        <div class="row">
+          <div class="col-6 text-grey-6 text-weight-medium">
+            วันที่เริ่มปฏิบัติราชการ
+          </div>
+          <div class="col-6">
+            <q-skeleton class="q-mb-sm" type="text" />
+          </div>
+        </div>
+
+        <div class="row">
+          <div class="col-6 text-grey-6 text-weight-medium">
+            วันครบเกษียณอายุ
+          </div>
+          <div class="col-6">
+            <q-skeleton class="q-mb-sm" type="text" />
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-6 text-grey-6 text-weight-medium">
+            วันที่เกษียณอายุราชการตามกฏหมาย
+          </div>
+          <div class="col-6">
+            <q-skeleton class="q-mb-sm" type="text" />
+          </div>
+        </div>
+      </div>
+
+      <div class="col-12 col-sm-12 col-md-6 q-gutter-y-sm">
+        <div class="row">
+          <div class="col-5 text-grey-6 text-weight-medium">อายุราชการ</div>
+          <div class="col-7">
+            <q-skeleton class="q-mb-sm" type="text" />
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-5 text-grey-6 text-weight-medium">ขาดราชการ</div>
+          <div class="col-7">
+            <q-skeleton class="q-mb-sm" type="text" />
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-5 text-grey-6 text-weight-medium">
+            อายุราชการเกื้อกูล
+          </div>
+          <div class="col-7">
+            <q-skeleton class="q-mb-sm" type="text" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </q-card>
+</template>
diff --git a/src/modules/10_registry/tabs/01_information.vue b/src/modules/10_registry/tabs/01_information.vue
index a56fa8c..13c5f75 100644
--- a/src/modules/10_registry/tabs/01_information.vue
+++ b/src/modules/10_registry/tabs/01_information.vue
@@ -2,12 +2,12 @@
 import { useRouter } from "vue-router";
 
 /** component */
-import Information from "@/modules/10_registry/01_Information/01_Information.vue";
-import ChangeName from "@/modules/10_registry/01_Information/02_ChangeName.vue";
-import Address from "@/modules/10_registry/01_Information/03_Address.vue";
-import Family from "@/modules/10_registry/01_Information/04_Family.vue";
-import Educations from "@/modules/10_registry/01_Information/05_Educations.vue";
-import Ability from "@/modules/10_registry/01_Information/06_Ability.vue";
+import Information from "@/modules/10_registry/01_Information/01_Information.vue"; //ปรับข้อมูลส่วนตัว
+import ChangeName from "@/modules/10_registry/01_Information/02_ChangeName.vue"; //เปลี่ยนชื่อ-นามสกุล
+import Address from "@/modules/10_registry/01_Information/03_Address.vue"; //ที่อยู่
+import Family from "@/modules/10_registry/01_Information/04_Family.vue"; //ข้อมูลครอบครัว
+import Educations from "@/modules/10_registry/01_Information/05_Educations.vue"; //ข้อมูลการศึกษา
+import Ability from "@/modules/10_registry/01_Information/06_Ability.vue"; //ความสามารถ
 
 const router = useRouter();
 </script>
diff --git a/src/modules/10_registry/views/main.vue b/src/modules/10_registry/views/main.vue
index 7b1c10f..3d004d4 100644
--- a/src/modules/10_registry/views/main.vue
+++ b/src/modules/10_registry/views/main.vue
@@ -1,44 +1,51 @@
 <script setup lang="ts">
-import { ref, computed } from "vue";
-import { useCounterMixin } from "@/stores/mixin";
-import { useDataStore } from "@/stores/data";
-import { useRegistryInFormationStore } from "@/modules/10_registry/store/registry";
-import genReport from "@/plugins/genreport";
+import { ref, computed, onMounted } from "vue";
+import { useQuasar } from "quasar";
 
-//หน้าเมนู
+import http from "@/plugins/http";
+import config from "@/app.config";
+import genReport from "@/plugins/genreport";
+import { useRouter } from "vue-router";
+import { useRegistryInFormationStore } from "@/modules/10_registry/store/registry";
+import { useDataStore } from "@/stores/data";
+import { useCounterMixin } from "@/stores/mixin";
+
+/** import components */
 import InformationPage from "@/modules/10_registry/tabs/01_information.vue";
 import GovernmentPage from "@/modules/10_registry/tabs/02_government.vue";
 import SalaryPage from "@/modules/10_registry/tabs/03_salary.vue";
 import Certificate from "@/modules/10_registry/tabs/04_Achievement.vue";
 import OtherPage from "@/modules/10_registry/tabs/05_other.vue";
 
-import { useRouter } from "vue-router";
-
-import http from "@/plugins/http";
-import config from "@/app.config";
-import { useQuasar } from "quasar";
-
-const store = useRegistryInFormationStore();
 const $q = useQuasar();
-const dataStore = useDataStore();
-const mixin = useCounterMixin();
-const { messageError, showLoader, hideLoader } = mixin;
 const router = useRouter();
-const tab = ref<string>("information");
+const store = useRegistryInFormationStore();
+const dataStore = useDataStore();
+const { messageError, showLoader, hideLoader } = useCounterMixin();
+
+const tab = ref<string>("information"); // ตัวแปรสำหรับเก็บชื่อแท็บที่เลือก
+const sizeImg = ref<string>(""); // ขนาดของรูปภาพโปรไฟล์
+
+/** ข้อความแสดงชื่อเงินเดือนหรือค่าจ้าง */
 const salaryText = computed(() => {
- return  dataStore.officerType == "OFFICER" ? "เงินเดือน" : "ค่าจ้าง";
+  return dataStore.officerType == "OFFICER" ? "เงินเดือน" : "ค่าจ้าง";
 });
 
-const sizeImg = ref<string>("");
-function onResize(size: any) {
+/**
+ * ฟังก์ชันจัดการขนาดของรูปภาพโปรไฟล์
+ * @param size ขนาดที่ได้จาก q-resize-observer
+ */
+function onResize(size: { width: number; height: number }) {
   const width = size.width > 100 ? 100 : size.width;
   sizeImg.value = `${width}px`;
 }
 
-function onMobile(type: string) {
-  router.push(`/registry/${type}`);
-}
-
+/**
+ * ฟังก์ชันดาวน์โหลดไฟล์ ก.พ.7/ก.ก.1 หรือประวัติแบบย่อ
+ * @param type ประเภทไฟล์ที่ต้องการดาวน์โหลด
+ * FULL: ก.พ.7/ก.ก.1
+ * SHORT: ประวัติแบบย่อ
+ */
 async function onClickDownloadKp7(type: string) {
   showLoader();
   const url =
@@ -66,19 +73,19 @@ async function onClickDownloadKp7(type: string) {
     });
 }
 
-/**
- * ฟังชั่นกลับหน้าหลัก
- */
+/** ฟังชั่นกลับหน้าหลัก*/
 const clickBack = () => {
   router.push(`/`);
 };
 
-/**
- * function redirect ไปหน้ารายการคำร้องขอแก้ไขข้อมูล
- */
+/** ฟังก์ชัน redirect ไปหน้ารายการคำร้องขอแก้ไขข้อมูล*/
 function redirectToPagePetition() {
   router.push(`/registry/request-edit`);
 }
+
+function onMobile(type: string) {
+  router.push(`/registry/${type}`);
+}
 </script>
 
 <template>
@@ -106,7 +113,40 @@ function redirectToPagePetition() {
       </div>
       <div v-if="$q.screen.gt.xs" class="row q-col-gutter-md">
         <div class="col-3">
-          <q-card bordered>
+          <q-card v-if="dataStore.isLoadingProfile" bordered>
+            <q-resize-observer @resize="onResize" />
+            <q-card-section>
+              <div class="relative-position" style="height: 120px">
+                <div class="absolute-center">
+                  <q-skeleton type="QAvatar" :size="sizeImg || '100px'" />
+                </div>
+              </div>
+              <div class="column items-center q-mt-md q-mb-sm q-gutter-sm">
+                <q-skeleton type="text" width="120px" />
+                <q-skeleton type="text" width="150px" />
+                <q-skeleton type="text" width="100px" />
+                <q-skeleton type="text" width="50px" />
+              </div>
+            </q-card-section>
+
+            <q-list separator class="q-mt-md">
+              <q-item v-for="i in 2" :key="i">
+                <q-item-section>
+                  <q-skeleton type="text" />
+                </q-item-section>
+                <q-item-section>
+                  <q-skeleton type="text" />
+                </q-item-section>
+              </q-item>
+            </q-list>
+
+            <q-card-section class="q-gutter-y-sm">
+              <q-skeleton type="QBtn" class="full-width" height="48px" />
+              <q-skeleton type="QBtn" class="full-width" height="48px" />
+            </q-card-section>
+          </q-card>
+
+          <q-card v-else bordered>
             <q-resize-observer @resize="onResize" />
             <q-card-section>
               <div class="relative-position" style="height: 120px">
@@ -220,8 +260,6 @@ function redirectToPagePetition() {
 
             <q-separator />
 
-            <!-- รายการเเต่ละหน้า -->
-
             <q-tab-panels v-model="tab" animated>
               <q-tab-panel name="information">
                 <InformationPage />
@@ -248,7 +286,41 @@ function redirectToPagePetition() {
       </div>
 
       <div v-else>
-        <q-card bordered>
+        <q-card v-if="dataStore.isLoadingProfile" bordered>
+          <q-resize-observer @resize="onResize" />
+          <q-card-section>
+            <div class="relative-position" style="height: 120px">
+              <div class="absolute-center">
+                <q-skeleton type="QAvatar" :size="sizeImg || '100px'" />
+              </div>
+            </div>
+
+            <div class="column items-center q-mt-md q-mb-lg q-gutter-sm">
+              <q-skeleton type="text" width="120px" />
+              <q-skeleton type="text" width="150px" />
+              <q-skeleton type="text" width="100px" />
+              <q-skeleton type="text" width="50px" />
+            </div>
+
+            <div class="row justify-center q-gutter-x-lg">
+              <q-skeleton type="QRadio" size="48px" />
+              <q-skeleton type="QRadio" size="48px" />
+            </div>
+
+            <q-list separator class="q-mt-md">
+              <q-item v-for="i in 5" :key="i">
+                <q-item-section>
+                  <q-skeleton type="text" width="120px" height="16px" />
+                </q-item-section>
+                <q-item-section avatar>
+                  <q-skeleton type="QIcon" size="24px" />
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </q-card-section>
+        </q-card>
+
+        <q-card v-else bordered>
           <q-resize-observer @resize="onResize" />
           <q-card-section>
             <div class="text-center q-mt-md">
diff --git a/src/modules/10_registry/views/requestEditDetail.vue b/src/modules/10_registry/views/requestEditDetail.vue
index 4ad8548..3c40b00 100644
--- a/src/modules/10_registry/views/requestEditDetail.vue
+++ b/src/modules/10_registry/views/requestEditDetail.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, watch } from "vue";
+import { ref, onMounted } from "vue";
 import { useQuasar } from "quasar";
 
 import { useRouter, useRoute } from "vue-router";
@@ -37,8 +37,11 @@ const statusOptionMain = ref<DataOption[]>(
 );
 const statusOption = ref<DataOption[]>(statusOptionMain.value); //ตัวเลือกรายการสถานะ
 
+const isLoading = ref<boolean>(false); //สถานะการโหลดข้อมูล
+
 async function fetchData() {
-  showLoader();
+  // showLoader();
+  isLoading.value = true;
   await http
     .get(config.API.requestEditByType(link.value) + `${requestId.value}`)
     .then(async (res) => {
@@ -56,9 +59,10 @@ async function fetchData() {
     })
     .catch((err) => {
       messageError($q, err);
-      hideLoader();
     })
-    .finally(() => {});
+    .finally(() => {
+      isLoading.value = false;
+    });
 }
 
 const checkFile = ref<null | false | "img" | "doc">(null); // เช็คไฟล์อัปโหลด null ค่าเริ่มต้น, false ไม่มีไฟล์, "img" รูปภาพ, "doc" เอกสาร
@@ -154,7 +158,37 @@ onMounted(async () => {
               </div>
             </div>
             <div class="col-12"><q-separator /></div>
-            <q-card-section class="col-12">
+
+            <q-card-section v-if="isLoading" class="col-12">
+              <div class="row q-col-gutter-sm">
+                <!-- วันที่ยื่นขอ Skeleton -->
+                <div class="col-md-2 col-xs-12">
+                  <q-skeleton type="QInput" height="40px" />
+                </div>
+
+                <!-- เรื่อง Skeleton -->
+                <div class="col-md-10 col-xs-12">
+                  <q-skeleton type="QInput" height="40px" />
+                </div>
+
+                <!-- รายละเอียด Skeleton -->
+                <div class="col-12">
+                  <q-skeleton type="QInput" height="160px" />
+                </div>
+
+                <!-- ไฟล์ Skeleton -->
+                <div class="col-12 q-mt-md">
+                  <q-skeleton
+                    type="rect"
+                    width="120px"
+                    height="20px"
+                    class="q-mb-sm"
+                  />
+                </div>
+              </div>
+            </q-card-section>
+
+            <q-card-section v-else class="col-12">
               <div class="row q-col-gutter-sm">
                 <!-- วันที่ยื่นขอ -->
                 <div class="col-md-2 col-xs-12">
@@ -265,7 +299,19 @@ onMounted(async () => {
               <div class="q-pl-sm text-weight-bold text-dark">สถานะคำร้อง</div>
             </div>
             <div class="col-12"><q-separator /></div>
-            <q-card-section class="col-12">
+            <q-card-section v-if="isLoading" class="col-12">
+              <div class="row q-col-gutter-sm">
+                <div class="col-12">
+                  <q-skeleton type="QInput" height="40px" />
+                </div>
+
+                <div class="col-12">
+                  <q-skeleton type="QInput" height="160px" />
+                </div>
+              </div>
+            </q-card-section>
+
+            <q-card-section v-else class="col-12">
               <div class="row q-col-gutter-sm">
                 <div class="col-xs-12 col-md-12">
                   <q-select
@@ -312,6 +358,7 @@ onMounted(async () => {
 
           <div class="col-12 q-mt-sm">
             <Workflow
+              v-if="dataStore.officerType && requestId"
               ref="workflowRef"
               :id="requestId"
               :sys-name="
diff --git a/src/modules/10_registry/views/requestEditMain.vue b/src/modules/10_registry/views/requestEditMain.vue
index a1dce77..4f689a0 100644
--- a/src/modules/10_registry/views/requestEditMain.vue
+++ b/src/modules/10_registry/views/requestEditMain.vue
@@ -1,60 +1,40 @@
 <script setup lang="ts">
-import { ref, onMounted, watch } from "vue";
+import { ref, onMounted } from "vue";
 
 import config from "@/app.config";
 import http from "@/plugins/http";
 import { useDataStore } from "@/stores/data";
 import { useQuasar } from "quasar";
 import { useRouter } from "vue-router";
-
-/**
- * importType
- */
-import type { QTableProps } from "quasar";
-import type {
-  DataOption,
-  NewPagination,
-} from "@/modules/10_registry/interface/index/Main";
-import type { DataRequest } from "@/modules/10_registry/interface/response/Main";
-
-/**
- * importComponents
- */
-import DialogAddRequestEdit from "@/modules/10_registry/components/DialogAddRequestEdit.vue";
-
-/**
- * importStore
- */
 import { useRequestEditStore } from "@/modules/10_registry/store/RequestEdit";
 import { useCounterMixin } from "@/stores/mixin";
 
-/**
- * use
- */
+/**importType*/
+import type { QTableProps } from "quasar";
+import type { PropsTable } from "@/interface/PropsTable";
+import type { DataOption } from "@/modules/10_registry/interface/index/Main";
+import type { DataRequest } from "@/modules/10_registry/interface/response/Main";
+
+/** importComponents*/
+import DialogAddRequestEdit from "@/modules/10_registry/components/DialogAddRequestEdit.vue";
+
+/** use */
 const $q = useQuasar();
 const store = useRequestEditStore();
 const link = ref<string>("");
 const router = useRouter();
 const dataStore = useDataStore();
-const { showLoader, hideLoader, messageError, dialogRemove, success } =
-  useCounterMixin();
+const { messageError } = useCounterMixin();
 
-/**
- * ตัวแปร
- */
+/** ตัวแปร*/
 const modalPetiton = ref<boolean>(false);
 const status = ref<string>("");
 const keyword = ref<string>("");
 const statusOption = ref<DataOption[]>(store.optionStatus);
+const isLoading = ref<boolean>(false);
 
-/**
- * Table
- */
+/** Table*/
 const rows = ref<DataRequest[]>([]);
-const page = ref<number>(1);
-const pageSize = ref<number>(10);
-const rowsTotal = ref<number>(0);
-const maxPage = ref<number>(0);
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -123,61 +103,56 @@ const visibleColumns = ref<string[]>([
   "status",
   "remark",
 ]);
+const pagination = ref<PropsTable.Pagination>({
+  descending: true,
+  page: 1,
+  rowsPerPage: 10,
+  rowsNumber: 0,
+});
 
-/**
- * function กลับไปหน้าทะเบียนประวัติ
- */
+/** function กลับไปหน้าทะเบียนประวัติ*/
 function onclickBackPage() {
   router.push(`/registry`);
 }
 
-/**
- * function กดเพิ่มรายการยื่นคำร้องขอแก้ไขข้อมูล
- */
+/** function กดเพิ่มรายการยื่นคำร้องขอแก้ไขข้อมูล*/
 function onClickAdd() {
   modalPetiton.value = true;
 }
 
-/**
- * function fetch รายการข้อมูลการยื่นคำร้องขอแก้ไขข้อมูล
- */
-function fetchListRequset() {
+/** function fetch รายการข้อมูลการยื่นคำร้องขอแก้ไขข้อมูล*/
+async function fetchListRequset() {
   let queryParams = {
-    page: page.value,
-    pageSize: pageSize.value,
+    page: pagination.value.page,
+    pageSize: pagination.value.rowsPerPage,
     status: status.value,
     keyword: keyword.value,
   };
-  showLoader();
-  http
+  isLoading.value = true;
+  await http
     .get(config.API.requestEditByType(link.value) + `user`, {
       params: queryParams,
     })
     .then((res) => {
-      const data = res.data.result;
-      maxPage.value = Math.ceil(data.total / pageSize.value);
-      rowsTotal.value = data.total;
-      rows.value = data.data;
+      const result = res.data.result;
+      pagination.value.rowsNumber = result.total;
+      rows.value = result.data;
     })
     .catch((err) => {
       messageError($q, err);
     })
     .finally(() => {
-      hideLoader();
+      isLoading.value = false;
     });
 }
 
-/**
- * function เลือกสถานะคำร้อง
- */
+/** function เลือกสถานะคำร้อง*/
 function updateStatusValue() {
-  page.value = 1;
+  pagination.value.page = 1;
   fetchListRequset();
 }
 
-/**
- * function เคลียร์ข้อมูลสถานะคำร้อง
- */
+/** function เคลียร์ข้อมูลสถานะคำร้อง*/
 function clearStatus() {
   status.value = "";
   statusOption.value = store.optionStatus;
@@ -197,87 +172,17 @@ function filterOption(val: string, update: Function) {
   });
 }
 
-function updatePageSizePagination(newPagination: NewPagination) {
-  page.value = 1;
-  pageSize.value = newPagination.rowsPerPage;
-}
-
 /**
- * function หาชื่อไฟล์
- * @param id รายการยื่นคำร้องขอแก้ไขข้อมูล
+ * ฟังก์ชันรับ request จากตาราง เมื่อมีการเปลี่ยน pagination
+ * @param requestProps ข้อมูลการร้องขอจากตาราง
  */
-function onDownloadFile(id: string) {
-  showLoader();
-  http
-    .get(
-      config.API.file(
-        "ระบบทะเบียนประวัติ",
-        "เอกสารหลักฐานคำร้องขอแก้ไขข้อมูล",
-        id
-      )
-    )
-    .then((res) => {
-      if (res.data.length !== 0) {
-        downloadUrl(id, res.data[0].fileName);
-      } else {
-        hideLoader();
-      }
-    })
-    .catch((e) => {
-      messageError($q, e);
-      hideLoader();
-    });
+function onTableRequest(requestProps: PropsTable.RequestProps) {
+  const newPagination = requestProps?.pagination || requestProps;
+  if (!newPagination?.page || !newPagination?.rowsPerPage) return;
+  pagination.value = { ...newPagination };
+  fetchListRequset();
 }
 
-/**
- * function  โหลดไฟล์
- * @param id  รายการยื่นคำร้องขอแก้ไขข้อมูล
- * @param fileName  ชื่อไฟล์
- */
-function downloadUrl(id: string, fileName: string) {
-  http
-    .get(
-      config.API.fileByFile(
-        "ระบบทะเบียนประวัติ",
-        "เอกสารหลักฐานคำร้องขอแก้ไขข้อมูล",
-        id,
-        fileName
-      )
-    )
-    .then((res) => {
-      window.open(res.data.downloadUrl, "_blank");
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-// function onDeleteLidt(id: string) {
-//   dialogRemove($q, () => {
-//     showLoader();
-//     http
-//       .delete(config.API.requestEdit + `${id}`)
-//       .then(async (res) => {
-//         await fetchListRequset();
-//         await success($q, "ลบข้อมูลสำเร็จ");
-//       })
-//       .catch((err) => {
-//         messageError($q, err);
-//         hideLoader();
-//       });
-//   });
-// }
-
-watch(
-  () => pageSize.value,
-  () => {
-    fetchListRequset();
-  }
-);
-
 onMounted(async () => {
   link.value = await dataStore.getProFileType();
   fetchListRequset();
@@ -388,7 +293,9 @@ onMounted(async () => {
             :rows-per-page-options="[10, 25, 50, 100]"
             :paging="true"
             :visible-columns="visibleColumns"
-            @update:pagination="updatePageSizePagination"
+            v-model:pagination="pagination"
+            :loading="isLoading"
+            @request="onTableRequest"
           >
             <template v-slot:header="props">
               <q-tr :props="props">
@@ -411,52 +318,13 @@ onMounted(async () => {
                   <div v-if="col.name == 'no'">
                     {{ props.rowIndex + 1 }}
                   </div>
-                  <!-- <div v-else-if="col.name === 'document'">
-                    <q-btn
-                      icon="mdi-download"
-                      round
-                      dense
-                      flat
-                      color="primary"
-                      size="12px"
-                      @click.stop.pervent="onDownloadFile(props.row.id)"
-                    >
-                      <q-tooltip>หลักฐานอ้างอิง</q-tooltip>
-                    </q-btn>
-                  </div> -->
+
                   <div v-else class="table_ellipsis2">
                     {{ col.value ? col.value : "-" }}
                   </div>
                 </q-td>
-                <!-- <q-td>
-                  <q-btn
-                    v-if="props.row.status === 'PENDING'"
-                    flat
-                    round
-                    color="red"
-                    icon="mdi-delete"
-                    size="12px"
-                    @click="onDeleteLidt(props.row.id)"
-                  >
-                    <q-tooltip>ลบคำร้องขอแก้ไขข้อมูล</q-tooltip>
-                  </q-btn>
-                </q-td> -->
               </q-tr>
             </template>
-            <template v-slot:pagination="scope">
-              ทั้งหมด {{ rowsTotal }} รายการ
-              <q-pagination
-                v-model="page"
-                active-color="primary"
-                color="dark"
-                :max="Number(maxPage)"
-                :max-pages="5"
-                size="sm"
-                boundary-links
-                direction-links
-                @update:model-value="fetchListRequset()"
-              ></q-pagination>
-            </template>
           </d-table>
         </div>
       </q-card>
diff --git a/src/modules/11_probation/views/mainDetail.vue b/src/modules/11_probation/views/mainDetail.vue
index 4efbad1..cd6b60c 100644
--- a/src/modules/11_probation/views/mainDetail.vue
+++ b/src/modules/11_probation/views/mainDetail.vue
@@ -16,19 +16,14 @@ import type {
 
 const $q = useQuasar();
 const mixin = useCounterMixin();
-const {
-  messageError,
-  findOrgName,
-  showLoader,
-  hideLoader,
-  date2Thai,
-  onSearchDataTable,
-} = mixin;
+const { messageError, findOrgName, hideLoader, date2Thai, onSearchDataTable } =
+  mixin;
 
 const profileId = ref<string>("");
 const rows = ref<ListMain[]>([]);
 const rowsData = ref<ListMain[]>([]);
 
+const isLoad = ref<boolean>(false);
 const mode = ref<boolean>($q.screen.gt.xs);
 const profileImg = ref<string>("");
 const router = useRouter();
@@ -112,7 +107,7 @@ function onResize(size: any) {
 }
 
 function getMain() {
-  showLoader();
+  isLoad.value = true;
   http
     .get(config.API.kpiEvaluation + `/${route.params.id.toString()}`)
     // .get(config.API.profilePosition())
@@ -134,11 +129,11 @@ function getMain() {
       promises.push(getAvatar(data.profileId));
 
       await Promise.all(promises);
-      hideLoader();
+      isLoad.value = false;
     })
     .catch((e) => {
       messageError($q, e);
-      hideLoader();
+      isLoad.value = false;
     })
     .finally(() => {});
 }
@@ -221,22 +216,31 @@ onMounted(async () => {
         <div v-if="$q.screen.gt.xs" class="col-12">
           <q-card>
             <div class="bg-grey-1 row q-pa-sm items-center">
-              <span class="text-teal text-weight-bold text-body2">{{
-                formData.firstName
-                  ? `${formData.prefix}${formData.firstName} ${formData.lastName}`
-                  : "-"
-              }}</span>
+              <span class="text-teal text-weight-bold text-body2">
+                <div v-if="!isLoad">
+                  {{
+                    formData.firstName
+                      ? `${formData.prefix}${formData.firstName} ${formData.lastName}`
+                      : "-"
+                  }}
+                </div>
+                <q-skeleton v-else type="text" />
+              </span>
             </div>
             <q-resize-observer @resize="onResize" />
             <q-card-section class="q-pa-md">
               <div class="row">
-                <div class="col-2 text-center self-center">
-                  <q-avatar :size="sizeImg" rounded>
+                <div
+                  class="col-2 text-center self-center"
+                  style="display: flex; justify-content: center"
+                >
+                  <q-avatar v-if="!isLoad" :size="sizeImg" rounded>
                     <q-img
                       :src="profileImg"
                       style="border-radius: 10px; object-fit: cover"
                     />
                   </q-avatar>
+                  <q-skeleton v-else type="QRadio" size="70px" />
                 </div>
                 <div class="col-10 column justify-center no-wrap">
                   <div class="row text-grey-6">
@@ -247,7 +251,10 @@ onMounted(async () => {
                   <div class="row">
                     <div class="col-4 column">
                       <span>
-                        {{ formData.position ? formData.position : "-" }}
+                        <div v-if="!isLoad">
+                          {{ formData.position ? formData.position : "-" }}
+                        </div>
+                        <q-skeleton v-else type="text" width="90px" />
                       </span>
                       <span>
                         {{
@@ -258,16 +265,22 @@ onMounted(async () => {
                       </span>
                     </div>
                     <div class="col-4">
-                      {{
-                        formData.posTypeName
-                          ? formData.posLevelName
-                            ? `${formData.posTypeName}(${formData.posLevelName})`
-                            : formData.posTypeName
-                          : "-"
-                      }}
+                      <div v-if="!isLoad">
+                        {{
+                          formData.posTypeName
+                            ? formData.posLevelName
+                              ? `${formData.posTypeName}(${formData.posLevelName})`
+                              : formData.posTypeName
+                            : "-"
+                        }}
+                      </div>
+                      <q-skeleton v-else type="text" width="90px" />
                     </div>
                     <div class="col-4">
-                      {{ formData.org ? formData.org : "-" }}
+                      <div v-if="!isLoad">
+                        {{ formData.org ? formData.org : "-" }}
+                      </div>
+                      <q-skeleton v-else type="text" width="90px" />
                     </div>
                   </div>
                 </div>
@@ -278,21 +291,30 @@ onMounted(async () => {
         <div v-else class="col-12">
           <q-card bordered>
             <div class="bg-grey-1 row q-pa-sm items-center">
-              <span class="text-teal text-weight-bold text-body2">{{
-                formData.firstName
-                  ? `${formData.prefix}${formData.firstName} ${formData.lastName}`
-                  : "-"
-              }}</span>
+              <span class="text-teal text-weight-bold text-body2">
+                <div v-if="!isLoad">
+                  {{
+                    formData.firstName
+                      ? `${formData.prefix}${formData.firstName} ${formData.lastName}`
+                      : "-"
+                  }}
+                </div>
+                <q-skeleton v-else type="text" />
+              </span>
             </div>
             <q-resize-observer @resize="onResize" />
             <q-card-section>
-              <div class="text-center q-mt-md">
-                <q-avatar :size="sizeImg" rounded>
+              <div
+                class="text-center q-mt-md"
+                style="display: flex; justify-content: center"
+              >
+                <q-avatar v-if="!isLoad" :size="sizeImg" rounded>
                   <img
                     :src="profileImg"
                     style="border-radius: 10px; object-fit: cover"
                   />
                 </q-avatar>
+                <q-skeleton v-else type="QRadio" size="70px" />
               </div>
             </q-card-section>
 
@@ -302,25 +324,34 @@ onMounted(async () => {
                   <q-item-label class="text-grey-6"
                     >ตำแหน่งในสายงาน</q-item-label
                   >
-                  <q-item-label>{{
-                    formData.position ? formData.position : "-"
-                  }}</q-item-label>
+                  <q-item-label>
+                    <div v-if="!isLoad">
+                      {{ formData.position ? formData.position : "-" }}
+                    </div>
+                    <q-skeleton v-else type="text" />
+                  </q-item-label>
                 </q-item-section>
               </q-item>
               <q-item>
                 <q-item-section>
                   <q-item-label class="text-grey-6">ระดับ</q-item-label>
-                  <q-item-label>{{
-                    formData.posLevelName ? formData.posLevelName : "-"
-                  }}</q-item-label>
+                  <q-item-label>
+                    <div v-if="!isLoad">
+                      {{ formData.posLevelName ? formData.posLevelName : "-" }}
+                    </div>
+                    <q-skeleton v-else type="text" />
+                  </q-item-label>
                 </q-item-section>
               </q-item>
               <q-item>
                 <q-item-section>
                   <q-item-label class="text-grey-6">สังกัด</q-item-label>
-                  <q-item-label>{{
-                    formData.org ? formData.org : "-"
-                  }}</q-item-label>
+                  <q-item-label>
+                    <div v-if="!isLoad">
+                      {{ formData.org ? formData.org : "-" }}
+                    </div>
+                    <q-skeleton v-else type="text" />
+                  </q-item-label>
                 </q-item-section>
               </q-item>
             </q-list>
@@ -372,6 +403,8 @@ onMounted(async () => {
                 :rows-per-page-options="[10, 25, 50, 100]"
                 :visible-columns="visibleColumns"
                 :virtual-scroll-sticky-size-start="48"
+                :pagination="{ page: 1, rowsPerPage: 10 }"
+                :loading="isLoad"
               >
                 <template v-slot:header="props">
                   <q-tr :props="props">
@@ -434,13 +467,6 @@ onMounted(async () => {
                     </q-card>
                   </div>
                 </template>
-                <template v-slot:no-data>
-                  <div
-                    class="full-width row flex-center q-pa-sm rounded-borders text-weight-medium"
-                  >
-                    <span> ไม่พบข้อมูล </span>
-                  </div>
-                </template>
               </d-table>
             </div>
           </q-card>
diff --git a/src/modules/12_organization/views/main.vue b/src/modules/12_organization/views/main.vue
index aa0a5f4..0b31bfa 100644
--- a/src/modules/12_organization/views/main.vue
+++ b/src/modules/12_organization/views/main.vue
@@ -29,6 +29,7 @@ const dataSource = ref(); // ข้อมูล Chart
 const idActive = ref<string>("");
 const dataSourceLock = ref(); // ข้อมูลตั้งต้นของ Chart ใช้ให้กดกลับไปที่ home
 const scrollContainer = ref<HTMLElement | null>(null);
+const isLoading = ref<boolean>(false);
 
 /**
  * สร้าง Path Breadcrumbs
@@ -150,7 +151,7 @@ async function fetchStructChart(
   type: string,
   status: boolean = false
 ) {
-  showLoader();
+  isLoading.value = true;
   await http
     .get(config.API.orgStructChart(id, type))
     .then((res) => {
@@ -168,7 +169,7 @@ async function fetchStructChart(
       messageError($q, err);
     })
     .finally(() => {
-      hideLoader();
+      isLoading.value = false;
     });
 }
 
@@ -236,7 +237,19 @@ onMounted(async () => {
     <div class="col-xs-12 col-sm-12 col-md-11 row q-col-gutter-md">
       <div class="col-12 row">
         <q-card bordered class="col-12 row caedNone">
-          <div class="q-pa-sm row wrap items-center">
+          <!-- Skeleton สำหรับ Toolbar -->
+          <div v-if="isLoading" class="q-pa-sm row wrap items-center col-12">
+            <q-skeleton type="circle" size="40px" />
+            <q-skeleton type="circle" size="40px" class="q-ml-sm" />
+            <q-skeleton
+              type="rect"
+              width="300px"
+              height="40px"
+              class="q-ml-md"
+            />
+          </div>
+
+          <div v-else class="q-pa-sm row wrap items-center">
             <q-btn
               flat
               :diasble="isLoadBtn"
@@ -276,7 +289,53 @@ onMounted(async () => {
             <q-separator />
           </div>
 
+          <!-- Organization Chart Skeleton -->
           <div
+            v-if="isLoading"
+            class="q-pt-md col-12"
+            style="height: 70vh; overflow: hidden"
+          >
+            <div class="row justify-center q-mb-lg">
+              <!-- Main Department Skeleton -->
+              <div class="col-auto">
+                <q-skeleton
+                  type="rect"
+                  width="300px"
+                  height="80px"
+                  class="rounded-borders"
+                />
+              </div>
+            </div>
+
+            <!-- Sub Departments Skeleton -->
+            <div class="row justify-center q-col-gutter-md">
+              <div v-for="i in 5" :key="i" class="col-auto">
+                <div class="column items-center">
+                  <q-skeleton
+                    type="rect"
+                    width="200px"
+                    height="60px"
+                    class="rounded-borders q-mb-md"
+                  />
+
+                  <!-- Sub Items Skeleton -->
+                  <div class="column q-gutter-xs">
+                    <q-skeleton
+                      v-for="j in 3"
+                      :key="j"
+                      type="rect"
+                      width="180px"
+                      height="35px"
+                      class="rounded-borders"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div
+            v-else
             id="structChart"
             ref="scrollContainer"
             style="
diff --git a/src/modules/13_portfolio/views/Add.vue b/src/modules/13_portfolio/views/Add.vue
index 4cb6c60..6f20d1f 100644
--- a/src/modules/13_portfolio/views/Add.vue
+++ b/src/modules/13_portfolio/views/Add.vue
@@ -13,9 +13,7 @@ const router = useRouter();
 const mixin = useCounterMixin();
 const { success, messageError, showLoader, hideLoader, dialogConfirm } = mixin;
 
-/**
- * ตัวแปรที่ใช้งาน
- */
+/** ตัวแปรที่ใช้งาน */
 const route = useRoute();
 const files = ref<any>();
 const name = ref<string>("");
@@ -24,60 +22,74 @@ const id = ref<string>("");
 const routeName = router.currentRoute.value.name;
 const fileList = ref<any[]>([]);
 
-const saveData = async () => {
-  dialogConfirm(
-    $q,
-    () => {
-      createTransfer();
-    },
-    "ยืนยันการบันทึกข้อมูล",
-    "ต้องการยืนยันการบันทึกข้อมูลใช่หรือไม่"
-  );
-};
-
-/**
- * ฟังก์ชั่นสร้างขอโอน
- */
-const createTransfer = async () => {
-  showLoader();
-  await http
-    .post(config.API.portfolio, { name: name.value, detail: detail.value })
-    .then(async (res) => {
-      uploadFiles(res.data.result);
-    })
-    .catch((e) => {
-      messageError($q, e);
-      hideLoader();
-    });
-};
+const isLoading = ref<boolean>(false);
+const isLoadingFile = ref<boolean>(false);
 
 /**
  * ฟังก์ชั่นเรียกข้อมูลจาก Api
  * @param id ไอดีของข้อมูล
  */
-const fecthData = async (id: string) => {
-  showLoader();
+async function fetchData(id: string) {
+  isLoading.value = true;
   await http
     .get(config.API.portfolioId(id))
-    .then((res: any) => {
+    .then(async (res) => {
       let data = res.data.result;
       name.value = data.name;
       detail.value = data.detail;
-      fetchFile();
     })
-    .catch((e: any) => {
+    .catch((e) => {
       messageError($q, e);
-      hideLoader();
+    })
+    .finally(() => {
+      isLoading.value = false;
     });
-};
+}
+
+/** ฟังก์ชั่นรายการเอกสาร */
+async function fetchFile() {
+  isLoadingFile.value = true;
+  await http
+    .get(config.API.file("ระบบผลงาน", "เอกสารผลงาน", id.value))
+    .then((res) => {
+      fileList.value = res.data;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      isLoadingFile.value = false;
+    });
+}
+
+function onSubmit() {
+  dialogConfirm(
+    $q,
+    async () => {
+      showLoader();
+      await http
+        .post(config.API.portfolio, { name: name.value, detail: detail.value })
+        .then(async (res) => {
+          await uploadFiles(res.data.result);
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(() => {
+          hideLoader();
+        });
+    },
+    "ยืนยันการบันทึกข้อมูล",
+    "ต้องการยืนยันการบันทึกข้อมูลใช่หรือไม่"
+  );
+}
 
 /**
- * function อัปโหลดไฟล์
+ * ฟังก์ชั่นอัปโหลดไฟล์
  * @param id ผลงาน
  */
-function uploadFiles(id: string) {
-  showLoader();
-  http
+async function uploadFiles(id: string) {
+  await http
     .post(config.API.file("ระบบผลงาน", "เอกสารผลงาน", id), {
       replace: true,
       fileList: [
@@ -92,23 +104,21 @@ function uploadFiles(id: string) {
           res.data[key]?.fileName !== undefined &&
           res.data[key]?.fileName !== ""
       );
-      foundKey && uploadFileURL(res.data[foundKey]?.uploadUrl);
+      foundKey && (await uploadFileURL(res.data[foundKey]?.uploadUrl));
     })
     .catch((err) => {
       messageError($q, err);
-      hideLoader();
     });
 }
 
 /**
- * function บันทึกไฟล์
+ * ฟังก์ชั่นบันทึกไฟล์
  * @param uploadUrl บันทึกไฟล์
  */
-function uploadFileURL(uploadUrl: string) {
+async function uploadFileURL(uploadUrl: string) {
   const Data = new FormData();
   Data.append("file", files.value);
-  showLoader();
-  axios
+  await axios
     .put(uploadUrl, files.value, {
       headers: {
         "Content-Type": files.value.type,
@@ -122,29 +132,10 @@ function uploadFileURL(uploadUrl: string) {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
       files.value = null;
     });
 }
 
-/**
- *function fetch รายการเอกสาร
- */
-function fetchFile() {
-  showLoader();
-  http
-    .get(config.API.file("ระบบผลงาน", "เอกสารผลงาน", id.value))
-    .then((res) => {
-      fileList.value = res.data;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
 /**
  * ฟังก์ชั่นดาว์โหลดอัปโหลดไฟล์
  * @param fileName ชื่อไฟล์
@@ -165,13 +156,11 @@ function fileOpen(fileName: string) {
     });
 }
 
-/**
- * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
- */
-onMounted(() => {
+/** Hook Lifecycle ที่ทำงานเมื่อ component ถูก mount*/
+onMounted(async () => {
   if (route.params.id !== undefined) {
     id.value = route.params.id.toString();
-    fecthData(id.value);
+    await Promise.all([fetchData(id.value), fetchFile()]);
   }
 });
 </script>
@@ -197,9 +186,17 @@ onMounted(() => {
         class="col-12"
         greedy
         @submit.prevent
-        @validation-success="saveData"
+        @validation-success="onSubmit"
       >
-        <q-card bordered>
+        <q-card bordered v-if="isLoading">
+          <div class="q-pa-md">
+            <div class="q-gutter-md">
+              <q-skeleton height="40px" />
+              <q-skeleton height="150px" />
+            </div>
+          </div>
+        </q-card>
+        <q-card bordered v-else>
           <div class="col-12 row q-col-gutter-md q-pa-md">
             <div class="col-xs-12 col-sm-12">
               <div class="col-12 row q-pa-sm q-col-gutter-sm">
@@ -246,6 +243,7 @@ onMounted(() => {
                       <q-icon name="attach_file" /> </template
                   ></q-file>
                 </div>
+
                 <div class="col-12 row" v-if="routeName != 'addPortfolio'">
                   <q-card bordered flat class="full-width">
                     <div
@@ -256,7 +254,8 @@ onMounted(() => {
                       </div>
                     </div>
                     <q-separator />
-                    <q-list separator>
+                    <q-skeleton v-if="isLoadingFile" type="QSlider" />
+                    <q-list v-else separator>
                       <q-item v-for="file in fileList" :key="file.key">
                         <q-item-section>
                           {{ file.fileName }}
diff --git a/src/modules/13_portfolio/views/Main.vue b/src/modules/13_portfolio/views/Main.vue
index 8d1141d..040dc4b 100644
--- a/src/modules/13_portfolio/views/Main.vue
+++ b/src/modules/13_portfolio/views/Main.vue
@@ -9,6 +9,7 @@ import { useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 
 import type { PortfolioRowsType } from "@/modules/13_portfolio/interface/Main";
+
 const $q = useQuasar();
 const router = useRouter();
 const mixin = useCounterMixin();
@@ -27,9 +28,8 @@ const pagination = ref({
   page: 1,
   rowsPerPage: 10,
 });
-/**
- * เพิ่มหัวข้อตาราง
- */
+
+const isLoading = ref<boolean>(false);
 const filter = ref<string>("");
 const rows = ref<PortfolioRowsType[]>([]);
 const rowsData = ref<PortfolioRowsType[]>([]);
@@ -64,9 +64,9 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 
-//นำข้อมูลมาแสดง
+/** ฟังก์ชั่นนำข้อมูลรายการเอกสาร/ผลงาน */
 async function fecthList() {
-  showLoader();
+  isLoading.value = true;
   await http
     .get(config.API.portfolio)
     .then((res) => {
@@ -77,20 +77,16 @@ async function fecthList() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoading.value = false;
     });
 }
 
-/**
- * ฟังก์ชั่นกดเพิ่มไปหน้าเพิ่มขอโอน
- */
+/** ฟังก์ชั่นกดเพิ่มไปหน้าเพิ่มขอโอน*/
 async function clickAdd() {
   router.push(`/portfolio/add`);
 }
 
-/**
- * ฟังก์ชั่นกดย้อนกลับ
- */
+/** ฟังก์ชั่นกดย้อนกลับ*/
 function clickBack() {
   router.push(`/`);
 }
@@ -100,21 +96,24 @@ function clickBack() {
  * @param id id row
  */
 function onDelete(id: string) {
-  dialogRemove($q, () => {
+  dialogRemove($q, async () => {
     showLoader();
-    http
+    await http
       .delete(config.API.portfolioId(id))
-      .then((res) => {
+      .then(async () => {
+        await fecthList();
         success($q, "ลบข้อมูลสำเร็จ");
-        fecthList();
       })
       .catch((err) => {
         messageError($q, err);
+      })
+      .finally(() => {
         hideLoader();
       });
   });
 }
 
+/** ฟังก์ชั่นค้นหาข้อมูลในตาราง */
 function onSearch() {
   rows.value = onSearchDataTable(
     filter.value,
@@ -123,9 +122,11 @@ function onSearch() {
   );
 }
 
-/**
- * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
- */
+function onTableRequest() {
+  console.log(1111);
+}
+
+/** Hook Lifecycle */
 onMounted(async () => {
   await fecthList();
 });
@@ -198,34 +199,22 @@ onMounted(async () => {
               </q-select>
             </div>
           </div>
-          <div>
+
+          <div class="col-12">
             <d-table
               flat
               bordered
               dense
               :paging="true"
               row-key="id"
-              class="custom-table2"
-              style="max-height: 80vh"
               :rows="rows"
               :columns="columns"
               :visible-columns="visibleColumns"
               :rows-per-page-options="[10, 25, 50, 100]"
-              v-model:pagination="pagination"
+              :pagination="pagination"
+              :loading="isLoading"
+              @request="onTableRequest"
             >
-              <template v-slot:pagination="scope">
-                ทั้งหมด {{ rows.length }} รายการ
-                <q-pagination
-                  v-model="pagination.page"
-                  active-color="primary"
-                  color="dark"
-                  :max="scope.pagesNumber"
-                  :max-pages="5"
-                  size="sm"
-                  boundary-links
-                  direction-links
-                ></q-pagination>
-              </template>
               <template v-slot:header="props">
                 <q-tr :props="props">
                   <q-th
diff --git a/src/modules/14_IDP/views/main.vue b/src/modules/14_IDP/views/main.vue
index 9b53dfe..e29f30e 100644
--- a/src/modules/14_IDP/views/main.vue
+++ b/src/modules/14_IDP/views/main.vue
@@ -8,6 +8,7 @@ import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import { useIndividualDevelopmentPlan } from "@/modules/14_IDP/store"; // ดึง store IDP
 
+import type { PropsTable } from "@/interface/PropsTable";
 import type { DataOption, RowsListMain } from "@/modules/14_IDP/interface/Main";
 
 const $q = useQuasar();
@@ -16,24 +17,18 @@ const mixin = useCounterMixin();
 const store = useIndividualDevelopmentPlan();
 const { showLoader, hideLoader, messageError, success, dialogRemove } = mixin;
 
-const idRow = ref<string>("");
-const isEdit = ref<boolean>(false);
-const modalAdd = ref<boolean>(false); //ตัวแปร dialog #Add
+const isLoading = ref<boolean>(false);
 const filterKeyword = ref<string>("");
 const status = ref<string>("ALL"); // สถานะคำร้อง
 const statusOptions = ref<DataOption[]>(store.optionStatus);
-
-/** pagination */
 const rows = ref<RowsListMain[]>([]);
-const total = ref<number>(0);
-const totalList = ref<number>(1);
-const pagination = ref({
+const pagination = ref<PropsTable.Pagination>({
   sortBy: "createdAt",
   descending: true,
   page: 1,
   rowsPerPage: 10,
+  rowsNumber: 0,
 });
-
 const visibleColumns = ref<string[]>([
   "no",
   "name",
@@ -157,14 +152,6 @@ function filterOption(val: string, update: Function) {
   });
 }
 
-/**
- * function เคลียร์ข้อมูลสถานะคำร้อง
- */
-function clearStatus() {
-  status.value = "ALL";
-  statusOptions.value = store.optionStatus;
-}
-
 /** ฟังชั่น เปิด popup */
 function openAdd() {
   router.push("/idp-registry");
@@ -172,21 +159,24 @@ function openAdd() {
 
 function onDelete(id: string) {
   dialogRemove($q, async () => {
+    showLoader();
     await http
       .delete(config.API.developmentRequest + `/${id}`)
-      .then(async (res) => {
-        success($q, "ลบข้อมูลสำเร็จ");
+      .then(async () => {
         await getListData();
+        success($q, "ลบข้อมูลสำเร็จ");
       })
       .catch((e) => {
         messageError($q, e);
       })
-      .finally(() => {});
+      .finally(() => {
+        hideLoader();
+      });
   });
 }
 /** list รายการ */
 async function getListData() {
-  showLoader();
+  isLoading.value = true;
   await http
     .get(
       config.API.developmentRequest +
@@ -194,36 +184,36 @@ async function getListData() {
   `
     )
     .then(async (res) => {
-      const data = await res.data.result.data;
-      const dataTotal = await res.data.result.total;
-      totalList.value = Math.ceil(dataTotal / pagination.value.rowsPerPage);
-      total.value = dataTotal;
-      rows.value = data;
-      hideLoader();
+      const result = await res.data.result;
+      pagination.value.rowsNumber = result.total;
+      rows.value = result.data;
     })
     .catch((e) => {
-      hideLoader();
+      messageError($q, e);
     })
-    .finally(() => {});
+    .finally(() => {
+      isLoading.value = false;
+    });
 }
 
 /**
  * function หาชื่อไฟล์
  * @param id รายการยื่นคำร้องขอแก้ไขข้อมูล
  */
-function onDownloadFile(id: string) {
+async function onDownloadFile(id: string) {
   showLoader();
-  http
+  await http
     .get(config.API.file("IDP", "ยื่นคำร้องขอเพิ่มข้อมูลการพัฒนารายบุคคล", id))
-    .then((res) => {
+    .then(async (res) => {
       if (res.data.length !== 0) {
-        downloadUrl(id, res.data[0].fileName);
+        await downloadUrl(id, res.data[0].fileName);
       } else {
-        hideLoader();
       }
     })
     .catch((e) => {
       messageError($q, e);
+    })
+    .finally(() => {
       hideLoader();
     });
 }
@@ -233,8 +223,8 @@ function onDownloadFile(id: string) {
  * @param id  รายการยื่นคำร้องขอแก้ไขข้อมูล
  * @param fileName  ชื่อไฟล์
  */
-function downloadUrl(id: string, fileName: string) {
-  http
+async function downloadUrl(id: string, fileName: string) {
+  await http
     .get(
       config.API.fileByFile(
         "IDP",
@@ -248,16 +238,18 @@ function downloadUrl(id: string, fileName: string) {
     })
     .catch((e) => {
       messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
     });
 }
 
-/** เมื่อมีการเปลี่ยน แถว ดึงข้อมูลใหม่ */
-function updatePagination(newPagination: any) {
-  pagination.value.page = 1;
-  pagination.value.rowsPerPage = newPagination.rowsPerPage;
+/**
+ * ฟังก์ชันรับ request จากตาราง เมื่อมีการเปลี่ยน pagination
+ * @param requestProps ข้อมูลการร้องขอจากตาราง
+ */
+function onTableRequest(requestProps: PropsTable.RequestProps) {
+  const newPagination = requestProps?.pagination || requestProps;
+  if (!newPagination?.page || !newPagination?.rowsPerPage) return;
+  pagination.value = { ...newPagination };
+  getListData();
 }
 
 /**
@@ -273,13 +265,6 @@ function getSerach() {
   getListData();
 }
 
-watch(
-  () => pagination.value.rowsPerPage,
-  async () => {
-    await getListData();
-  }
-);
-
 onMounted(async () => {
   await getListData();
 });
@@ -374,7 +359,7 @@ onMounted(async () => {
             />
           </div>
 
-          <div>
+          <div class="col-12">
             <d-table
               :columns="columns"
               :rows="rows"
@@ -382,7 +367,9 @@ onMounted(async () => {
               :paging="true"
               :visible-columns="visibleColumns"
               :rows-per-page-options="[10, 25, 50, 100]"
-              @update:pagination="updatePagination"
+              @request="onTableRequest"
+              v-model:pagination="pagination"
+              :loading="isLoading"
             >
               <template v-slot:header="props">
                 <q-tr :props="props">
@@ -408,11 +395,7 @@ onMounted(async () => {
                     "
                   >
                     <div v-if="col.name == 'no'">
-                      {{
-                        (pagination.page - 1) * pagination.rowsPerPage +
-                        props.rowIndex +
-                        1
-                      }}
+                      {{ props.rowIndex + 1 }}
                     </div>
                     <div v-else-if="col.name === 'document'">
                       <q-btn
@@ -465,20 +448,6 @@ onMounted(async () => {
                   </q-td>
                 </q-tr>
               </template>
-              <template v-slot:pagination="scope">
-                ทั้งหมด {{ total }} รายการ
-                <q-pagination
-                  v-model="pagination.page"
-                  active-color="primary"
-                  color="dark"
-                  :max="Number(totalList)"
-                  size="sm"
-                  boundary-links
-                  direction-links
-                  :max-pages="5"
-                  @update:model-value="getListData()"
-                ></q-pagination>
-              </template>
             </d-table>
           </div>
         </q-card>
diff --git a/src/modules/14_IDP/views/registry.vue b/src/modules/14_IDP/views/registry.vue
index 4494f52..9a2649f 100644
--- a/src/modules/14_IDP/views/registry.vue
+++ b/src/modules/14_IDP/views/registry.vue
@@ -17,13 +17,14 @@ import type {
 } from "@/modules/14_IDP/interface/Main";
 
 const $q = useQuasar();
-const { dialogConfirm, showLoader, hideLoader, messageError, success } =
-  useCounterMixin();
-const dataStore = useDataStore();
-
-const idRow = ref<string>("");
 const router = useRouter();
 const route = useRoute();
+const dataStore = useDataStore();
+const { dialogConfirm, showLoader, hideLoader, messageError, success } =
+  useCounterMixin();
+
+const idRow = ref<string>("");
+const isLoading = ref<boolean>(false);
 const isReadOnly = ref<boolean>(false);
 const isEdit = ref<boolean>(false); // เก็บ เช็ค รายละเอียด/แก้ไข
 const requestId = ref<string>(
@@ -204,7 +205,7 @@ function downloadUrl(id: string, fileName: string) {
 }
 
 function onSubmit() {
-  dialogConfirm($q, () => {
+  dialogConfirm($q, async () => {
     showLoader();
     const body = {
       name: formData.topic,
@@ -219,16 +220,17 @@ function onSubmit() {
       isDevelopment10: isDevelopment10.value,
       developmentProjects: formData.development,
     };
-    http
+    await http
       .post(config.API.developmentRequest, body)
       .then(async (res) => {
         await createURLUpload(res.data.result, formData.document);
       })
       .catch((e) => {
         messageError($q, e);
-        hideLoader();
       })
-      .finally(() => {});
+      .finally(() => {
+        hideLoader();
+      });
   });
 }
 
@@ -256,7 +258,6 @@ async function createURLUpload(id: string, file: any) {
     })
     .catch((err) => {
       messageError($q, err);
-      hideLoader();
     });
 }
 
@@ -270,21 +271,18 @@ async function uploadFileDoc(uploadUrl: string, file: any) {
         "Content-Type": file.type,
       },
     })
-    .then(async (res) => {
+    .then(async () => {
       success($q, `บันทึกข้อมูลสำเร็จ`);
       router.push("/idp");
-      hideLoader();
     })
     .catch((e) => {
       messageError($q, e);
-      hideLoader();
-    })
-    .finally(() => {});
+    });
 }
 
-function getDetail() {
-  showLoader();
-  http
+async function getDetail() {
+  isLoading.value = true;
+  await http
     .get(config.API.developmentRequest + `/user/${idRow.value}`)
     .then((res) => {
       const data = res.data.result;
@@ -301,7 +299,7 @@ function getDetail() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoading.value = false;
     });
 }
 
@@ -339,7 +337,13 @@ onMounted(() => {
       <q-card bordered>
         <q-form greedy @submit.prevent @validation-success="onSubmit">
           <q-card-section>
-            <div class="row q-col-gutter-sm">
+            <div v-if="isLoading" class="q-gutter-md">
+              <q-skeleton height="150px" />
+              <q-skeleton height="150px" />
+              <q-skeleton height="150px" />
+            </div>
+
+            <div v-else class="row q-col-gutter-sm">
               <div class="col-12">
                 <div class="row q-col-gutter-sm">
                   <div class="col-12">
@@ -539,6 +543,7 @@ onMounted(() => {
               </div>
             </div>
           </q-card-section>
+
           <q-separator v-if="!isEdit" />
           <q-card-actions align="right" v-if="!isEdit">
             <q-btn label="บันทึก" color="secondary" type="submit"
diff --git a/src/modules/15_probationReport/components/01_SurveyPage.vue b/src/modules/15_probationReport/components/01_SurveyPage.vue
index ffb598d..11c0c54 100644
--- a/src/modules/15_probationReport/components/01_SurveyPage.vue
+++ b/src/modules/15_probationReport/components/01_SurveyPage.vue
@@ -34,6 +34,7 @@ const props = defineProps({
   getSurveyData: Function,
 });
 const isData = defineModel<boolean>("isData", { required: true });
+const isLoad = defineModel<boolean>("isLoad", { required: true });
 const dataSurvey = defineModel<any>("dataSurvey", { required: true });
 
 const status = ref<boolean>(true);
@@ -53,7 +54,7 @@ async function save() {
       answer3: answer3.value,
     };
     dialogConfirm($q, async () => {
-      showLoader();
+      isLoad.value = true;
       await http
         .post(config.API.summarySurveyDetail(store.assignId), data)
         .then(async () => {
@@ -115,6 +116,7 @@ onMounted(() => {
         </div>
         <div class="col-12">
           <q-input
+            v-if="!isLoad"
             :readonly="!status"
             label="ความคิดเห็น"
             class="bg-white"
@@ -125,6 +127,7 @@ onMounted(() => {
             type="textarea"
             :rules="[(val: string) => !!val || `${'กรุณากรอกความคิดเห็น'}`]"
           />
+          <q-skeleton v-else type="QInput" height="120px" />
         </div>
       </div>
 
@@ -135,6 +138,7 @@ onMounted(() => {
         </div>
         <div class="col-12">
           <q-input
+            v-if="!isLoad"
             :readonly="!status"
             label="ความคิดเห็น"
             class="bg-white"
@@ -145,6 +149,7 @@ onMounted(() => {
             type="textarea"
             :rules="[(val: string) => !!val || `${'กรุณากรอกความคิดเห็น'}`]"
           />
+          <q-skeleton v-else type="QInput" height="120px" />
         </div>
       </div>
 
@@ -154,7 +159,7 @@ onMounted(() => {
           ความพึงพอใจกับการทดลองปฏิบัติหน้าที่ราชการของคุณอยู่ในระดับใด
         </div>
         <q-space />
-        <q-btn-group outline>
+        <q-btn-group outline v-if="!isLoad">
           <q-btn
             v-for="(item, index) in 5"
             :disable="!status"
@@ -171,6 +176,7 @@ onMounted(() => {
             </q-tooltip>
           </q-btn>
         </q-btn-group>
+        <q-skeleton v-else type="QInput" height="40px" width="200px" />
       </div>
       <div class="col-12 q-mt-md">
         <q-separator size="3px" color="grey-2" />
@@ -218,10 +224,10 @@ onMounted(() => {
         </div>
       </div>
     </q-card-section>
-    <q-separator v-if="status" />
+    <q-separator v-if="status && !isLoad" />
 
-    <q-card-actions align="right" v-if="status">
-      <q-btn label="บันทึก" color="secondary" type="submit"
+    <q-card-actions align="right" v-if="status && !isLoad">
+      <q-btn label="บันทึก" color="secondary" type="submit" :loading="isLoad"
         ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
       >
     </q-card-actions>
diff --git a/src/modules/15_probationReport/components/02_ResultPage.vue b/src/modules/15_probationReport/components/02_ResultPage.vue
index 7fadf29..5356b2c 100644
--- a/src/modules/15_probationReport/components/02_ResultPage.vue
+++ b/src/modules/15_probationReport/components/02_ResultPage.vue
@@ -35,6 +35,7 @@ const dev_options = defineModel<any>("dev_options", { required: true });
 const result_option = defineModel<any>("result_option", { required: true });
 const status = ref<boolean>(false);
 
+const isLoad = ref<boolean>(false);
 const formData = ref<ProbationReportType>({
   develop_orientation_score: 0,
   develop_self_learning_score: 0,
@@ -89,7 +90,7 @@ async function clickdownloadFile() {
 }
 
 async function getData() {
-  showLoader();
+  isLoad.value = true;
   http
     .get(
       config.API.summaryReportDetail(store.assignId) +
@@ -133,14 +134,13 @@ async function getData() {
       formData.value.reason = data.reason;
       formData.value.pass_result = data.pass_result;
       formData.value.evaluate_date = data.evaluate_date;
-      hideLoader();
+      isLoad.value = false;
     })
     .catch((e) => {
       messageError($q, e);
+      isLoad.value = false;
     })
-    .finally(() => {
-      hideLoader();
-    });
+    .finally(() => {});
 }
 
 onMounted(async () => {
@@ -191,13 +191,26 @@ onMounted(async () => {
 
               <q-item-label caption style="color: #464444">
                 <div class="row text-weight-bold">
-                  <div class="col">{{ formData.achievement_score }}</div>
-                  <div class="col">{{ formData.achievement_percent }}</div>
+                  <div class="col" v-if="!isLoad">
+                    {{ formData.achievement_score }}
+                  </div>
+                  <div class="col" v-else><q-skeleton width="40px" /></div>
+                  <div class="col" v-if="!isLoad">
+                    {{ formData.achievement_percent }}
+                  </div>
+                  <div class="col" v-else><q-skeleton width="40px" /></div>
                 </div>
               </q-item-label>
             </q-item-section>
 
-            <q-item-section side v-if="formData.achievement_result == 1">
+            <q-item-section side v-if="isLoad">
+              <q-skeleton width="120px" />
+            </q-item-section>
+
+            <q-item-section
+              side
+              v-else-if="!isLoad && formData.achievement_result == 1"
+            >
               ผ่าน (สูงกว่าร้อยละ 60)
             </q-item-section>
             <q-item-section side v-else>
@@ -224,13 +237,24 @@ onMounted(async () => {
               </q-item-label>
               <q-item-label caption style="color: #464444">
                 <div class="row text-weight-bold">
-                  <div class="col">{{ formData.behavior_score }}</div>
-                  <div class="col">{{ formData.behavior_percent }}</div>
+                  <div class="col" v-if="!isLoad">
+                    {{ formData.behavior_score }}
+                  </div>
+                  <div class="col" v-else><q-skeleton width="40px" /></div>
+                  <div class="col" v-if="!isLoad">
+                    {{ formData.behavior_percent }}
+                  </div>
+                  <div class="col" v-else><q-skeleton width="40px" /></div>
                 </div>
               </q-item-label>
             </q-item-section>
-
-            <q-item-section side v-if="formData.behavior_result == 1">
+            <q-item-section side v-if="isLoad">
+              <q-skeleton width="120px" />
+            </q-item-section>
+            <q-item-section
+              side
+              v-else-if="!isLoad && formData.behavior_result == 1"
+            >
               ผ่าน (สูงกว่าร้อยละ 60)
             </q-item-section>
             <q-item-section side v-else>
@@ -257,13 +281,22 @@ onMounted(async () => {
               </q-item-label>
               <q-item-label caption style="color: #464444">
                 <div class="row text-weight-bold">
-                  <div class="col">{{ formData.sum_score }}</div>
-                  <div class="col">{{ formData.sum_percent }}</div>
+                  <div class="col" v-if="!isLoad">{{ formData.sum_score }}</div>
+                  <div class="col" v-else><q-skeleton width="40px" /></div>
+                  <div class="col" v-if="!isLoad">
+                    {{ formData.sum_percent }}
+                  </div>
+                  <div class="col" v-else><q-skeleton width="40px" /></div>
                 </div>
               </q-item-label>
             </q-item-section>
-
-            <q-item-section side v-if="Number(formData.sum_percent) >= 60">
+            <q-item-section side v-if="isLoad">
+              <q-skeleton width="120px" />
+            </q-item-section>
+            <q-item-section
+              side
+              v-else-if="!isLoad && Number(formData.sum_percent) >= 60"
+            >
               ผ่าน (สูงกว่าร้อยละ 60)
             </q-item-section>
             <q-item-section side v-else>
@@ -296,22 +329,26 @@ onMounted(async () => {
             <div class="col-8">1. การปฐมนิเทศ</div>
             <div class="col">
               <q-input
+                v-if="!isLoad"
                 outlined
                 dense
                 type="number"
                 :readonly="!status"
                 v-model="formData.develop_orientation_score"
               />
+              <q-skeleton v-else type="QInput" height="40px" />
             </div>
 
             <div class="col">
               <q-input
+                v-if="!isLoad"
                 outlined
                 dense
                 type="number"
                 :readonly="!status"
                 v-model="formData.develop_orientation_percent"
               />
+              <q-skeleton v-else type="QInput" height="40px" />
             </div>
           </div>
 
@@ -320,22 +357,26 @@ onMounted(async () => {
             <div class="col-8">2. การเรียนรู้ด้วยตนเอง</div>
             <div class="col">
               <q-input
+                v-if="!isLoad"
                 dense
                 outlined
                 type="number"
                 :readonly="!status"
                 v-model="formData.develop_self_learning_score"
               />
+              <q-skeleton v-else type="QInput" height="40px" />
             </div>
 
             <div class="col">
               <q-input
+                v-if="!isLoad"
                 outlined
                 dense
                 type="number"
                 :readonly="!status"
                 v-model="formData.develop_self_learning_percent"
               />
+              <q-skeleton v-else type="QInput" height="40px" />
             </div>
           </div>
 
@@ -344,22 +385,26 @@ onMounted(async () => {
             <div class="col-8">3. การอบรมสัมนาร่วมกัน</div>
             <div class="col">
               <q-input
+                v-if="!isLoad"
                 outlined
                 dense
                 type="number"
                 :readonly="!status"
                 v-model="formData.develop_training_seminar_score"
               />
+              <q-skeleton v-else type="QInput" height="40px" />
             </div>
 
             <div class="col">
               <q-input
+                v-if="!isLoad"
                 outlined
                 dense
                 type="number"
                 :readonly="!status"
                 v-model="formData.develop_training_seminar_percent"
               />
+              <q-skeleton v-else type="QInput" height="40px" />
             </div>
           </div>
           <q-separator class="q-my-xs" />
@@ -367,22 +412,26 @@ onMounted(async () => {
             <div class="col-8">4. การอบรมอื่นๆ ตามที่หน่วยงานกำหนด (ถ้ามี)</div>
             <div class="col">
               <q-input
+                v-if="!isLoad"
                 outlined
                 dense
                 type="number"
                 :readonly="!status"
                 v-model="formData.develop_other_training_score"
               />
+              <q-skeleton v-else type="QInput" height="40px" />
             </div>
 
             <div class="col">
               <q-input
+                v-if="!isLoad"
                 outlined
                 dense
                 type="number"
                 :readonly="!status"
                 v-model="formData.develop_other_training_percent"
               />
+              <q-skeleton v-else type="QInput" height="40px" />
             </div>
           </div>
 
@@ -394,10 +443,18 @@ onMounted(async () => {
                   >คะแนนผลการพัฒนาข้าราชการที่อยู่ระหว่างการทดลองปฏิบัติหน้าที่ราชการ</q-item-label
                 >
               </div>
-              <div class="col q-pl-md">{{ formData.develop_total_score }}</div>
-              <div class="col q-pl-md">
+              <div class="col q-pl-md" v-if="!isLoad">
+                {{ formData.develop_total_score }}
+              </div>
+              <div class="col" v-else>
+                <q-skeleton width="100px" />
+              </div>
+              <div class="col q-pl-md" v-if="!isLoad">
                 {{ formData.develop_total_percent }}
               </div>
+              <div class="col" v-else>
+                <q-skeleton width="100px" />
+              </div>
             </div>
           </div>
         </q-card>
@@ -410,6 +467,7 @@ onMounted(async () => {
         </div>
         <div class="col-12">
           <q-select
+            v-if="!isLoad"
             class="col-12"
             dense
             v-model="formData.develop_result"
@@ -421,6 +479,7 @@ onMounted(async () => {
             emit-value
             :readonly="!status"
           />
+          <q-skeleton v-else type="QInput" height="40px" />
         </div>
       </div>
 
@@ -429,6 +488,7 @@ onMounted(async () => {
           เหตุผลอื่น ๆ ในการพิจารณา
         </div>
         <q-input
+          v-if="!isLoad"
           type="textarea"
           outlined
           dense
@@ -440,6 +500,7 @@ onMounted(async () => {
           :row="3"
           :readonly="!status"
         />
+        <q-skeleton v-else type="QInput" height="40px" />
       </div>
 
       <div class="col-xs-12 col-sm-11">
@@ -450,6 +511,7 @@ onMounted(async () => {
             </div>
             <div class="col-12">
               <q-select
+                v-if="!isLoad"
                 class="col-12"
                 dense
                 v-model="formData.pass_result"
@@ -461,6 +523,7 @@ onMounted(async () => {
                 emit-value
                 :readonly="!status"
               />
+              <q-skeleton v-else type="QInput" height="40px" />
             </div>
           </div>
           <div class="col-xs-12 col-sm-6">
@@ -469,6 +532,7 @@ onMounted(async () => {
             </div>
             <div class="col-12">
               <datepicker
+                v-if="!isLoad"
                 v-model="formData.evaluate_date"
                 :locale="'th'"
                 autoApply
@@ -507,6 +571,7 @@ onMounted(async () => {
                   </q-input>
                 </template>
               </datepicker>
+              <q-skeleton v-else type="QInput" height="40px" />
             </div>
           </div>
         </div>
diff --git a/src/modules/15_probationReport/components/03_AssignPage.vue b/src/modules/15_probationReport/components/03_AssignPage.vue
index 4be7990..e762abc 100644
--- a/src/modules/15_probationReport/components/03_AssignPage.vue
+++ b/src/modules/15_probationReport/components/03_AssignPage.vue
@@ -16,6 +16,7 @@ import type {
 } from "@/modules/15_probationReport/interface/Main";
 
 import genReport from "@/plugins/genreport";
+import SkeletonTemplate from "@/modules/15_probationReport/components/SkeletonTemplate.vue";
 
 const dataProbation = defineModel<FileType[]>("dataProbation", {
   required: true,
@@ -1069,8 +1070,12 @@ function updateAppointMent() {
   }
 }
 
+const isLoad = ref<boolean>(false);
+
 /** เมื่อโหลดหน้า เรียกใช้งานฟังชั่น */
 onMounted(async () => {
+  isLoad.value = true;
+
   const promises = [
     getAssignNew(dataStore.formData.profileId),
     getLaw(dataStore.formData.profileId),
@@ -1084,14 +1089,15 @@ onMounted(async () => {
   if (probationStore.assignId !== undefined) {
     promises.push(getAssign());
   }
-  showLoader();
   await Promise.all(promises)
-    .then(() => {})
+    .then(() => {
+      isLoad.value = false;
+    })
     .catch((e) => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoad.value = false;
     });
 });
 </script>
@@ -1117,8 +1123,7 @@ onMounted(async () => {
           </q-btn>
         </div>
       </div>
-
-      <div class="col-12 text-dark">
+      <div v-if="!isLoad" class="col-12 text-dark">
         <div class="row col-12">
           <div class="row col-12 q-gutter-lg">
             <div class="col-12">
@@ -2803,6 +2808,7 @@ onMounted(async () => {
           </div>
         </div>
       </div>
+      <SkeletonTemplate v-else />
     </div>
   </q-form>
 </template>
diff --git a/src/modules/15_probationReport/components/SkeletonTemplate.vue b/src/modules/15_probationReport/components/SkeletonTemplate.vue
new file mode 100644
index 0000000..b641063
--- /dev/null
+++ b/src/modules/15_probationReport/components/SkeletonTemplate.vue
@@ -0,0 +1,544 @@
+<template>
+  <div class="col-12 text-dark">
+    <div class="row col-12">
+      <div class="row col-12 q-gutter-lg">
+        <div class="col-12">
+          <div class="row q-col-gutter-sm q-mb-sm">
+            <div class="col-6">
+              <q-skeleton type="QIput" height="40px" />
+            </div>
+            <div class="col-6">
+              <q-skeleton type="QIput" height="40px" />
+            </div>
+          </div>
+
+          <div class="col-12 text-top0 items-center">
+            <q-avatar class="bg-grey-2 q-mr-sm" size="28px">1</q-avatar>
+            ผู้ทดลองปฏิบัติหน้าที่ราชการ
+          </div>
+          <div class="col-12 row q-col-gutter-md">
+            <div class="col-xs-12 col-sm-6">
+              <q-skeleton type="QIput" height="40px" />
+            </div>
+            <div class="col-xs-12 col-sm-6">
+              <q-skeleton type="QIput" height="40px" />
+            </div>
+            <div class="col-12 row">
+              <div class="col-12 text-top0 items-center">
+                ระยะเวลาการทดลองปฏิบัติหน้าที่ราชการ
+              </div>
+              <div class="col-12 row q-col-gutter-md">
+                <div class="col-xs-12 col-sm-4">
+                  <q-skeleton type="QIput" height="40px" />
+                </div>
+                <div class="col-xs-12 col-sm-4">
+                  <q-skeleton type="QIput" height="40px" />
+                </div>
+                <div class="col-xs-12 col-sm-4">
+                  <q-skeleton type="QIput" height="40px" />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="col-12">
+          <q-separator size="3px" color="grey-2" />
+        </div>
+        <div class="col-12 row">
+          <div class="col-12 text-top0 items-center">
+            <q-avatar class="bg-grey-2 q-mr-sm" size="28px">2</q-avatar>
+            ผู้ดูแลการทดลองปฏิบัติหน้าที่ราชการ (อาจมีได้มากกว่า 1 คน)
+          </div>
+          <div class="col-12 row q-col-gutter-md">
+            <div class="col-xs-12 col-sm-6">
+              <q-skeleton type="QIput" height="40px" />
+            </div>
+            <div class="col-xs-12 col-sm-6">
+              <q-skeleton type="QIput" height="40px" />
+            </div>
+          </div>
+        </div>
+        <div class="col-12">
+          <q-separator size="3px" color="grey-2" />
+        </div>
+        <!-- 3.1 -->
+        <div class="col-12 row">
+          <div class="col-12 text-top0 items-center">
+            <q-avatar class="bg-grey-2 q-mr-sm" size="28px">3</q-avatar>
+            ผลการปฏิบัติงาน
+          </div>
+          <div class="col-12 text-top2 row items-center">
+            <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+            3.1 ชื่องาน/ภารกิจงานที่มอบหมาย (ควรมีมากกว่า 1 ภารกิจงาน)
+          </div>
+          <div class="col-12 row q-gutter-sm">
+            <q-card flat bordered class="col-12 q-pa-sm bg-grey-1">
+              <div class="col-12 row q-col-gutter-sm">
+                <div class="col-xs-12 col-sm-6">
+                  <q-skeleton type="QIput" height="90px" />
+                </div>
+                <div class="col-xs-12 col-sm-5">
+                  <q-skeleton type="QIput" height="90px" />
+                </div>
+              </div>
+            </q-card>
+            <q-card flat bordered class="col-12 q-pa-sm bg-grey-1">
+              <div class="col-12 row q-col-gutter-sm">
+                <div class="col-xs-12 col-sm-6">
+                  <q-skeleton type="QIput" height="90px" />
+                </div>
+                <div class="col-xs-12 col-sm-5">
+                  <q-skeleton type="QIput" height="90px" />
+                </div>
+              </div>
+            </q-card>
+          </div>
+        </div>
+        <!-- 3.2 -->
+        <div class="col-12 row">
+          <div class="col-12 text-top2">
+            <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+            3.2 ความรู้ความสามารถและทักษะ (ตามที่ก.ก.กําหนด)
+          </div>
+          <q-card bordered flat class="col-12 row q-pa-md bg-grey-1">
+            <div class="row col-12 q-gutter-lg">
+              <div class="col-12 row">
+                <div class="col-12 text-top2 row items-center">
+                  ความรู้ความสามารถในการปฏิบัติงาน
+                </div>
+                <div class="col-12 row q-col-gutter-sm">
+                  <div class="col-11 q-my-xs">
+                    <q-skeleton type="QIput" height="40px" />
+                  </div>
+                </div>
+                <div class="col-12 row q-col-gutter-sm">
+                  <div class="col-11 q-my-xs">
+                    <q-skeleton type="QIput" height="40px" />
+                  </div>
+                </div>
+                <div class="col-12 row q-col-gutter-sm">
+                  <div class="col-11 q-my-xs">
+                    <q-skeleton type="QIput" height="40px" />
+                  </div>
+                </div>
+              </div>
+              <div class="col-12 row">
+                <div class="col-12 text-top2 row items-center">
+                  ความรู้เรื่องกฎหมายและกฎระเบียบ (ไม่เกิน 20 หัวข้อ)
+                </div>
+                <q-card
+                  flat
+                  bordered
+                  class="col-12 q-pa-md q-mt-sm"
+                  style="max-height: 500px; overflow-y: scroll"
+                >
+                  <q-skeleton height="400px" />
+                </q-card>
+              </div>
+
+              <div class="col-12 row">
+                <div class="col-12 text-top2">
+                  กฎหมายอื่น ๆ ที่เกี่ยวข้องกับการปฏิบัติงาน
+                </div>
+                <div class="col-12 row q-col-gutter-md">
+                  <div class="col-12">
+                    <q-skeleton type="QIput" height="40px" />
+                  </div>
+                </div>
+              </div>
+
+              <div class="col-12 row">
+                <div class="col-12 text-top2">ทักษะ</div>
+                <div class="col-12 row q-col-gutter-sm">
+                  <div class="col-xs-12 col-sm-6">
+                    <q-skeleton type="QIput" height="40px" />
+                  </div>
+
+                  <div class="col-xs-12 col-sm-6">
+                    <q-skeleton type="QIput" height="40px" />
+                  </div>
+
+                  <div class="col-xs-12 col-sm-6">
+                    <q-skeleton type="QIput" height="40px" />
+                  </div>
+
+                  <div class="col-xs-12 col-sm-6">
+                    <q-skeleton type="QIput" height="40px" />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </q-card>
+        </div>
+
+        <div class="col-12 row">
+          <div class="col-12 text-top2">
+            <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+            3.3 สมรรถนะ (ตามที่ ก.ก. กําหนด)
+          </div>
+          <q-card bordered flat class="col-12 row q-pa-md bg-grey-1">
+            <div class="row col-12 q-gutter-lg">
+              <div class="col-12 row">
+                <div class="col-12 text-top2">สมรรถนะหลัก</div>
+                <div class="col-12 row q-col-gutter-sm">
+                  <div class="col-xs-12 col-sm-6">
+                    <q-skeleton type="QIput" height="40px" />
+                  </div>
+
+                  <div class="col-xs-12 col-sm-6">
+                    <q-skeleton type="QIput" height="40px" />
+                  </div>
+
+                  <div class="col-xs-12 col-sm-6">
+                    <q-skeleton type="QIput" height="40px" />
+                  </div>
+
+                  <div class="col-xs-12 col-sm-6">
+                    <q-skeleton type="QIput" height="40px" />
+                  </div>
+
+                  <div class="col-xs-12 col-sm-6">
+                    <q-skeleton type="QIput" height="40px" />
+                  </div>
+                </div>
+              </div>
+
+              <div class="col-12 row">
+                <div class="col-12 text-top2">สมรรถนะประจํากลุ่มงาน</div>
+                <div class="col-12 row q-col-gutter-sm">
+                  <div class="col-xs-12 col-sm-6">
+                    <q-skeleton type="QIput" height="40px" />
+                  </div>
+
+                  <div class="col-xs-12 col-sm-6">
+                    <q-skeleton type="QIput" height="40px" />
+                  </div>
+
+                  <div class="col-xs-12 col-sm-6">
+                    <q-skeleton type="QIput" height="40px" />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </q-card>
+        </div>
+
+        <div class="col-12 row">
+          <div class="col-12 text-top2 row items-center">
+            <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+            3.4 พฤติกรรมที่จําเป็นสําหรับการปฏิบัติงาน<span
+              class="text-weight-regular q-pl-sm"
+            >
+              ( ได้แก่ ความประพฤติ ความมีคุณธรรมจริยธรรม การรักษาวินัย )</span
+            >
+          </div>
+          <q-card bordered flat class="col-12 row q-pa-md bg-grey-1">
+            <div class="row col-12 q-gutter-lg">
+              <div class="col-12 row">
+                <div class="col-12 text-top2">ความประพฤติ ได้แก่</div>
+                <div class="col-12 row q-col-gutter-md">
+                  <div class="col-12 column q-ml-md">
+                    <li>ให้บริการประชาชน หรือผู้รับบริการด้วยอธัยาศัยดี</li>
+                    <li>มีความรับผิดชอบในการปฏิบัติงาน</li>
+                    <li>
+                      ให้บริการประชาชน หรือผู้รับบริการด้วยความรวดเร็ว
+                      เอาใจใส่เป็นมาตรฐานเดียวกัน
+                    </li>
+                    <li>
+                      ตั้งใจปฏิบัติหน้าที่ราชการด้วยความอุตสาหะ ขยันหมั่นเพียร
+                    </li>
+                  </div>
+                </div>
+              </div>
+              <div class="col-12 row">
+                <div class="col-12 text-top2">ความมีคุณธรรมจริยธรรม ได้แก่</div>
+                <div class="col-12 row q-col-gutter-md">
+                  <div class="col-12 column q-ml-md">
+                    <li>
+                      อุทิศตน
+                      และเสียสละเวลาในการปฏิบัติงานอย่างเต็มกำลังความสามารถ
+                    </li>
+                    <li>มีจิตสำนึกที่ดี ปฏิบัติงานด้วยความซื่อสัตย์ สุจริต</li>
+                    <li>
+                      ยึดมั่นในสถาบันพระมหากษัตริย์ และไม่กระทำการใดๆ
+                      อันจะก่อให้เกิดความเสียหายต่อประเทศชาติ ศาสนา
+                      และพระมหากษัตริย์
+                    </li>
+                  </div>
+                </div>
+              </div>
+              <div class="col-12 row">
+                <div class="col-12 text-top2">การรักษาวินัย ได้แก่</div>
+                <div class="col-12 row q-col-gutter-md">
+                  <div class="col-12 column q-ml-md">
+                    <li>มีความรับผิดชอบในการรักษาเวลาทำงาน</li>
+                    <li>
+                      แต่งกายในการปฏิบัติงานได้อย่างเหมาะสมกับการเป็นข้าราชการ
+                    </li>
+                    <li>
+                      ไม่กระทำการใดๆ อันเป็นการเสื่อมเกียรติ
+                      และศักดิ์ศรีของความเป็นข้าราชการ
+                    </li>
+                    <li>
+                      ไม่กระทำการใดๆ
+                      อันอาจก่อให้เกิดความเสียหายแก่ชื่อเสียงของหน่วยงาน
+                    </li>
+                    <li>
+                      ปฏิบัติหน้าที่อย่างตรงไปตรงมาโดยยึกหลักจรรยาบรรณวิชาชีพ
+                    </li>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </q-card>
+        </div>
+
+        <div class="col-12 row">
+          <div class="col-12 text-top2">
+            <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+            3.5 อื่น ๆ (ถ้ามี)
+          </div>
+          <div class="col-12 row q-col-gutter-md">
+            <div class="col-12">
+              <q-skeleton type="QIput" height="40px" />
+            </div>
+          </div>
+        </div>
+        <div class="col-12 row">
+          <div class="col-12 text-top2 row items-center">
+            <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+            3.6 ผลผลิตของงานที่คาดหวังและตัวชี้วัดความสําเร็จของงาน
+          </div>
+          <div class="col-12 row q-gutter-md">
+            <q-card flat bordered class="col-12 q-pa-sm bg-grey-1">
+              <div class="col-12 row q-col-gutter-sm">
+                <div class="col-xs-12 col-sm-6">
+                  <q-skeleton type="QIput" height="90px" />
+                </div>
+
+                <div class="col-xs-12 col-sm-5">
+                  <q-skeleton type="QIput" height="90px" />
+                </div>
+              </div>
+            </q-card>
+          </div>
+        </div>
+
+        <div class="col-12">
+          <q-separator size="3px" color="grey-2" />
+        </div>
+        <div class="col-12 row">
+          <div class="col-12 text-top0 items-center">
+            <q-avatar class="bg-grey-2 q-mr-sm" size="28px">4</q-avatar>
+            การพัฒนาผู้ทดลองปฏิบัติหน้าที่ราชการ
+          </div>
+          <div class="col-12 row">
+            <div class="col-12 text-top2">
+              ผู้ทดลองปฏิบัติหน้าที่ราชการต้องเข้าร่วมในการปฐมนิเทศ
+              และอบรมหลักสูตรต่าง ๆ ภายในระยะเวลาทดลองปฏิบัติหน้าที่ราชการ
+              ดังนี้
+            </div>
+            <div class="col-12 text-top2 row items-center">
+              <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+              4.1 การปฐมนิเทศเพื่อให้มีความรู้เกี่ยวกับหน่วยงาน/ส่วนราชการ
+            </div>
+            <div class="col-12 text-top2 row items-center">
+              <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+              4.2
+              การเรียนรู้ด้วยตนเองเพื่อให้มีความรู้เกี่ยวกับกฎหมายกฎระเบียบแบบแผนของทางราชการ
+            </div>
+            <div class="col-12 text-top2 row items-center">
+              <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+              4.3
+              การอบรมสัมมนาร่วมกันเพื่อปลูกฝังการประพฤติปฏิบัติตนเป็นข้าราชการที่ดี
+            </div>
+            <div class="col-12 text-top2 row items-center">
+              <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+              4.4 การอบรมอื่น ๆ ที่หน่วยงานกำหนด (ถ้ามี)
+            </div>
+          </div>
+        </div>
+        <div class="col-12">
+          <q-separator size="3px" color="grey-2" />
+        </div>
+        <div class="col-12 row">
+          <div class="col-12 text-top0 items-center">
+            <q-avatar class="bg-grey-2 q-mr-sm" size="28px">5</q-avatar>
+            การประเมินผลการทดลองปฏิบัติหน้าที่ราชการ
+          </div>
+          <div class="col-12 text-top2 row items-center">
+            <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+            5.1
+            ประเมินผลการทดลองปฏิบัติหน้าที่ราชการโดยคณะกรรมการประเมินผลการทดลองปฏิบัติหน้าที่ราชการ
+          </div>
+          <div class="col-12 text-top2 row items-center">
+            <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+            5.2 รายละเอียดการประเมินประกอบด้วย 2 ส่วนคือ
+          </div>
+          <div class="col-12 row q-gutter-md">
+            <q-card flat bordered class="col-12 q-pa-md bg-grey-1">
+              <div class="col-12 text-top2">การรักษาวินัย ได้แก่</div>
+              <div class="col-12 row q-col-gutter-md">
+                <div class="col-12 column q-ml-md">
+                  <li>ความรู้ความสามารถที่ ก.ก. กำหนด</li>
+                  <li>ทักษะที่ ก.ก. กำหนด</li>
+                  <li>สมรรถนะตามที่ ก.ก. กำหนด</li>
+                  <li>ความสามารถในการเรียนรู้งานในตำแหน่ง</li>
+                  <li>ความสามารถในการปรับใช้ความรู้กับงานในหน้าที่</li>
+                  <li>ความสำเร็จของงานที่ได้รับมอบหมาย</li>
+                  <li>
+                    อื่น ๆ (ถ้ามี)
+                    <q-skeleton type="QIput" height="40px" />
+                  </li>
+                </div>
+              </div>
+            </q-card>
+          </div>
+        </div>
+        <div class="col-12 row">
+          <div class="col-12 text-top2 row items-center">
+            <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+            5.3
+            ข้อมูลที่ใช้ประกอบการประเมินผลการทดลองปฏิบัติหน้าที่ราชการประกอบด้วย
+          </div>
+          <div class="col-12 row q-gutter-md">
+            <q-card flat bordered class="col-12 q-pa-md bg-grey-1">
+              <div class="col-12 row q-col-gutter-md">
+                <div class="col-12 column q-ml-md">
+                  <li>
+                    บันทึกผลการทดลองปฏิบัติหน้าที่ราชการของผู้ดูแลการทดลองปฏิบัติหน้าที่ราชการ
+                    และผู้บังคับบัญา
+                  </li>
+                  <li>
+                    แบบประเมินผลการทดลองปฏิบัติหน้าที่ราชการของผู้บังคับบัญชา
+                  </li>
+                  <li>รายงานผลการพัฒนาตามที่สำนักงาน ก.ก. กำหนด</li>
+                </div>
+              </div>
+            </q-card>
+          </div>
+        </div>
+        <div class="col-12 row">
+          <div class="col-12 text-top2 row items-center">
+            <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+            5.3 สัดส่วนของคะแนน และมาตรฐานการประเมิน
+          </div>
+          <div class="col-12 row q-gutter-md">
+            <q-card flat bordered class="col-12 q-pa-md bg-grey-1">
+              <div class="col-12 row q-col-gutter-md">
+                <div class="col-12 column q-ml-md">
+                  <li>สัดส่วนของคะแนนการทดลองปฏิบัติหน้าที่ราชการ</li>
+                  <div class="q-pl-lg">
+                    ส่วนที่ 1
+                    คะแนนผลสัมฤทธิ์ของการทดลองปฏิบัติหน้าที่ราชการร้อยละ 50
+                  </div>
+                  <div class="q-pl-lg">
+                    ส่วนที่ 2 คะแนนพฤติกรรมของผู้ทดลองปฏิบัติหน้าที่ราชการร้อยละ
+                    50
+                  </div>
+                  <div class="q-pl-lg">
+                    มาตรฐานการประเมินแต่ละส่วนต้องได้คะแนนไม่ต่ำกว่าร้อยละ 60
+                  </div>
+                  <li>
+                    สัดส่วนคะแนนการพัฒนาข้าราชการที่อยู่ระหว่างการทดลองปฏิบัติหน้าที่ราชการ
+                  </li>
+                  <div class="q-pl-lg">
+                    คะแนนรวมของการพัฒนาจะต้องไม่น้อยกว่าร้อยละ 60
+                  </div>
+                  <div>
+                    <span style="text-decoration: underline">หมายเหตุ</span>
+                    ให้นำคะแนนรวมทั้ง 2
+                    ส่วนมารวมกันแล้วต้องได้คะแนนไม่น้อยกว่าร้อยละ 60
+                    จึงถือว่าผ่านการประเมินการทดลองปฏิบัติหน้าที่ราชการ
+                  </div>
+                </div>
+              </div>
+            </q-card>
+          </div>
+        </div>
+        <div class="col-12">
+          <q-separator size="3px" color="grey-2" />
+        </div>
+        <div class="col-12 row">
+          <div class="col-12 text-top0 items-center">
+            การลงชื่อเพื่อมอบหมายงานและรับมอบหมายงานในการทดลองปฏิบัติหน้าที่ราชการ
+          </div>
+          <div class="col-12 row">
+            <div class="col-12 text-top2 row items-center">
+              <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+              ผู้ทดลองปฏิบัติหน้าที่ราชการ
+            </div>
+          </div>
+          <div class="col-12 row q-col-gutter-md">
+            <div class="col-xs-12 col-sm-4">
+              <q-skeleton type="QIput" height="40px" />
+            </div>
+
+            <div class="col-xs-12 col-sm-4">
+              <q-skeleton type="QIput" height="40px" />
+            </div>
+
+            <div class="col-xs-12 col-sm-4">
+              <q-skeleton type="QIput" height="40px" />
+            </div>
+          </div>
+        </div>
+
+        <div class="col-12 row">
+          <div class="col-12 text-top2 row items-center">
+            <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+            ผู้ดูแลการทดลองปฏิบัติหน้าที่ราชการ
+          </div>
+
+          <div class="col-12 row q-col-gutter-md">
+            <div class="col-xs-12 col-sm-8">
+              <q-skeleton type="QIput" height="40px" />
+            </div>
+
+            <div class="col-xs-12 col-sm-4">
+              <q-skeleton type="QIput" height="40px" />
+            </div>
+            <div class="col-xs-12 col-sm-8">
+              <q-skeleton type="QIput" height="40px" />
+            </div>
+
+            <div class="col-xs-12 col-sm-4">
+              <q-skeleton type="QIput" height="40px" />
+            </div>
+          </div>
+        </div>
+        <div class="col-12 row">
+          <div class="col-12 text-top2 row items-center">
+            <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+            ผู้บังคับบัญชาผู้มอบหมายงาน
+          </div>
+
+          <div class="col-12 row q-col-gutter-md">
+            <div class="col-xs-12 col-sm-8">
+              <q-skeleton type="QIput" height="40px" />
+            </div>
+
+            <div class="col-xs-12 col-sm-4">
+              <q-skeleton type="QIput" height="40px" />
+            </div>
+          </div>
+        </div>
+
+        <div class="col-12 row" style="display: none">
+          <div class="col-12 text-top2 row items-center">
+            <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+            ประธานกรรมการ
+          </div>
+          <div class="col-12 row q-col-gutter-md">
+            <div class="col-xs-12 col-sm-8">
+              <q-skeleton type="QIput" height="40px" />
+            </div>
+            <div class="col-xs-12 col-sm-4">
+              <q-skeleton type="QIput" height="40px" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/modules/15_probationReport/views/main.vue b/src/modules/15_probationReport/views/main.vue
index 88d5114..6df03ac 100644
--- a/src/modules/15_probationReport/views/main.vue
+++ b/src/modules/15_probationReport/views/main.vue
@@ -22,6 +22,7 @@ const { showLoader, hideLoader, messageError } = mixin;
 
 const dataSurvey = ref<any>(null);
 const isData = ref<boolean>(true);
+const isLoad = ref<boolean>(false);
 const dataProbation = ref<FileType[]>([]);
 const dataResult1 = ref<FileType[]>([]);
 const dataResult2 = ref<FileType[]>([]);
@@ -44,11 +45,15 @@ const result_option = reactive([
 /** ดึง ข้อมูลแบบสำรวจ */
 async function getSurveyData() {
   isData.value = true;
-  showLoader();
+
   await http
     .get(config.API.summaryDetail())
     .then(async (res: any) => {
       const data = await res.data.result.data;
+      if (data) {
+        isLoad.value = true;
+      }
+
       isData.value = true;
       store.assignId = res.data.result.assignId;
       if (res.data.result.assignId) {
@@ -75,13 +80,13 @@ async function getSurveyData() {
       }
       if (data !== null) {
         dataSurvey.value = data;
+        isLoad.value = false;
       }
-      hideLoader();
     })
     .catch((e) => {
       // messageError($q, e);
       isData.value = false;
-      hideLoader();
+      isLoad.value = false;
     });
 }
 
@@ -167,6 +172,7 @@ onMounted(async () => {
               <SurveyPage
                 v-model:is-data="isData"
                 v-model:data-survey="dataSurvey"
+                v-model:is-load="isLoad"
                 :get-survey-data="getSurveyData"
               />
             </q-tab-panel>
diff --git a/src/stores/data.ts b/src/stores/data.ts
index 57eea19..f24c77e 100644
--- a/src/stores/data.ts
+++ b/src/stores/data.ts
@@ -9,6 +9,8 @@ import { useCounterMixin } from "./mixin";
 import type { ProfileData, DataProfile } from "@/interface/Main";
 
 export const useDataStore = defineStore("dataMain", () => {
+  const isLoadingMenu = ref<boolean>(false);
+  const isLoadingProfile = ref<boolean>(false);
   const dataProfile = ref<any>();
   const storeRegistry = useRegistryInFormationStore();
   const $q = useQuasar();
@@ -102,6 +104,7 @@ export const useDataStore = defineStore("dataMain", () => {
   }
 
   async function getData(dataPerson: any) {
+    isLoadingProfile.value = true;
     const data = await dataPerson;
     dataprofilePosition.value = data;
     profileId.value = data.profileId;
@@ -130,9 +133,11 @@ export const useDataStore = defineStore("dataMain", () => {
     formData.org = findOrgName(data);
     storeRegistry.profileId = data.profileId;
     storeRegistry.citizenId = data.citizenId;
+    isLoadingProfile.value = false;
   }
 
   async function getProFileType() {
+    isLoadingMenu.value = true;
     if (officerType.value == "") {
       await http
         .get(config.API.proFileType)
@@ -144,6 +149,8 @@ export const useDataStore = defineStore("dataMain", () => {
           messageError($q, e);
         });
     }
+
+    isLoadingMenu.value = false;
     return convertEmType(officerType.value);
   }
 
@@ -172,6 +179,8 @@ export const useDataStore = defineStore("dataMain", () => {
     dataProfile,
     profileId,
     dataprofilePosition,
+    isLoadingMenu,
+    isLoadingProfile,
   };
 });