add delay for data fetching (for demo purposes only)

pages/[network_type]/[network_sub_type]/private-tags.tsx

@@ -6,6 +6,7 @@ import React, { useCallback, useState } from 'react';
 import PrivateTags from 'ui/pages/PrivateTags';
 
 const TABS = [ 'address', 'transaction' ];
+const artificialDelay = new Promise((resolve) => window.setTimeout(resolve, 5000));
 
 const PrivateTagsPage: NextPage = () => {
   const [ activeTab, setActiveTab ] = useState(TABS[0]);
@@ -19,7 +20,10 @@ const PrivateTagsPage: NextPage = () => {
   // FIXME: request data only for active tab and only once
   // don't refetch after tab change
   useQuery([ 'address' ], async() => {
-    const response = await fetch('/api/account/private-tags/address');
+    const [ response ] = await Promise.all([
+      fetch('/api/account/private-tags/address'),
+      artificialDelay,
+    ]);
     if (!response.ok) {
       throw new Error('Network response was not ok');
     }
@@ -27,7 +31,10 @@ const PrivateTagsPage: NextPage = () => {
   });
 
   useQuery([ 'transaction' ], async() => {
-    const response = await fetch('/api/account/private-tags/transaction');
+    const [ response ] = await Promise.all([
+      fetch('/api/account/private-tags/transaction'),
+      artificialDelay,
+    ]);
     if (!response.ok) {
       throw new Error('Network response was not ok');
     }

ui/pages/ApiKeys.tsx

@@ -13,6 +13,7 @@ import Page from 'ui/shared/Page/Page';
 import SkeletonTable from 'ui/shared/SkeletonTable';
 
 const DATA_LIMIT = 3;
+const artificialDelay = new Promise((resolve) => window.setTimeout(resolve, 5000));
 
 const ApiKeysPage: React.FC = () => {
   const apiKeyModalProps = useDisclosure();
@@ -22,7 +23,10 @@ const ApiKeysPage: React.FC = () => {
   const [ deleteModalData, setDeleteModalData ] = useState<ApiKey>();
 
   const { data, isLoading, isError } = useQuery<unknown, unknown, ApiKeys>([ 'api-keys' ], async() => {
-    const response = await fetch('/api/account/api-keys');
+    const [ response ] = await Promise.all([
+      fetch('/api/account/api-keys'),
+      artificialDelay,
+    ]);
     if (!response.ok) {
       throw new Error('Network response was not ok');
     }

ui/privateTags/PrivateAddressTags.tsx

@@ -44,7 +44,7 @@ const PrivateAddressTags = ({ addressTags }: Props) => {
     return (
       <>
         <Skeleton height={ 6 } width="250px" borderRadius="full" marginBottom={ 12 }/>
-        <SkeletonTable columns={ [ 'auto', '40%', '108px' ] }/>
+        <SkeletonTable columns={ [ '60%', '40%', '108px' ] }/>
         <Skeleton height="44px" width="156px" marginTop={ 8 }/>
       </>
     );

ui/privateTags/PrivateTransactionTags.tsx

@@ -44,7 +44,7 @@ const PrivateTransactionTags = ({ transactionTags }: Props) => {
     return (
       <>
         <Skeleton height={ 6 } width="250px" borderRadius="full" marginBottom={ 12 }/>
-        <SkeletonTable columns={ [ 'auto', '25%', '108px' ] }/>
+        <SkeletonTable columns={ [ '75%', '25%', '108px' ] }/>
         <Skeleton height="44px" width="156px" marginTop={ 8 }/>
       </>
     );