fix loading Skeleton

src/modules/10_registry/05_Other/02_File.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useCounterMixin } from "@/stores/mixin";
-import { useQuasar, type QTableProps } from "quasar";
-import { ref, reactive, onMounted } from "vue";
+import { is, useQuasar } from "quasar";
+import { ref, onMounted } from "vue";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -9,23 +9,17 @@ import { useRegistryInFormationStore } from "@/modules/10_registry/store/registr
 
 import type { FileFormType } from "@/modules/10_registry/interface/index/Main";
 
-const fileList = ref<FileFormType[]>([]);
-const store = useRegistryInFormationStore();
 const $q = useQuasar();
-const mixin = useCounterMixin();
-const { showLoader, hideLoader, messageError, date2Thai } = mixin;
+const store = useRegistryInFormationStore();
+const { showLoader, hideLoader, messageError } = useCounterMixin();
 
-const modalHistory = ref<boolean>(false);
-/** ตัวแปรข้อมูล */
+const isLoading = ref<boolean>(false);
+const fileList = ref<FileFormType[]>([]);
 
-function onHistory() {
-  modalHistory.value = true;
-}
-
-/** get data */
-function getData() {
-  showLoader();
-  http
+/** ฟังก์ชันดึงข้อมูลไฟล์ */
+async function getData() {
+  isLoading.value = true;
+  await http
     .get(
       config.API.fileByFileUser(
         "ระบบทะเบียนประวัติ",
@@ -41,9 +35,7 @@ function getData() {
       messageError($q, e);
     })
     .finally(() => {
-      setTimeout(() => {
-        hideLoader();
-      }, 1500);
+      isLoading.value = false;
     });
 }
 
@@ -51,9 +43,9 @@ function getData() {
  * ดาวน์โหลดลิงค์ไฟล์
  * @param fileName file name
  */
-function downloadFile(fileName: string) {
+async function downloadFile(fileName: string) {
   showLoader();
-  http
+  await http
     .get(
       config.API.fileByFile(
         "ระบบทะเบียนประวัติ",
@@ -69,7 +61,7 @@ function downloadFile(fileName: string) {
     .catch((e) => {
       messageError($q, e);
     })
-    .finally(async () => {
+    .finally(() => {
       hideLoader();
     });
 }
@@ -78,8 +70,8 @@ onMounted(() => {
   getData();
 });
 </script>
+
 <template>
-  <!-- v-if="mode" -->
   <div class="col-12">
     <q-toolbar class="q-px-none q-mt-md">
       <span class="text-blue-6 text-weight-bold text-body1">เอกสารหลักฐาน</span>
@@ -89,7 +81,12 @@ onMounted(() => {
         ไฟล์เอกสารหลักฐาน
       </div>
       <div class="col-12"><q-separator /></div>
-      <div class="row col-12 q-col-gutter-y-sm q-pa-sm">
+
+      <div v-if="isLoading" class="col-12 q-pa-sm">
+        <q-skeleton type="QSlider" />
+      </div>
+
+      <div v-else class="row col-12 q-col-gutter-y-sm q-pa-sm">
         <div v-if="fileList.length > 0" class="col-xs-12 row">
           <q-list class="full-width rounded-borders" bordered separator>
             <q-item
@@ -124,6 +121,7 @@ onMounted(() => {
     </q-card>
   </div>
 </template>
+
 <style scoped>
 .absolute_button {
   position: absolute;