skeleton for private tags page

ui/pages/ApiKeys.tsx

@@ -54,7 +54,7 @@ const ApiKeysPage: React.FC = () => {
       return (
         <>
           <Skeleton height={ 6 } width="250px" borderRadius="full" marginBottom={ 12 }/>
-          <SkeletonTable columns={ [ 'auto', '108px' ] }/>
+          <SkeletonTable columns={ [ '100%', '108px' ] }/>
           <Skeleton height="44px" width="156px" borderRadius="base" marginTop={ 8 }/>
         </>
       );

ui/privateTags/PrivateAddressTags.tsx

-import { Box, Button, Spinner, Text, useDisclosure } from '@chakra-ui/react';
+import { Box, Button, Text, Skeleton, useDisclosure } from '@chakra-ui/react';
 import React, { useCallback, useState } from 'react';
 
 import type { AddressTags, AddressTag } from 'types/api/account';
 
+import SkeletonTable from 'ui/shared/SkeletonTable';
+
 import AddressModal from './AddressModal/AddressModal';
 import AddressTagTable from './AddressTagTable/AddressTagTable';
 import DeletePrivateTagModal from './DeletePrivateTagModal';
 
 type Props = {
-  addressTags: AddressTags;
+  addressTags?: AddressTags;
 }
 
 const PrivateAddressTags = ({ addressTags }: Props) => {
@@ -38,13 +40,22 @@ const PrivateAddressTags = ({ addressTags }: Props) => {
     deleteModalProps.onClose();
   }, [ deleteModalProps ]);
 
+  if (!addressTags) {
+    return (
+      <>
+        <Skeleton height={ 6 } width="250px" borderRadius="full" marginBottom={ 12 }/>
+        <SkeletonTable columns={ [ 'auto', '40%', '108px' ] }/>
+        <Skeleton height="44px" width="156px" borderRadius="base" marginTop={ 8 }/>
+      </>
+    );
+  }
+
   return (
     <>
       <Text marginBottom={ 12 }>
         Use private transaction tags to label any transactions of interest.
         Private tags are saved in your account and are only visible when you are logged in.
       </Text>
-      { !addressTags && <Spinner/> }
       { Boolean(addressTags?.length) && (
         <AddressTagTable
           data={ addressTags }

ui/privateTags/PrivateTransactionTags.tsx

-import { Box, Button, Text, useDisclosure } from '@chakra-ui/react';
+import { Box, Button, Skeleton, Text, useDisclosure } from '@chakra-ui/react';
 import React, { useCallback, useState } from 'react';
 
 import type { TransactionTags, TransactionTag } from 'types/api/account';
 
+import SkeletonTable from 'ui/shared/SkeletonTable';
+
 import DeletePrivateTagModal from './DeletePrivateTagModal';
 import TransactionModal from './TransactionModal/TransactionModal';
 import TransactionTagTable from './TransactionTagTable/TransactionTagTable';
 
 type Props = {
-  transactionTags: TransactionTags;
+  transactionTags?: TransactionTags;
 }
 
 const PrivateTransactionTags = ({ transactionTags }: Props) => {
@@ -38,6 +40,16 @@ const PrivateTransactionTags = ({ transactionTags }: Props) => {
     deleteModalProps.onClose();
   }, [ deleteModalProps ]);
 
+  if (!transactionTags) {
+    return (
+      <>
+        <Skeleton height={ 6 } width="250px" borderRadius="full" marginBottom={ 12 }/>
+        <SkeletonTable columns={ [ 'auto', '25%', '108px' ] }/>
+        <Skeleton height="44px" width="156px" borderRadius="base" marginTop={ 8 }/>
+      </>
+    );
+  }
+
   return (
     <>
       <Text marginBottom={ 12 }>

ui/shared/SkeletonTable.tsx

@@ -9,14 +9,14 @@ const SkeletonTable = ({ columns }: Props) => {
   return (
     <div>
       <Skeleton height={ 10 } width="100%" borderTopLeftRadius="base" borderTopRightRadius="base"/>
-      { Array.from(Array(5)).map((item, index) => (
+      { Array.from(Array(4)).map((item, index) => (
         <HStack key={ index } spacing={ 6 } marginTop={ 8 }>
           { columns.map((width, index) => (
             <Skeleton
               key={ index }
               height={ 5 }
-              flexBasis={ width === 'auto' ? '100%' : width }
-              flexShrink={ width === 'auto' ? 'initial' : 0 }
+              width={ width }
+              flexShrink={ width.includes('%') ? 'initial' : 0 }
               borderRadius="full"
             />
           )) }