remove skeleton animations (#2505)

* remove skeleton animations test

* eslint add Skeleton

* eslint-fix

eslint.config.mjs

@@ -27,7 +27,7 @@ const RESTRICTED_MODULES = {
     { name: 'playwright/TestApp', message: 'Please use render() fixture from test() function of playwright/lib module' },
     {
       name: '@chakra-ui/react',
-      importNames: [ 'Popover', 'Menu', 'PinInput', 'useToast' ],
+      importNames: [ 'Popover', 'Menu', 'PinInput', 'useToast', 'Skeleton' ],
       message: 'Please use corresponding component or hook from ui/shared/chakra component instead',
     },
     {

theme/components/Skeleton.ts

@@ -1,3 +1,4 @@
+// eslint-disable-next-line no-restricted-imports
 import { Skeleton as SkeletonComponent } from '@chakra-ui/react';
 import {
   defineStyle,

ui/address/AddressCsvExportLink.tsx

@@ -1,4 +1,4 @@
-import { chakra, Tooltip, Hide, Skeleton, Flex } from '@chakra-ui/react';
+import { chakra, Tooltip, Hide, Flex } from '@chakra-ui/react';
 import React from 'react';
 
 import type { CsvExportParams } from 'types/client/address';
@@ -8,6 +8,7 @@ import { route } from 'nextjs-routes';
 import config from 'configs/app';
 import useIsInitialLoading from 'lib/hooks/useIsInitialLoading';
 import useIsMobile from 'lib/hooks/useIsMobile';
+import Skeleton from 'ui/shared/chakra/Skeleton';
 import IconSvg from 'ui/shared/IconSvg';
 import LinkInternal from 'ui/shared/links/LinkInternal';
 

ui/address/accountHistory/AddressAccountHistoryListItem.tsx

@@ -1,8 +1,9 @@
-import { Box, Flex, Skeleton, Text } from '@chakra-ui/react';
+import { Box, Flex, Text } from '@chakra-ui/react';
 import React, { useMemo } from 'react';
 
 import type { NovesResponseData } from 'types/api/noves';
 
+import Skeleton from 'ui/shared/chakra/Skeleton';
 import IconSvg from 'ui/shared/IconSvg';
 import LinkInternal from 'ui/shared/links/LinkInternal';
 import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';

ui/address/accountHistory/AddressAccountHistoryTableItem.tsx

@@ -1,8 +1,9 @@
-import { Td, Tr, Skeleton, Box } from '@chakra-ui/react';
+import { Td, Tr, Box } from '@chakra-ui/react';
 import React, { useMemo } from 'react';
 
 import type { NovesResponseData } from 'types/api/noves';
 
+import Skeleton from 'ui/shared/chakra/Skeleton';
 import IconSvg from 'ui/shared/IconSvg';
 import LinkInternal from 'ui/shared/links/LinkInternal';
 import NovesFromTo from 'ui/shared/Noves/NovesFromTo';

ui/address/blocksValidated/AddressBlocksValidatedListItem.tsx

@@ -1,4 +1,4 @@
-import { Text, Flex, Skeleton } from '@chakra-ui/react';
+import { Text, Flex } from '@chakra-ui/react';
 import BigNumber from 'bignumber.js';
 import React from 'react';
 
@@ -8,6 +8,7 @@ import config from 'configs/app';
 import getBlockTotalReward from 'lib/block/getBlockTotalReward';
 import { currencyUnits } from 'lib/units';
 import BlockGasUsed from 'ui/shared/block/BlockGasUsed';
+import Skeleton from 'ui/shared/chakra/Skeleton';
 import BlockEntity from 'ui/shared/entities/block/BlockEntity';
 import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
 import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';

ui/address/blocksValidated/AddressBlocksValidatedTableItem.tsx

@@ -1,4 +1,4 @@
-import { Td, Tr, Flex, Skeleton } from '@chakra-ui/react';
+import { Td, Tr, Flex } from '@chakra-ui/react';
 import BigNumber from 'bignumber.js';
 import React from 'react';
 
@@ -7,6 +7,7 @@ import type { Block } from 'types/api/block';
 import config from 'configs/app';
 import getBlockTotalReward from 'lib/block/getBlockTotalReward';
 import BlockGasUsed from 'ui/shared/block/BlockGasUsed';
+import Skeleton from 'ui/shared/chakra/Skeleton';
 import BlockEntity from 'ui/shared/entities/block/BlockEntity';
 import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
 

ui/address/coinBalance/AddressCoinBalanceListItem.tsx

@@ -1,11 +1,12 @@
-import { Text, Stat, StatHelpText, StatArrow, Flex, Skeleton } from '@chakra-ui/react';
+import { Text, Stat, StatHelpText, StatArrow, Flex } from '@chakra-ui/react';
 import BigNumber from 'bignumber.js';
 import React from 'react';
 
 import type { AddressCoinBalanceHistoryItem } from 'types/api/address';
 
 import { WEI, ZERO } from 'lib/consts';
 import { currencyUnits } from 'lib/units';
+import Skeleton from 'ui/shared/chakra/Skeleton';
 import BlockEntity from 'ui/shared/entities/block/BlockEntity';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
 import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';

ui/address/coinBalance/AddressCoinBalanceTableItem.tsx

@@ -1,10 +1,11 @@
-import { Td, Tr, Text, Stat, StatHelpText, StatArrow, Skeleton } from '@chakra-ui/react';
+import { Td, Tr, Text, Stat, StatHelpText, StatArrow } from '@chakra-ui/react';
 import BigNumber from 'bignumber.js';
 import React from 'react';
 
 import type { AddressCoinBalanceHistoryItem } from 'types/api/address';
 
 import { WEI, ZERO } from 'lib/consts';
+import Skeleton from 'ui/shared/chakra/Skeleton';
 import BlockEntity from 'ui/shared/entities/block/BlockEntity';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
 import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';

ui/address/contract/ContractCodeIdes.tsx

@@ -6,14 +6,14 @@ import {
   PopoverBody,
   PopoverContent,
   Image,
-  Skeleton,
   useDisclosure,
   useColorModeValue,
 } from '@chakra-ui/react';
 import React from 'react';
 
 import config from 'configs/app';
 import Popover from 'ui/shared/chakra/Popover';
+import Skeleton from 'ui/shared/chakra/Skeleton';
 import IconSvg from 'ui/shared/IconSvg';
 import LinkExternal from 'ui/shared/links/LinkExternal';
 

ui/address/contract/ContractDetailsVerificationButton.tsx

@@ -1,8 +1,10 @@
-import { Button, Skeleton } from '@chakra-ui/react';
+import { Button } from '@chakra-ui/react';
 import React from 'react';
 
 import { route } from 'nextjs-routes';
 
+import Skeleton from 'ui/shared/chakra/Skeleton';
+
 interface Props {
   isLoading: boolean;
   addressHash: string;

ui/address/contract/ContractExternalLibraries.tsx

@@ -10,7 +10,6 @@ import {
   PopoverBody,
   PopoverContent,
   PopoverTrigger,
-  Skeleton,
   StackDivider,
   useDisclosure,
   VStack,
@@ -22,6 +21,7 @@ import type { SmartContractExternalLibrary } from 'types/api/contract';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import { apos } from 'lib/html-entities';
 import Popover from 'ui/shared/chakra/Popover';
+import Skeleton from 'ui/shared/chakra/Skeleton';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import IconSvg from 'ui/shared/IconSvg';
 

ui/address/contract/ContractSourceAddressSelector.tsx

@@ -1,8 +1,9 @@
-import { chakra, Flex, Skeleton } from '@chakra-ui/react';
+import { chakra, Flex } from '@chakra-ui/react';
 import React from 'react';
 
 import { route } from 'nextjs-routes';
 
+import Skeleton from 'ui/shared/chakra/Skeleton';
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import LinkNewTab from 'ui/shared/links/LinkNewTab';

ui/address/contract/ContractSourceCode.tsx

@@ -1,11 +1,12 @@
-import { Flex, Skeleton, Text, Tooltip } from '@chakra-ui/react';
+import { Flex, Text, Tooltip } from '@chakra-ui/react';
 import React from 'react';
 
 import type { SmartContract } from 'types/api/contract';
 
 import { route } from 'nextjs-routes';
 
 import formatLanguageName from 'lib/contracts/formatLanguageName';
+import Skeleton from 'ui/shared/chakra/Skeleton';
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
 import LinkInternal from 'ui/shared/links/LinkInternal';
 import CodeEditor from 'ui/shared/monaco/CodeEditor';

ui/address/contract/alerts/ContractDetailsAlerts.tsx

@@ -1,4 +1,4 @@
-import { chakra, Alert, Box, Flex, Skeleton } from '@chakra-ui/react';
+import { chakra, Alert, Box, Flex } from '@chakra-ui/react';
 import type { Channel } from 'phoenix';
 import React from 'react';
 
@@ -8,6 +8,7 @@ import type { SmartContract } from 'types/api/contract';
 import { route } from 'nextjs-routes';
 
 import useSocketMessage from 'lib/socket/useSocketMessage';
+import Skeleton from 'ui/shared/chakra/Skeleton';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import LinkExternal from 'ui/shared/links/LinkExternal';
 import LinkInternal from 'ui/shared/links/LinkInternal';

ui/address/contract/info/ContractDetailsInfoItem.tsx

@@ -1,6 +1,7 @@
-import { chakra, useColorModeValue, Flex, GridItem, Skeleton } from '@chakra-ui/react';
+import { chakra, useColorModeValue, Flex, GridItem } from '@chakra-ui/react';
 import React from 'react';
 
+import Skeleton from 'ui/shared/chakra/Skeleton';
 import Hint from 'ui/shared/Hint';
 
 interface Props {

ui/address/contract/methods/ContractConnectWallet.tsx

@@ -1,9 +1,10 @@
-import { Alert, Button, Flex, Skeleton } from '@chakra-ui/react';
+import { Alert, Button, Flex } from '@chakra-ui/react';
 import React from 'react';
 
 import config from 'configs/app';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import useWeb3Wallet from 'lib/web3/useWallet';
+import Skeleton from 'ui/shared/chakra/Skeleton';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 
 interface Props {

ui/address/contract/methods/ContractCustomAbiAlert.tsx

@@ -1,6 +1,7 @@
-import { Alert, Skeleton } from '@chakra-ui/react';
+import { Alert } from '@chakra-ui/react';
 import React from 'react';
 
+import Skeleton from 'ui/shared/chakra/Skeleton';
 interface Props {
   isLoading?: boolean;
 }

ui/address/contract/methods/ContractMethodsCustom.tsx

@@ -1,4 +1,4 @@
-import { Button, Flex, Skeleton, useDisclosure } from '@chakra-ui/react';
+import { Button, Flex, useDisclosure } from '@chakra-ui/react';
 import { useQueryClient } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
 import React from 'react';
@@ -8,6 +8,7 @@ import type { SmartContract } from 'types/api/contract';
 import useApiQuery, { getResourceKey } from 'lib/api/useApiQuery';
 import getQueryParamString from 'lib/router/getQueryParamString';
 import CustomAbiModal from 'ui/customAbi/CustomAbiModal/CustomAbiModal';
+import Skeleton from 'ui/shared/chakra/Skeleton';
 import RawDataSnippet from 'ui/shared/RawDataSnippet';
 import AuthGuard from 'ui/snippets/auth/AuthGuard';
 import useIsAuth from 'ui/snippets/auth/useIsAuth';

ui/address/details/AddressCounterItem.tsx

@@ -1,4 +1,3 @@
-import { Skeleton } from '@chakra-ui/react';
 import type { UseQueryResult } from '@tanstack/react-query';
 import BigNumber from 'bignumber.js';
 import React from 'react';
@@ -8,6 +7,7 @@ import type { AddressCounters } from 'types/api/address';
 import { route } from 'nextjs-routes';
 
 import type { ResourceError } from 'lib/api/resources';
+import Skeleton from 'ui/shared/chakra/Skeleton';
 import LinkInternal from 'ui/shared/links/LinkInternal';
 
 interface Props {

ui/address/details/AddressNameInfo.tsx

@@ -1,8 +1,8 @@
-import { Skeleton } from '@chakra-ui/react';
 import React from 'react';
 
 import type { Address } from 'types/api/address';
 
+import Skeleton from 'ui/shared/chakra/Skeleton';
 import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem';
 import TokenEntity from 'ui/shared/entities/token/TokenEntity';
 

ui/address/details/AddressNetWorth.tsx

@@ -1,11 +1,12 @@
-import { Skeleton, Text, Flex } from '@chakra-ui/react';
+import { Text, Flex } from '@chakra-ui/react';
 import React from 'react';
 
 import type { Address } from 'types/api/address';
 
 import config from 'configs/app';
 import getCurrencyValue from 'lib/getCurrencyValue';
 import * as mixpanel from 'lib/mixpanel/index';
+import Skeleton from 'ui/shared/chakra/Skeleton';
 import TextSeparator from 'ui/shared/TextSeparator';
 
 import { getTokensTotalInfo } from '../utils/tokenUtils';

ui/address/details/AddressQrCode.tsx

@@ -12,7 +12,6 @@ import {
   useDisclosure,
   Tooltip,
   IconButton,
-  Skeleton,
 } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import QRCode from 'qrcode';
@@ -23,6 +22,7 @@ import type { Address as AddressType } from 'types/api/address';
 import getPageType from 'lib/mixpanel/getPageType';
 import * as mixpanel from 'lib/mixpanel/index';
 import { useRollbar } from 'lib/rollbar';
+import Skeleton from 'ui/shared/chakra/Skeleton';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import IconSvg from 'ui/shared/IconSvg';
 

ui/address/details/AddressSaveOnGas.tsx

@@ -1,9 +1,10 @@
-import { Image, Skeleton } from '@chakra-ui/react';
+import { Image } from '@chakra-ui/react';
 import { useQuery } from '@tanstack/react-query';
 import React from 'react';
 import * as v from 'valibot';
 
 import config from 'configs/app';
+import Skeleton from 'ui/shared/chakra/Skeleton';
 import LinkExternal from 'ui/shared/links/LinkExternal';
 import TextSeparator from 'ui/shared/TextSeparator';
 

ui/address/ensDomains/AddressEnsDomains.tsx

@@ -8,7 +8,6 @@ import {
   PopoverContent,
   PopoverTrigger,
   Show,
-  Skeleton,
   useDisclosure,
   chakra,
 } from '@chakra-ui/react';
@@ -23,6 +22,7 @@ import { route } from 'nextjs-routes';
 import type { ResourceError } from 'lib/api/resources';
 import dayjs from 'lib/date/dayjs';
 import Popover from 'ui/shared/chakra/Popover';
+import Skeleton from 'ui/shared/chakra/Skeleton';
 import EnsEntity from 'ui/shared/entities/ens/EnsEntity';
 import IconSvg from 'ui/shared/IconSvg';
 import LinkInternal from 'ui/shared/links/LinkInternal';

ui/address/epochRewards/AddressEpochRewardsListItem.tsx

@@ -1,9 +1,9 @@
-import { Skeleton } from '@chakra-ui/react';
 import React from 'react';
 
 import type { AddressEpochRewardsItem } from 'types/api/address';
 
 import getCurrencyValue from 'lib/getCurrencyValue';
+import Skeleton from 'ui/shared/chakra/Skeleton';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import BlockEntity from 'ui/shared/entities/block/BlockEntity';
 import TokenEntity from 'ui/shared/entities/token/TokenEntity';

ui/address/epochRewards/AddressEpochRewardsTableItem.tsx

@@ -1,9 +1,10 @@
-import { Flex, Td, Tr, Text, Skeleton } from '@chakra-ui/react';
+import { Flex, Td, Tr, Text } from '@chakra-ui/react';
 import React from 'react';
 
 import type { AddressEpochRewardsItem } from 'types/api/address';
 
 import getCurrencyValue from 'lib/getCurrencyValue';
+import Skeleton from 'ui/shared/chakra/Skeleton';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import BlockEntity from 'ui/shared/entities/block/BlockEntity';
 import TokenEntity from 'ui/shared/entities/token/TokenEntity';

ui/address/internals/AddressIntTxsListItem.tsx

@@ -1,4 +1,4 @@
-import { Flex, HStack, Skeleton } from '@chakra-ui/react';
+import { Flex, HStack } from '@chakra-ui/react';
 import BigNumber from 'bignumber.js';
 import React from 'react';
 
@@ -7,6 +7,7 @@ import type { InternalTransaction } from 'types/api/internalTransaction';
 import config from 'configs/app';
 import { currencyUnits } from 'lib/units';
 import AddressFromTo from 'ui/shared/address/AddressFromTo';
+import Skeleton from 'ui/shared/chakra/Skeleton';
 import Tag from 'ui/shared/chakra/Tag';
 import BlockEntity from 'ui/shared/entities/block/BlockEntity';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';

ui/address/internals/AddressIntTxsTableItem.tsx

@@ -1,11 +1,12 @@
-import { Tr, Td, Box, Flex, Skeleton } from '@chakra-ui/react';
+import { Tr, Td, Box, Flex } from '@chakra-ui/react';
 import BigNumber from 'bignumber.js';
 import React from 'react';
 
 import type { InternalTransaction } from 'types/api/internalTransaction';
 
 import config from 'configs/app';
 import AddressFromTo from 'ui/shared/address/AddressFromTo';
+import Skeleton from 'ui/shared/chakra/Skeleton';
 import Tag from 'ui/shared/chakra/Tag';
 import BlockEntity from 'ui/shared/entities/block/BlockEntity';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';

ui/address/mud/AddressMudTablesListItem.tsx

@@ -1,11 +1,12 @@
-import { Divider, Text, Skeleton, useBoolean, Flex, Link, VStack, chakra, Box, Grid, GridItem } from '@chakra-ui/react';
+import { Divider, Text, useBoolean, Flex, Link, VStack, chakra, Box, Grid, GridItem } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import React from 'react';
 
 import type { AddressMudTableItem } from 'types/api/address';
 
 import { route } from 'nextjs-routes';
 
+import Skeleton from 'ui/shared/chakra/Skeleton';
 import Tag from 'ui/shared/chakra/Tag';
 import HashStringShorten from 'ui/shared/HashStringShorten';
 import IconSvg from 'ui/shared/IconSvg';

ui/address/mud/AddressMudTablesTableItem.tsx

@@ -1,11 +1,12 @@
-import { Td, Tr, Text, Skeleton, useBoolean, Link, Table, VStack, chakra } from '@chakra-ui/react';
+import { Td, Tr, Text, useBoolean, Link, Table, VStack, chakra } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import React from 'react';
 
 import type { AddressMudTableItem } from 'types/api/address';
 
 import { route } from 'nextjs-routes';
 
+import Skeleton from 'ui/shared/chakra/Skeleton';
 import Tag from 'ui/shared/chakra/Tag';
 import IconSvg from 'ui/shared/IconSvg';
 import LinkInternal from 'ui/shared/links/LinkInternal';