From 4a8874f385ac1a8c82d002d54b8e887f91effdac Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Tue, 5 Aug 2025 13:39:36 +0700
Subject: [PATCH] Skeleton Workflow

---
 src/components/Workflow/Main.vue | 23 +++++++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/components/Workflow/Main.vue b/src/components/Workflow/Main.vue
index 6c5f5b4..209a9c2 100644
--- a/src/components/Workflow/Main.vue
+++ b/src/components/Workflow/Main.vue
@@ -10,7 +10,6 @@ import type { Permission } from "@/components/Workflow/interface/index/Main";
 import type { DataListState } from "@/components/Workflow/interface/response/Main";
 
 import DialogSelectPerson from "@/components/Workflow/DialogSelectPerson.vue";
-import Keycloak from "keycloak-js";
 
 const $q = useQuasar();
 const { dialogConfirm, showLoader, hideLoader, messageError } =
@@ -31,6 +30,7 @@ const stateId = ref<string>(""); //id state ปัจุบัน
 const state = ref<number>(1); //state ปัจุบัน
 const isPermission = ref<boolean>(true); //การเข้าถึง Workflow
 const KeycloakId = ref<string>("");
+const isLoading = ref<boolean>(false); //สถานะการโหลดข้อมูล
 
 const permission = ref<Permission>({
   isChangeState: false, //ส่งไปยังผู้บังคับบัญชา/ผู้มีอำนาจ
@@ -48,6 +48,7 @@ const itemState = ref<DataListState[]>([]);
 
 /** ฟังก์ชันเรียกข้อมูล Workflow ที่อยู่ปัจุบัน*/
 async function fetchCheckState() {
+  isLoading.value = true;
   await http
     .post(config.API.workflow + `check-user-now`, {
       refId: id,
@@ -74,6 +75,9 @@ async function fetchCheckState() {
     })
     .catch(() => {
       isPermission.value = false;
+    })
+    .finally(() => {
+      isLoading.value = false;
     });
 }
 
@@ -129,7 +133,22 @@ defineExpose({
       <div class="q-pl-sm text-weight-bold text-dark">สถานะการดำเนินเรื่อง</div>
     </div>
     <div class="col-12"><q-separator /></div>
-    <q-card-section>
+    <q-card-section class="col-12 q-px-lg q-py-md" v-if="isLoading">
+      <q-timeline color="primary">
+        <q-timeline-entry
+          v-for="(step, index) in 4"
+          :key="index"
+          :icon="`mdi-numeric-${index + 1}`"
+          color="grey-4"
+        >
+          <template #title>
+            <q-skeleton type="rect" width="150px" height="20px" />
+          </template>
+        </q-timeline-entry>
+      </q-timeline>
+    </q-card-section>
+
+    <q-card-section v-else>
       <div class="q-px-lg q-py-md">
         <q-timeline color="primary">
           <q-timeline-entry