use skeleton and not content loader

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

@@ -3,7 +3,6 @@ import type { NextPage } from 'next';
 import Head from 'next/head';
 import React, { useCallback, useState } from 'react';
 
-import delay from 'lib/delay';
 import PrivateTags from 'ui/pages/PrivateTags';
 
 const TABS = [ 'address', 'transaction' ];
@@ -20,10 +19,7 @@ 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 Promise.all([
-      fetch('/api/account/private-tags/address'),
-      delay(5000),
-    ]);
+    const response = await fetch('/api/account/private-tags/address');
     if (!response.ok) {
       throw new Error('Network response was not ok');
     }
@@ -31,10 +27,7 @@ const PrivateTagsPage: NextPage = () => {
   });
 
   useQuery([ 'transaction' ], async() => {
-    const [ response ] = await Promise.all([
-      fetch('/api/account/private-tags/transaction'),
-      delay(5000),
-    ]);
+    const response = await fetch('/api/account/private-tags/transaction');
     if (!response.ok) {
       throw new Error('Network response was not ok');
     }

ui/pages/ApiKeys.tsx

-import { Box, Button, HStack, Link, Text, useDisclosure } from '@chakra-ui/react';
+import { Box, Button, HStack, Link, Text, Skeleton, useDisclosure } from '@chakra-ui/react';
 import { useQuery } from '@tanstack/react-query';
 import React, { useCallback, useState } from 'react';
 
 import type { ApiKey, ApiKeys } from 'types/api/account';
 
-import delay from 'lib/delay';
 import { space } from 'lib/html-entities';
 import ApiKeyModal from 'ui/apiKey/ApiKeyModal/ApiKeyModal';
 import ApiKeyTable from 'ui/apiKey/ApiKeyTable/ApiKeyTable';
 import DeleteApiKeyModal from 'ui/apiKey/DeleteApiKeyModal';
 import AccountPageHeader from 'ui/shared/AccountPageHeader';
-import ContentLoader from 'ui/shared/ContentLoader';
 import Page from 'ui/shared/Page/Page';
+import SkeletonTable from 'ui/shared/SkeletonTable';
 
 const DATA_LIMIT = 3;
 
@@ -23,10 +22,7 @@ const ApiKeysPage: React.FC = () => {
   const [ deleteModalData, setDeleteModalData ] = useState<ApiKey>();
 
   const { data, isLoading, isError } = useQuery<unknown, unknown, ApiKeys>([ 'api-keys' ], async() => {
-    const [ response ] = await Promise.all([
-      fetch('/api/account/api-keys'),
-      delay(5000),
-    ]);
+    const response = await fetch('/api/account/api-keys');
     if (!response.ok) {
       throw new Error('Network response was not ok');
     }
@@ -56,7 +52,10 @@ const ApiKeysPage: React.FC = () => {
   const content = (() => {
     if (isLoading || isError) {
       return (
-        <ContentLoader/>
+        <>
+          <SkeletonTable columns={ [ '100%', '108px' ] }/>
+          <Skeleton height="44px" width="156px" marginTop={ 8 }/>
+        </>
       );
     }