From f0313b959adebde448b32d1f0bf447c2f52c18ba Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Mon, 30 Sep 2024 17:16:12 +0700
Subject: [PATCH] =?UTF-8?q?fix=20load=20=E0=B9=82=E0=B8=84=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=87=E0=B8=AA=E0=B8=A3=E0=B9=89=E0=B8=B2=E0=B8=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/LoadView.vue                    | 18 ++++++++++++++++++
 .../02_organization/components/TreeView.vue    | 11 ++---------
 src/modules/16_positionEmployee/views/main.vue | 11 ++---------
 3 files changed, 22 insertions(+), 18 deletions(-)
 create mode 100644 src/components/LoadView.vue

diff --git a/src/components/LoadView.vue b/src/components/LoadView.vue
new file mode 100644
index 000000000..ff2093e02
--- /dev/null
+++ b/src/components/LoadView.vue
@@ -0,0 +1,18 @@
+<template>
+  <div class="full-width row flex-center text-accent q-gutter-sm">
+    <span
+      ><div
+        style="
+          height: 50vh;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          align-items: center;
+        "
+        class="text-grey-5"
+      >
+        <q-spinner color="primary" size="3em" :thickness="10" />
+      </div>
+    </span>
+  </div>
+</template>
diff --git a/src/modules/02_organization/components/TreeView.vue b/src/modules/02_organization/components/TreeView.vue
index fb1e1452c..e0ab8ffd0 100644
--- a/src/modules/02_organization/components/TreeView.vue
+++ b/src/modules/02_organization/components/TreeView.vue
@@ -19,6 +19,7 @@ import type { FilterMaster } from "@/modules/02_organization/interface/request/o
 /** importComponents*/
 import TreeMain from "@/modules/02_organization/components/TreeMain.vue";
 import TreeTable from "@/modules/02_organization/components/TreeTable.vue";
+import LoadView from "@/components/LoadView.vue";
 
 /** use*/
 const store = useOrganizational();
@@ -278,15 +279,7 @@ onMounted(async () => {
 
       <div class="col-xs-12 col-sm-9 q-pa-md row">
         <div class="col-12 row">
-          <div
-            class="row col-12 justify-center"
-            v-if="isLoad"
-            style="height: 550px"
-          >
-            <div class="col-2">
-              <q-spinner color="primary" size="3em" />
-            </div>
-          </div>
+          <LoadView v-if="isLoad" />
 
           <div v-else class="col-12 row">
             <div class="col-12" v-if="nodeId !== ''">
diff --git a/src/modules/16_positionEmployee/views/main.vue b/src/modules/16_positionEmployee/views/main.vue
index d1376e4e7..1ec3f4dfa 100644
--- a/src/modules/16_positionEmployee/views/main.vue
+++ b/src/modules/16_positionEmployee/views/main.vue
@@ -21,6 +21,7 @@ import type { FilterMaster } from "@/modules/16_positionEmployee/interface/reque
 /** importComponents*/
 import TreeMain from "@/modules/16_positionEmployee/components/TreeMain.vue";
 import TreeTable from "@/modules/16_positionEmployee/components/TreeTable.vue";
+import LoadView from "@/components/LoadView.vue";
 
 /** use*/
 const store = usePositionEmp();
@@ -237,15 +238,7 @@ onMounted(() => {
 
             <div class="col-xs-12 col-sm-9 q-pa-md row">
               <div class="col-12 row">
-                <div
-                  class="row col-12 justify-center"
-                  v-if="isLoad"
-                  style="height: 550px"
-                >
-                  <div class="col-2">
-                    <q-spinner color="primary" size="3em" />
-                  </div>
-                </div>
+                <LoadView v-if="isLoad" />
 
                 <div v-else class="col-12 row">
                   <div class="col-12" v-if="nodeId !== ''">