From 3fdd2a2b56be2a8acca63abcdcc8472c4f194e50 Mon Sep 17 00:00:00 2001
From: edmondlang <edmond_wuiming@hotmail.com>
Date: Thu, 13 Apr 2023 22:46:41 +0800
Subject: [PATCH] update package loading animation

---
 .../general/elements/BoxLoadingComponent.vue  | 22 ++++++++++++++-----
 .../OrderPackageV2SectionComponent.vue        |  8 +------
 2 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/resources/assets/vue/components/general/elements/BoxLoadingComponent.vue b/resources/assets/vue/components/general/elements/BoxLoadingComponent.vue
index 110243c6..5affa653 100644
--- a/resources/assets/vue/components/general/elements/BoxLoadingComponent.vue
+++ b/resources/assets/vue/components/general/elements/BoxLoadingComponent.vue
@@ -1,11 +1,21 @@
 <template>
-    <div class="row align-items-center justify-content-center w-100">
+    <div class="row">
         <div class="col">
-            <div class='tetrominos'>
-                <div class='tetromino box1'></div>
-                <div class='tetromino box2'></div>
-                <div class='tetromino box3'></div>
-                <div class='tetromino box4'></div>
+            <div class="row align-items-center justify-content-center w-100"
+                style="height: 200px; top: 0; margin-top: 50px;">
+                <div class="col">
+                    <div class='tetrominos'>
+                        <div class='tetromino box1'></div>
+                        <div class='tetromino box2'></div>
+                        <div class='tetromino box3'></div>
+                        <div class='tetromino box4'></div>
+                    </div>
+                </div>
+            </div>
+            <div class="row align-items-center justify-content-center">
+                <div class="col">
+                    <p class="text-center fs-15 muted all-caps font-lato" style="letter-spacing: 2px">Loading Packages Data</p>
+                </div>
             </div>
         </div>
     </div>
diff --git a/resources/assets/vue/components/orders/sections/OrderPackageV2SectionComponent.vue b/resources/assets/vue/components/orders/sections/OrderPackageV2SectionComponent.vue
index d9078e4f..64e2d165 100644
--- a/resources/assets/vue/components/orders/sections/OrderPackageV2SectionComponent.vue
+++ b/resources/assets/vue/components/orders/sections/OrderPackageV2SectionComponent.vue
@@ -1,13 +1,7 @@
 <template>
     <div class="row">
         <div class="col">
-            <!-- <loading-component style="height: 200px; top: 0;" v-if="isLoading"></loading-component> -->
-            <box-loading-component style="height: 200px; top: 0; margin-top: 50px;" v-if="isLoading"></box-loading-component>
-            <div class="row align-items-center justify-content-center" v-if="isLoading">
-                <div class="col">
-                    <p class="text-center fs-15 muted all-caps font-lato" style="letter-spacing: 2px">Loading Packages Data</p>
-                </div>
-            </div>
+            <box-loading-component v-if="isLoading"></box-loading-component>
             <div class="row" v-if="!dataLoaded">
                 <div class="col">
                     <div v-if="!isLoading" class="btn btn-sm btn-block p-t-10 p-b-10 p-r-35 p-l-35 btn-primary b-rad-none p-r-30" @click="fetchCompany">Click here to load Package Data</div>