skeleton for api keys page

theme/components/Skeleton.ts

+import { keyframes } from '@chakra-ui/system';
+import type { SystemStyleFunction } from '@chakra-ui/theme-tools';
+import { getColor, mode } from '@chakra-ui/theme-tools';
+
+const fade = (startColor: string, endColor: string) =>
+  keyframes({
+    from: { borderColor: startColor, background: startColor },
+    to: { borderColor: endColor, background: endColor },
+  });
+
+const baseStyle: SystemStyleFunction = (props) => {
+  const defaultStartColor = mode('blackAlpha.50', 'whiteAlpha.200')(props);
+  const defaultEndColor = mode('blackAlpha.200', 'whiteAlpha.300')(props);
+
+  const {
+    startColor = defaultStartColor,
+    endColor = defaultEndColor,
+    speed,
+    theme,
+  } = props;
+
+  const start = getColor(theme, startColor);
+  const end = getColor(theme, endColor);
+
+  return {
+    opacity: 0.7,
+    borderRadius: '2px',
+    borderColor: start,
+    background: end,
+    animation: `${ speed }s linear infinite alternate ${ fade(start, end) }`,
+  };
+};
+
+const Skeleton = {
+  baseStyle,
+};
+
+export default Skeleton;

theme/components/index.ts

@@ -7,6 +7,7 @@ import Link from './Link';
 import Modal from './Modal';
 import Popover from './Popover';
 import Radio from './Radio';
+import Skeleton from './Skeleton';
 import Table from './Table';
 import Tabs from './Tabs';
 import Tag from './Tag';
@@ -24,6 +25,7 @@ const components = {
   Modal,
   Popover,
   Radio,
+  Skeleton,
   Tabs,
   Table,
   Tag,

ui/apiKey/ApiKeyTable/ApiKeyTableItem.tsx

@@ -18,7 +18,7 @@ interface Props {
   onDeleteClick: (item: ApiKey) => void;
 }
 
-const WatchlistTableItem = ({ item, onEditClick, onDeleteClick }: Props) => {
+const ApiKeyTableItem = ({ item, onEditClick, onDeleteClick }: Props) => {
 
   const onItemEditClick = useCallback(() => {
     return onEditClick(item);
@@ -47,4 +47,4 @@ const WatchlistTableItem = ({ item, onEditClick, onDeleteClick }: Props) => {
   );
 };
 
-export default WatchlistTableItem;
+export default ApiKeyTableItem;

ui/pages/ApiKeys.tsx

-import { Box, Button, HStack, Link, Text, Spinner, 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';
 
@@ -10,6 +10,7 @@ import ApiKeyTable from 'ui/apiKey/ApiKeyTable/ApiKeyTable';
 import DeleteApiKeyModal from 'ui/apiKey/DeleteApiKeyModal';
 import AccountPageHeader from 'ui/shared/AccountPageHeader';
 import Page from 'ui/shared/Page/Page';
+import SkeletonTable from 'ui/shared/SkeletonTable';
 
 const DATA_LIMIT = 3;
 
@@ -50,20 +51,28 @@ const ApiKeysPage: React.FC = () => {
 
   const content = (() => {
     if (isLoading || isError) {
-      return <Spinner/>;
+      return (
+        <>
+          <Skeleton height={ 6 } width="250px" borderRadius="full" marginBottom={ 12 }/>
+          <SkeletonTable columns={ [ 'auto', '108px' ] }/>
+          <Skeleton height="44px" width="156px" borderRadius="base" marginTop={ 8 }/>
+        </>
+      );
     }
 
     const canAdd = data.length < DATA_LIMIT;
     return (
       <>
-        { data.length > 0 && (
-          <ApiKeyTable
-            data={ data }
-            onDeleteClick={ onDeleteClick }
-            onEditClick={ onEditClick }
-            limit={ DATA_LIMIT }
-          />
-        ) }
+        <Text marginBottom={ 12 }>
+          Create API keys to use for your RPC and EthRPC API requests. For more information, see { space }
+          <Link href="#">“How to use a Blockscout API key”</Link>.
+        </Text>
+        <ApiKeyTable
+          data={ data }
+          onDeleteClick={ onDeleteClick }
+          onEditClick={ onEditClick }
+          limit={ DATA_LIMIT }
+        />
         <HStack marginTop={ 8 } spacing={ 5 }>
           <Button
             variant="primary"
@@ -87,10 +96,6 @@ const ApiKeysPage: React.FC = () => {
     <Page>
       <Box h="100%">
         <AccountPageHeader text="API keys"/>
-        <Text marginBottom={ 12 }>
-          Create API keys to use for your RPC and EthRPC API requests. For more information, see { space }
-          <Link href="#">“How to use a Blockscout API key”</Link>.
-        </Text>
         { content }
       </Box>
       <ApiKeyModal { ...apiKeyModalProps } onClose={ onApiKeyModalClose } data={ apiKeyModalData }/>

ui/shared/SkeletonTable.tsx

+import { HStack, Skeleton } from '@chakra-ui/react';
+import React from 'react';
+
+interface Props {
+  columns: Array<string>;
+}
+
+const SkeletonTable = ({ columns }: Props) => {
+  return (
+    <div>
+      <Skeleton height={ 10 } width="100%" borderTopLeftRadius="base" borderTopRightRadius="base"/>
+      { Array.from(Array(5)).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 }
+              borderRadius="full"
+            />
+          )) }
+        </HStack>
+      )) }
+    </div>
+  );
+};
+
+export default React.memo(SkeletonTable);