fix loading Skeleton

src/modules/12_organization/views/main.vue

@@ -29,6 +29,7 @@ const dataSource = ref(); // ข้อมูล Chart
 const idActive = ref<string>("");
 const dataSourceLock = ref(); // ข้อมูลตั้งต้นของ Chart ใช้ให้กดกลับไปที่ home
 const scrollContainer = ref<HTMLElement | null>(null);
+const isLoading = ref<boolean>(false);
 
 /**
  * สร้าง Path Breadcrumbs
@@ -150,7 +151,7 @@ async function fetchStructChart(
   type: string,
   status: boolean = false
 ) {
-  showLoader();
+  isLoading.value = true;
   await http
     .get(config.API.orgStructChart(id, type))
     .then((res) => {
@@ -168,7 +169,7 @@ async function fetchStructChart(
       messageError($q, err);
     })
     .finally(() => {
-      hideLoader();
+      isLoading.value = false;
     });
 }
 
@@ -236,7 +237,19 @@ onMounted(async () => {
     <div class="col-xs-12 col-sm-12 col-md-11 row q-col-gutter-md">
       <div class="col-12 row">
         <q-card bordered class="col-12 row caedNone">
-          <div class="q-pa-sm row wrap items-center">
+          <!-- Skeleton สำหรับ Toolbar -->
+          <div v-if="isLoading" class="q-pa-sm row wrap items-center col-12">
+            <q-skeleton type="circle" size="40px" />
+            <q-skeleton type="circle" size="40px" class="q-ml-sm" />
+            <q-skeleton
+              type="rect"
+              width="300px"
+              height="40px"
+              class="q-ml-md"
+            />
+          </div>
+
+          <div v-else class="q-pa-sm row wrap items-center">
             <q-btn
               flat
               :diasble="isLoadBtn"
@@ -276,7 +289,53 @@ onMounted(async () => {
             <q-separator />
           </div>
 
+          <!-- Organization Chart Skeleton -->
           <div
+            v-if="isLoading"
+            class="q-pt-md col-12"
+            style="height: 70vh; overflow: hidden"
+          >
+            <div class="row justify-center q-mb-lg">
+              <!-- Main Department Skeleton -->
+              <div class="col-auto">
+                <q-skeleton
+                  type="rect"
+                  width="300px"
+                  height="80px"
+                  class="rounded-borders"
+                />
+              </div>
+            </div>
+
+            <!-- Sub Departments Skeleton -->
+            <div class="row justify-center q-col-gutter-md">
+              <div v-for="i in 5" :key="i" class="col-auto">
+                <div class="column items-center">
+                  <q-skeleton
+                    type="rect"
+                    width="200px"
+                    height="60px"
+                    class="rounded-borders q-mb-md"
+                  />
+
+                  <!-- Sub Items Skeleton -->
+                  <div class="column q-gutter-xs">
+                    <q-skeleton
+                      v-for="j in 3"
+                      :key="j"
+                      type="rect"
+                      width="180px"
+                      height="35px"
+                      class="rounded-borders"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div
+            v-else
             id="structChart"
             ref="scrollContainer"
             style="