delay helper

lib/delay.ts

@@ -0,0 +1,3 @@
+export default function delay(time: number) {
+  return new Promise((resolve) => window.setTimeout(resolve, time));
+}

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

@@ -3,10 +3,10 @@ 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' ];
-const artificialDelay = new Promise((resolve) => window.setTimeout(resolve, 5000));
 
 const PrivateTagsPage: NextPage = () => {
   const [ activeTab, setActiveTab ] = useState(TABS[0]);
@@ -22,7 +22,7 @@ const PrivateTagsPage: NextPage = () => {
   useQuery([ 'address' ], async() => {
     const [ response ] = await Promise.all([
       fetch('/api/account/private-tags/address'),
-      artificialDelay,
+      delay(5000),
     ]);
     if (!response.ok) {
       throw new Error('Network response was not ok');
@@ -33,7 +33,7 @@ const PrivateTagsPage: NextPage = () => {
   useQuery([ 'transaction' ], async() => {
     const [ response ] = await Promise.all([
       fetch('/api/account/private-tags/transaction'),
-      artificialDelay,
+      delay(5000),
     ]);
     if (!response.ok) {
       throw new Error('Network response was not ok');

ui/pages/ApiKeys.tsx

@@ -4,6 +4,7 @@ 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';
@@ -13,7 +14,6 @@ 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();
@@ -25,7 +25,7 @@ const ApiKeysPage: React.FC = () => {
   const { data, isLoading, isError } = useQuery<unknown, unknown, ApiKeys>([ 'api-keys' ], async() => {
     const [ response ] = await Promise.all([
       fetch('/api/account/api-keys'),
-      artificialDelay,
+      delay(5000),
     ]);
     if (!response.ok) {
       throw new Error('Network response was not ok');