From a264f372d32d85944769be4d7c32685b9438d3aa Mon Sep 17 00:00:00 2001
From: andrewwallacespeckle
 <139135120+andrewwallacespeckle@users.noreply.github.com>
Date: Mon, 18 Nov 2024 11:12:16 +0000
Subject: [PATCH] Add loading state to Access Tokens. Update Table loading
 state (#3501)

---
 .../user/developer/AccessTokens/AccessTokens.vue         | 9 ++++++---
 packages/ui-components/src/components/layout/Table.vue   | 9 +++------
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/frontend-2/components/settings/user/developer/AccessTokens/AccessTokens.vue b/packages/frontend-2/components/settings/user/developer/AccessTokens/AccessTokens.vue
index e7b8346fb5..2007543009 100644
--- a/packages/frontend-2/components/settings/user/developer/AccessTokens/AccessTokens.vue
+++ b/packages/frontend-2/components/settings/user/developer/AccessTokens/AccessTokens.vue
@@ -46,6 +46,7 @@
         { id: 'actions', header: '', classes: 'col-span-1 flex justify-end' }
       ]"
       :items="tokens"
+      :loading="loading"
     >
       <template #name="{ item }">
         {{ item.name }}
@@ -107,9 +108,11 @@ const emit = defineEmits<{
   (e: 'delete', item: TokenItem): void
 }>()
 
-const { result: tokensResult, refetch: refetchTokens } = useQuery(
-  developerSettingsAccessTokensQuery
-)
+const {
+  result: tokensResult,
+  refetch: refetchTokens,
+  loading
+} = useQuery(developerSettingsAccessTokensQuery)
 
 const tokenSuccess = ref('')
 const showCreateTokenDialog = ref(false)
diff --git a/packages/ui-components/src/components/layout/Table.vue b/packages/ui-components/src/components/layout/Table.vue
index 70437d133a..a0746285e1 100644
--- a/packages/ui-components/src/components/layout/Table.vue
+++ b/packages/ui-components/src/components/layout/Table.vue
@@ -19,13 +19,10 @@
       >
         <div
           v-if="loading || !items"
+          class="flex items-center justify-center py-3"
           tabindex="0"
-          :style="{ paddingRight: paddingRightStyle }"
-          :class="rowsWrapperClasses"
         >
-          <div :class="getClasses(undefined, 0, { noPadding: true })" tabindex="0">
-            <CommonLoadingBar loading />
-          </div>
+          <CommonLoadingIcon />
         </div>
         <template v-else-if="items?.length">
           <div
@@ -85,7 +82,7 @@
 import { noop, isString } from 'lodash'
 import { computed } from 'vue'
 import type { PropAnyComponent } from '~~/src/helpers/common/components'
-import { CommonLoadingBar, FormButton } from '~~/src/lib'
+import { CommonLoadingIcon, FormButton } from '~~/src/lib'
 import { directive as vTippy } from 'vue-tippy'
 
 export type TableColumn<I> = {