skeletons

ui/address/coinBalance/AddressCoinBalanceHistory.tsx

@@ -10,9 +10,11 @@ import useQueryWithPages from 'lib/hooks/useQueryWithPages';
 import ActionBar from 'ui/shared/ActionBar';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
 import Pagination from 'ui/shared/Pagination';
+import SkeletonTable from 'ui/shared/SkeletonTable';
 import { default as Thead } from 'ui/shared/TheadSticky';
 
 import AddressCoinBalanceListItem from './AddressCoinBalanceListItem';
+import AddressCoinBalanceSkeletonMobile from './AddressCoinBalanceSkeletonMobile';
 import AddressCoinBalanceTableItem from './AddressCoinBalanceTableItem';
 
 interface Props {
@@ -32,7 +34,16 @@ const AddressCoinBalanceHistory = ({ addressQuery }: Props) => {
 
   const content = (() => {
     if (query.isLoading) {
-      return <Box>loading</Box>;
+      return (
+        <>
+          <Hide below="lg">
+            <SkeletonTable columns={ [ '25%', '25%', '25%', '25%', '120px' ] }/>
+          </Hide>
+          <Show below="lg">
+            <AddressCoinBalanceSkeletonMobile/>
+          </Show>
+        </>
+      );
     }
 
     if (query.isError) {
@@ -71,7 +82,7 @@ const AddressCoinBalanceHistory = ({ addressQuery }: Props) => {
   return (
     <Box mt={ 8 }>
       { !isPaginatorHidden && (
-        <ActionBar>
+        <ActionBar mt={ -6 }>
           <Pagination ml="auto" { ...query.pagination }/>
         </ActionBar>
       ) }

ui/address/coinBalance/AddressCoinBalanceSkeletonMobile.tsx

+import { Skeleton, Flex, Box, useColorModeValue } from '@chakra-ui/react';
+import React from 'react';
+
+const AddressCoinBalanceSkeletonMobile = () => {
+  const borderColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
+
+  return (
+    <Box>
+      { Array.from(Array(2)).map((item, index) => (
+        <Flex
+          key={ index }
+          rowGap={ 3 }
+          flexDirection="column"
+          paddingY={ 6 }
+          borderTopWidth="1px"
+          borderColor={ borderColor }
+          _last={{
+            borderBottomWidth: '1px',
+          }}
+        >
+          <Flex justifyContent="space-between" w="100%" h={ 6 }>
+            <Skeleton w="170px"/>
+            <Skeleton w="120px"/>
+          </Flex>
+          <Flex h={ 6 } columnGap={ 2 }>
+            <Skeleton w="40px"/>
+            <Skeleton w="80px"/>
+          </Flex>
+          <Flex h={ 6 } columnGap={ 2 }>
+            <Skeleton w="40px"/>
+            <Skeleton w="150px"/>
+          </Flex>
+          <Flex h={ 6 } columnGap={ 2 }>
+            <Skeleton w="30px"/>
+            <Skeleton w="60px"/>
+          </Flex>
+        </Flex>
+      )) }
+    </Box>
+  );
+};
+
+export default AddressCoinBalanceSkeletonMobile;