Add loading state to Access Tokens. Update Table loading state (#3501)

specklesystems · Nov 18, 2024 · a264f37 · a264f37
1 parent 8570ecb
commit a264f37
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 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
@@ -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
@@ -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> = {