เพิ่ม q-skeleton ===> PopupPersonalNew

src/components/Dialogs/PopupPersonalNew.vue

@@ -55,6 +55,7 @@ const emit = defineEmits(["update:modal"]);
 
 /** ตัวแปร*/
 const modal = ref<boolean>(false);
+const isLoading = ref<boolean>(true);
 const employeeClass = ref<string>("");
 const avatar = reactive<Avatar>({
   avatar: "",
@@ -128,7 +129,7 @@ function calculateAge(birthDate: Date | null) {
  * @param id profileID
  */
 async function fetchInformation(id: string) {
-  showLoader();
+  isLoading.value = true;
   await http
     .get(
       config.API.orgProfileById(
@@ -182,7 +183,7 @@ async function fetchInformation(id: string) {
       messageError($q, err);
     })
     .finally(() => {
-      hideLoader();
+      isLoading.value = false;
     });
 }
 
@@ -324,7 +325,33 @@ watch(modal, (newValue) => {
 
       <q-card-section class="col q-pt-none bg-grey-12">
         <div class="q-gutter-md">
-          <q-card bordered class="text-center bg-grey-12">
+          <div v-if="isLoading">
+            <q-skeleton
+              type="QAvatar"
+              size="120px"
+              style="background: #e3e3e3"
+              class="q-mx-auto q-mt-md"
+            />
+            <q-skeleton
+              type="text"
+              width="150px"
+              style="background: #e3e3e3"
+              class="q-mx-auto q-mt-md"
+            />
+            <q-skeleton
+              type="text"
+              width="100px"
+              style="background: #e3e3e3"
+              class="q-mx-auto q-mt-sm"
+            />
+            <q-skeleton
+              type="QBtn"
+              width="150px"
+              style="background: #e3e3e3"
+              class="q-mx-auto q-mt-sm"
+            />
+          </div>
+          <q-card v-else bordered class="text-center bg-grey-12">
             <div>
               <q-avatar size="120px" color="grey-4">
                 <img
@@ -341,6 +368,7 @@ watch(modal, (newValue) => {
                 />
               </q-avatar>
             </div>
+
             <div
               class="q-mt-md text-subtitle2 text-bold"
               style="font-size: 18px"
@@ -378,7 +406,16 @@ watch(modal, (newValue) => {
                     <q-icon name="mdi-account" color="grey-7" />
                     <span class="q-ml-md">ข้อมูลส่วนตัว </span>
                   </div>
-                  <div class="row q-pa-sm">
+                  <div v-if="isLoading" class="row q-pa-sm">
+                    <div
+                      v-for="n in 6"
+                      :key="n"
+                      class="col-xs-6 col-md-6 q-pa-sm"
+                    >
+                      <q-skeleton type="QInput" height="40px" />
+                    </div>
+                  </div>
+                  <div v-else class="row q-pa-sm">
                     <div class="col-xs-6 col-md-6">
                       <q-input
                         borderless
@@ -460,6 +497,18 @@ watch(modal, (newValue) => {
                       }}
                     </span>
                   </div>
+
+                  <div v-if="isLoading" class="row q-pa-sm">
+                    <div
+                      v-for="n in 8"
+                      :key="n"
+                      class="col-xs-6 col-md-6 q-pa-sm"
+                    >
+                      <q-skeleton type="QInput" height="40px" />
+                    </div>
+                  </div>
+
+                  <div v-else>
                     <div v-if="isLeave" class="row q-col-gutter-sm q-pa-sm">
                       <div class="col-xs-6 col-md-6">
                         <q-input
@@ -494,6 +543,7 @@ watch(modal, (newValue) => {
                         />
                       </div>
                     </div>
+
                     <q-separator v-if="isLeave" />
                     <div class="row q-pa-sm" v-if="employeeClass !== 'TEMP'">
                       <div class="col-xs-12 col-md-12 text-html">
@@ -549,7 +599,9 @@ watch(modal, (newValue) => {
                           borderless
                           readonly
                           :model-value="
-                          goverment.positionLine ? goverment.positionLine : '-'
+                            goverment.positionLine
+                              ? goverment.positionLine
+                              : '-'
                           "
                           label="สายงาน"
                         />
@@ -559,7 +611,9 @@ watch(modal, (newValue) => {
                           borderless
                           readonly
                           :model-value="
-                          goverment.positionType ? goverment.positionType : '-'
+                            goverment.positionType
+                              ? goverment.positionType
+                              : '-'
                           "
                           :label="
                             props.type.toLocaleLowerCase() == 'employee'
@@ -751,6 +805,7 @@ watch(modal, (newValue) => {
                       </div>
                     </div>
                   </div>
+                </div>
               </q-card>
 
               <q-card

src/modules/06_retirement/components/02_resign/ResignByid.vue

@@ -23,7 +23,7 @@ import type {
 import type { QTableProps } from "quasar";
 import type { DataProfile } from "@/modules/05_placement/interface/index/Main";
 
-import PopupPersonal from "@/components/Dialogs/PopupPersonal.vue";
+import PopupPersonal from "@/components/Dialogs/PopupPersonalNew.vue";
 import CardProfile from "@/components/CardProfile.vue";
 import DialogAddCommander from "@/modules/06_retirement/components/DialogAddCommander.vue";
 

src/modules/06_retirement/components/03_resignEmp/ResignByid.vue

@@ -25,7 +25,7 @@ import type {
 } from "@/modules/06_retirement/interface/response/Main";
 
 import DialogHeader from "@/components/DialogHeader.vue";
-import PopupPersonal from "@/components/Dialogs/PopupPersonal.vue";
+import PopupPersonal from "@/components/Dialogs/PopupPersonalNew.vue";
 import CardProfile from "@/components/CardProfile.vue";
 import DialogAddCommander from "@/modules/06_retirement/components/DialogAddCommander.vue";