fix loading Skeleton

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,12 +98,21 @@ 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>
 
 <template>
-  <q-list separator>
+  <q-skeleton
+    v-if="isLoading"
+    class="q-pa-md"
+    type="Qcard"
+    style="width: 100%; height: 100%"
+  />
+  <q-list separator v-else>
     <q-item
       v-for="(item, index) in formTemplates"
       :key="index"