From d6226eac173940668857e7b170cfdb65b3b29898 Mon Sep 17 00:00:00 2001
From: demogorgod <ssnajeeb2020@manchester.edu>
Date: Wed, 27 Sep 2023 16:07:14 -0400
Subject: [PATCH] Add skeleton loaders on operator page

---
 apps/web/src/pages/operators/Operator.vue | 35 +++++++++++++++++++----
 apps/web/src/pages/overview/Overview.vue  |  4 +--
 2 files changed, 31 insertions(+), 8 deletions(-)

diff --git a/apps/web/src/pages/operators/Operator.vue b/apps/web/src/pages/operators/Operator.vue
index 5716336ee..bfa66db53 100644
--- a/apps/web/src/pages/operators/Operator.vue
+++ b/apps/web/src/pages/operators/Operator.vue
@@ -8,10 +8,9 @@ import useUser from '@/composables/user'
 import useOperators from '@/composables/operators'
 import { UserWithAccountsAndOperators} from '@casimir/types'
 
-
 const { exportFile } = useFiles()
 const { convertString } = useFormat()
-const { user,  } = useUser()
+const { user, loadingSessionLogin } = useUser()
 
 // Form inputs
 const selectedWallet = ref({address: '', wallet_provider: ''})
@@ -103,7 +102,7 @@ onMounted(async () => {
   }
 })
 
-const {initializeComposable, nonregisteredOperators, registeredOperators, registerOperatorWithCasimir } = useOperators()
+const {initializeComposable, nonregisteredOperators, registeredOperators, registerOperatorWithCasimir, loadingInitializeOperators } = useOperators()
 
 watch(user, async () => {
   if (user.value) {
@@ -253,15 +252,27 @@ async function submitRegisterOperatorForm() {
 <template>
   <div class="px-[60px] 800s:px-[5%] pt-[51px]">
     <div class="flex items-start gap-[20px] justify-between flex-wrap mb-[30px]">
-      <h6 class="title">
+      <h6 class="title relative">
+        <div
+          v-show="loadingSessionLogin || loadingInitializeOperators"
+          class="absolute top-0 left-0 w-full h-full z-[2] rounded-[3px] overflow-hidden"
+        >
+          <div class="skeleton_box" />
+        </div>
         Operators
       </h6>
 
       <button
-        class="flex items-center gap-[8px] export_button  hover:text-blue_3 hover:border-blue_3 h-[38px]"
+        class="flex items-center gap-[8px] export_button  hover:text-blue_3 hover:border-blue_3 h-[38px] relative"
         :disabled="!user?.accounts"
         @click="openAddOperatorModal = true"
       >
+        <div
+          v-show="loadingSessionLogin || loadingInitializeOperators"
+          class="absolute top-0 left-0 w-full h-full z-[2] rounded-[3px] overflow-hidden"
+        >
+          <div class="skeleton_box" />
+        </div>
         <vue-feather
           type="plus"
           class="icon w-[17px] h-min"
@@ -273,9 +284,15 @@ async function submitRegisterOperatorForm() {
     <div
       v-if="!user?.address"
       class="card_container w-full px-[32px] py-[31px]
-       text-grey_4 flex items-center justify-center"
+       text-grey_4 flex items-center justify-center relative"
       style="min-height: calc(100vh - 420px);"
     >
+      <div
+        v-show="loadingSessionLogin || loadingInitializeOperators"
+        class="absolute top-0 left-0 w-full h-full z-[2] rounded-[3px] overflow-hidden"
+      >
+        <div class="skeleton_box" />
+      </div>
       <div class="border rounded-[3px] border-grey_1 border-dashed p-[10%] text-center">
         <button
           class="text-primary underline"
@@ -291,6 +308,12 @@ async function submitRegisterOperatorForm() {
       class="card_container w-full px-[32px] py-[31px] text-black  whitespace-nowrap relative"
       style="min-height: calc(100vh - 320px); height: 500px;"
     >
+      <div
+        v-show="loadingSessionLogin || loadingInitializeOperators"
+        class="absolute top-0 left-0 w-full h-full z-[2] rounded-[3px] overflow-hidden"
+      >
+        <div class="skeleton_box" />
+      </div>
       <!-- Form -->
       <div
         v-if="openAddOperatorModal"
diff --git a/apps/web/src/pages/overview/Overview.vue b/apps/web/src/pages/overview/Overview.vue
index b13b18ab3..df7e27e75 100644
--- a/apps/web/src/pages/overview/Overview.vue
+++ b/apps/web/src/pages/overview/Overview.vue
@@ -8,12 +8,12 @@ import BreakdownTable from './components/BreakdownTable.vue'
 import useUser from '@/composables/user'
 import useBreakdownMetrics from '@/composables/breakdownMetrics'
 import useAnalytics from '@/composables/analytics'
-import userOperators from '@/composables/operators'
+import useOperators from '@/composables/operators'
 
 const {loadingSessionLogin} = useUser()
 const {loadingInitializeBreakdownMetrics} = useBreakdownMetrics()
 const {loadingInitializeAnalytics} = useAnalytics()
-const {loadingInitializeOperators} = userOperators()
+const {loadingInitializeOperators} = useOperators()
 </script>
 
 <template>