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..381ffd3 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 { useQuasar, type QTableProps } from "quasar";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -8,7 +9,7 @@ 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 SkeletonTable from "@/components/SkeletonTable.vue";
 
 const mixin = useCounterMixin();
 const dataStore = useLeaveStore();
@@ -37,6 +38,7 @@ const pagination = ref({
 });
 
 const selected = ref<any[]>([]);
+const isLoading = ref<boolean>(false);
 const rows = ref<any[]>([]);
 const columns = ref<QTableProps["columns"]>([
   {
@@ -93,7 +95,7 @@ function closeDialog() {
 }
 
 async function getCommander() {
-  showLoader();
+  isLoading.value = true;
   await http
     .put(config.API.commanderOperate, {
       isAct: isAct.value,
@@ -108,17 +110,20 @@ async function getCommander() {
     })
     .then((res) => {
       rows.value = res.data.result.data;
+      total.value = res.data.result.total;
+      totalList.value = Math.ceil(
+        res.data.result.total / pagination.value.rowsPerPage
+      );
     })
     .catch((e) => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoading.value = false;
     });
 }
 
 function updatePagination(newPagination: any) {
-  pagination.value.page = 1;
   pagination.value.rowsPerPage = newPagination.rowsPerPage;
 }
 
@@ -345,7 +350,9 @@ onMounted(() => {
               </div>
             </div>
             <div class="col-12">
+              <SkeletonTable v-if="isLoading" :columns="columns" />
               <d-table
+                v-else
                 ref="table"
                 :columns="columns"
                 :rows="rows"
@@ -357,6 +364,7 @@ onMounted(() => {
                 :rows-per-page-options="[10, 25, 50, 100]"
                 selection="single"
                 @update:pagination="updatePagination"
+                v-model:pagination="pagination"
                 v-model:selected="selected"
               >
                 <template v-slot:pagination="scope">
diff --git a/src/modules/05_leave/store.ts b/src/modules/05_leave/store.ts
index 2ee8f9f..5047cc2 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,7 +308,8 @@ 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) => {
@@ -345,7 +347,8 @@ export const useLeaveStore = defineStore("Leave", () => {
         console.log(e);
       })
       .finally(() => {
-        hideLoader();
+        // hideLoader();
+        isLoadingProfile.value = false;
       });
   }
 
@@ -474,5 +477,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..0d9bfc4 100644
--- a/src/modules/05_leave/views/AddPage.vue
+++ b/src/modules/05_leave/views/AddPage.vue
@@ -209,11 +209,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/06_evaluate/components/TableListEvaluate.vue b/src/modules/06_evaluate/components/TableListEvaluate.vue
index 261f49a..4ded7cb 100644
--- a/src/modules/06_evaluate/components/TableListEvaluate.vue
+++ b/src/modules/06_evaluate/components/TableListEvaluate.vue
@@ -153,6 +153,7 @@ onMounted(() => {
     :visible-columns="store.visibleColumns"
     :rows-per-page-options="[10, 25, 50, 100]"
     @update:pagination="updatePagination"
+    v-model:pagination="pagination"
   >
     <template v-slot:header="props">
       <q-tr :props="props">
diff --git a/src/modules/07_appealComplain/views/Form.vue b/src/modules/07_appealComplain/views/Form.vue
index 85ce7cd..d2b715f 100644
--- a/src/modules/07_appealComplain/views/Form.vue
+++ b/src/modules/07_appealComplain/views/Form.vue
@@ -359,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 64e231d..292ba6d 100644
--- a/src/modules/07_appealComplain/views/Main.vue
+++ b/src/modules/07_appealComplain/views/Main.vue
@@ -390,6 +390,7 @@ onMounted(async () => {
                 :visible-columns="dataStore.visibleColumns"
                 :rows-per-page-options="[10, 25, 50, 100]"
                 @update:pagination="updatePagination"
+                v-model:pagination="pagination"
               >
                 <template v-slot:pagination="scope">
                   ทั้งหมด {{ total }} รายการ
diff --git a/src/modules/10_registry/views/requestEditMain.vue b/src/modules/10_registry/views/requestEditMain.vue
index 51c7dda..22121dd 100644
--- a/src/modules/10_registry/views/requestEditMain.vue
+++ b/src/modules/10_registry/views/requestEditMain.vue
@@ -110,6 +110,11 @@ const visibleColumns = ref<string[]>([
   "status",
   "remark",
 ]);
+const pagination = ref({
+  descending: true,
+  page: page.value,
+  rowsPerPage: pageSize.value,
+});
 
 /** function กลับไปหน้าทะเบียนประวัติ*/
 function onclickBackPage() {
@@ -303,6 +308,7 @@ onMounted(async () => {
             :paging="true"
             :visible-columns="visibleColumns"
             @update:pagination="updatePageSizePagination"
+            v-model:pagination="pagination"
           >
             <template v-slot:header="props">
               <q-tr :props="props">
diff --git a/src/modules/14_IDP/views/main.vue b/src/modules/14_IDP/views/main.vue
index 8365183..79f0951 100644
--- a/src/modules/14_IDP/views/main.vue
+++ b/src/modules/14_IDP/views/main.vue
@@ -376,6 +376,7 @@ onMounted(async () => {
               :visible-columns="visibleColumns"
               :rows-per-page-options="[10, 25, 50, 100]"
               @update:pagination="updatePagination"
+              v-model:pagination="pagination"
             >
               <template v-slot:header="props">
                 <q-tr :props="props">