fix:load skeleton

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,10 @@ 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,6 +113,7 @@ async function getAvatar(id: string) {
     })
     .catch((e) => {
       messageError($q, e);
+      isLoadAvatar.value = false;
     });
 }
 
@@ -115,6 +124,7 @@ async function fetchProfile(id: string, avatarName: string) {
     .then(async (res) => {
       store.dataEvaluation.avartar = res.data.downloadUrl;
       imgProfile.value = res.data.downloadUrl;
+      isLoadAvatar.value = false;
     });
 }
 
@@ -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;
     });
 }
 
@@ -654,7 +669,6 @@ function onResize(size: { width: any; height: any }) {
 }
 
 onMounted(async () => {
-  showLoader();
   store.isUpdate = false;
   await getAll();
 });
@@ -689,7 +703,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 +714,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 +1044,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 +1195,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 +1247,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 +1290,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"
               >