fix loading Skeleton

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();
     });
 }
@@ -445,7 +443,9 @@ watch(
       <q-separator />
 
       <q-card-section class="scroll" style="max-height: 60vh">
-        <div class="row">
+        <q-skeleton height="400px" square v-if="isLoading" />
+
+        <div class="row" v-else>
           <div
             flat
             :class="
@@ -571,6 +571,7 @@ watch(
           label="ยืนยัน"
           unelevated
           color="secondary"
+          :loading="isLoading"
           @click="onClickSave"
         />
       </q-card-section>
@@ -584,7 +585,8 @@ watch(
 
       <q-separator />
       <q-card-section class="q-p-md row q-gutter-y-md">
-        <div flat class="col-12">
+        <q-skeleton height="400px" width="100%" square v-if="isLoading" />
+        <div flat class="col-12" v-else>
           <div class="col-12 q-col-gutter-sm row items-center"></div>
           <FormCancel :data="formDataCancle" />
         </div>