skeleton example and custom abi form extends

ui/customAbi/CustomAbiModal/CustomAbiForm.tsx

@@ -128,6 +128,7 @@ const CustomAbiForm: React.FC<Props> = ({ data, onClose, setAlertVisible }) => {
         <Textarea
           { ...field }
           size="lg"
+          minH="300px"
           isInvalid={ Boolean(errors.abi) }
         />
         <FormLabel>{ getPlaceholderWithError(`Custom ABI [{...}] (JSON format)`, errors.abi?.message) }</FormLabel>

ui/privateTags/PrivateAddressTags.tsx

-import { Box, Button, Skeleton, useDisclosure } from '@chakra-ui/react';
+import { Box, Button, Flex, Skeleton, SkeletonCircle, useDisclosure } from '@chakra-ui/react';
 import { useQuery } from '@tanstack/react-query';
 import React, { useCallback, useState } from 'react';
 
 import type { AddressTags, AddressTag } from 'types/api/account';
 
 import fetch from 'lib/client/fetch';
+import delay from 'lib/delay';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import AccountPageDescription from 'ui/shared/AccountPageDescription';
-import ContentLoader from 'ui/shared/ContentLoader';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
 import SkeletonTable from 'ui/shared/SkeletonTable';
 
@@ -18,7 +18,13 @@ import DeletePrivateTagModal from './DeletePrivateTagModal';
 
 const PrivateAddressTags = () => {
   const { data: addressTagsData, isLoading, isError } =
-    useQuery<unknown, unknown, AddressTags>([ 'address-tags' ], async() => fetch('/api/account/private-tags/address'), { refetchOnMount: false });
+    useQuery<unknown, unknown, AddressTags>([ 'address-tags' ], async() => {
+      const [ result ] = await Promise.all([
+        fetch('/api/account/private-tags/address'),
+        delay(5_000),
+      ]);
+      return result;
+    }, { refetchOnMount: false });
 
   const addressModalProps = useDisclosure();
   const deleteModalProps = useDisclosure();
@@ -55,7 +61,20 @@ const PrivateAddressTags = () => {
   );
 
   if (isLoading && !addressTagsData) {
-    const loader = isMobile ? <ContentLoader/> : (
+    const loader = isMobile ? (
+      <Flex rowGap={ 3 } flexDirection="column">
+        <Flex columnGap={ 2 } w="100%" alignItems="center">
+          <SkeletonCircle size="6" flexShrink="0"/>
+          <Skeleton h={ 4 } w="100%"/>
+        </Flex>
+        <Skeleton h={ 4 } w="164px"/>
+        <Skeleton h={ 4 } w="164px"/>
+        <Flex columnGap={ 3 } alignSelf="flex-end" mt={ 7 }>
+          <SkeletonCircle size="6" flexShrink="0"/>
+          <SkeletonCircle size="6" flexShrink="0"/>
+        </Flex>
+      </Flex>
+    ) : (
       <>
         <SkeletonTable columns={ [ '60%', '40%', '108px' ] }/>
         <Skeleton height="44px" width="156px" marginTop={ 8 }/>