second variant of content loader

ui/header/ColorModeToggler.tsx

@@ -22,8 +22,7 @@ import styles from './ColorModeToggler.module.css';
 export interface ColorModeTogglerProps
   extends Omit<UseCheckboxProps, 'isIndeterminate'>,
   Omit<HTMLChakraProps<'label'>, keyof UseCheckboxProps>,
-  ThemingProps<'Switch'> {
-}
+  ThemingProps<'Switch'> {}
 
 const ColorModeToggler = forwardRef<ColorModeTogglerProps, 'input'>((props, ref) => {
   const ownProps = omitThemingProps(props);

ui/pages/ApiKeys.tsx

-import { Box, Button, HStack, Link, Text, Skeleton, useDisclosure } from '@chakra-ui/react';
+import { Box, Button, HStack, Link, Text, useDisclosure } from '@chakra-ui/react';
 import { useQuery } from '@tanstack/react-query';
 import React, { useCallback, useState } from 'react';
 
@@ -10,8 +10,8 @@ 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;
 
@@ -56,10 +56,7 @@ const ApiKeysPage: React.FC = () => {
   const content = (() => {
     if (isLoading || isError) {
       return (
-        <>
-          <SkeletonTable columns={ [ '100%', '108px' ] }/>
-          <Skeleton height="44px" width="156px" marginTop={ 8 }/>
-        </>
+        <ContentLoader/>
       );
     }
 

ui/shared/ContentLoader.tsx

+import { Box, Text, useColorModeValue } from '@chakra-ui/react';
+import { keyframes } from '@chakra-ui/system';
+import React from 'react';
+
+const fade = keyframes`
+    0% { left: 0%; transform: translateX(-1%); }
+    100% { left: '100%'; transform: translateX(-99%); }
+`;
+
+const ContentLoader = () => {
+  return (
+    <Box>
+      <Box
+        width="100%"
+        height="6px"
+        position="relative"
+        _after={{
+          content: `" "`,
+          position: 'absolute',
+          width: '96px',
+          height: '6px',
+          animation: `${ fade } 0.6s ease-in-out infinite alternate`,
+          left: '100%',
+          top: 0,
+          backgroundColor: useColorModeValue('blackAlpha.700', 'whiteAlpha.700'),
+          borderRadius: 'full',
+        }}
+      />
+      <Text mt={ 6 } variant="secondary">Loading data, please wait... </Text>
+    </Box>
+  );
+};
+
+export default ContentLoader;