fix: add loader for tabs

components/Card/CardInfo/Components/Transfers.tsx

@@ -1,3 +1,4 @@
+import { formatNumber } from '@astraprotocol/astra-ui'
 import clsx from 'clsx'
 import CopyButton from 'components/Button/CopyButton'
 import Typography from 'components/Typography'
@@ -62,7 +63,7 @@ const Transfers = ({ content }: { content: Content }) => {
 					</>
 				) : (
 					<>
-						<span className="padding-right-xs">{content?.transfer.value}</span>
+						<span className="padding-right-xs">{formatNumber(content?.transfer.value)}</span>
 						<Typography.LinkText href={LinkMaker.token(data.tokenAddress)}>
 							{data.tokenSymbol}
 						</Typography.LinkText>

hooks/useDelayUntilDone.ts

@@ -0,0 +1,27 @@
+import { useEffect, useState } from 'react'
+
+/**
+ *
+ * @param done
+ * @param timeout
+ * @returns
+ */
+export default function useDelayUntilDone(done: () => boolean, timeout = 5000) {
+	const [timeoutId, setTimeoutId] = useState<NodeJS.Timeout>()
+	const [isWaiting, setIsWaiting] = useState(true)
+
+	useEffect(() => {
+		if (isWaiting && !done() && !timeoutId) {
+			setTimeoutId(setTimeout(() => setIsWaiting(false), timeout))
+		}
+		if (done() && isWaiting) {
+			clearTimeout(timeoutId)
+			setIsWaiting(false)
+			setTimeoutId(undefined)
+		}
+	}, [done, timeoutId, isWaiting])
+
+	return {
+		isWaiting
+	}
+}

types/address.d.ts

@@ -53,6 +53,7 @@ interface AddressTokenTransferResponse {
 	hasNextPage: boolean
 	result: TokenTransfer[]
 	nextPagePath: string
+	pagination: Pagination
 }
 
 interface AddressTokenResponse {
@@ -100,12 +101,14 @@ interface UseContractTransactionData {
 	result: ContractTransactionData[] | []
 	hasNextPage: boolean
 	nextPagePath: string
+	loading: boolean
 }
 
 interface UseAddressTokenTransferData {
 	result: TokenTransfer[] | []
 	hasNextPage: boolean
 	nextPagePath: string
+	loading: boolean
 }
 
 interface UseAddressTokenData {
@@ -118,6 +121,7 @@ interface UseAddressInternalTransactionData {
 	result: TransactionRowProps[] | []
 	hasNextPage: boolean
 	nextPagePath: string
+	loading: boolean
 }
 
 interface UseAddressBalanceData {

types/token.d.ts

@@ -33,6 +33,7 @@ interface UseTokenTransactionHookData {
 	result: TokenTransaction[] | []
 	hasNextPage: boolean
 	nextPagePath: string
+	loading: boolean
 }
 
 interface useNftTransfer {

views/accounts/hook/useAddressInternalTransaction.ts

@@ -1,7 +1,9 @@
 import { CryptoIconNames } from '@astraprotocol/astra-ui/lib/es/components/CryptoIcon'
 import API_LIST from 'api/api_list'
 import { formatEther } from 'ethers/lib/utils'
-import { useEffect, useState } from 'react'
+import useDelayUntilDone from 'hooks/useDelayUntilDone'
+import { isEmpty } from 'lodash'
+import { useCallback, useEffect, useState } from 'react'
 import useSWR from 'swr'
 import { evmInternalTransactionType } from 'utils/evm'
 import { getEnvNumber } from 'utils/helper'
@@ -35,7 +37,13 @@ export default function useAddressInternalTransaction(
 			}
 		]
 	}
-	const { data } = useSWR<AddressInternalTransactionResponse>(_fetchCondition())
+	const { data, error } = useSWR<AddressInternalTransactionResponse>(_fetchCondition())
+
+	const isLoadedData = useCallback(() => {
+		return !isEmpty(data) || error
+	}, [data])
+
+	const { isWaiting } = useDelayUntilDone(isLoadedData)
 
 	useEffect(() => {
 		if (data && data?.result.length > 0) {
@@ -61,6 +69,7 @@ export default function useAddressInternalTransaction(
 	return {
 		result: hookData.result,
 		hasNextPage: hookData.hasNextPage,
-		nextPagePath: hookData.nextPagePath
+		nextPagePath: hookData.nextPagePath,
+		loading: isWaiting
 	}
 }

views/accounts/hook/useAddressTokenTransfer.ts

@@ -1,5 +1,7 @@
 import API_LIST from 'api/api_list'
-import { useEffect, useState } from 'react'
+import useDelayUntilDone from 'hooks/useDelayUntilDone'
+import { isEmpty } from 'lodash'
+import { useCallback, useEffect, useState } from 'react'
 import useSWR from 'swr'
 import { getEnvNumber } from 'utils/helper'
 
@@ -32,7 +34,13 @@ export default function useAddressTokenTransfers(
 			}
 		]
 	}
-	const { data } = useSWR<AddressTokenTransferResponse>(_fetchCondition())
+	const { data, error } = useSWR<AddressTokenTransferResponse>(_fetchCondition())
+
+	const isLoadedData = useCallback(() => {
+		return !isEmpty(data) || error
+	}, [data])
+
+	const { isWaiting } = useDelayUntilDone(isLoadedData)
 
 	useEffect(() => {
 		if (data?.result) {
@@ -43,6 +51,7 @@ export default function useAddressTokenTransfers(
 	return {
 		result: hookData.result,
 		hasNextPage: hookData.hasNextPage,
-		nextPagePath: hookData.nextPagePath
+		nextPagePath: hookData.nextPagePath,
+		loading: isWaiting
 	}
 }

views/accounts/hook/useAddressTransaction.ts

@@ -1,6 +1,7 @@
 import { astraToEth, ethToAstra } from '@astradefi/address-converter'
 import API_LIST from 'api/api_list'
 import { formatEther } from 'ethers/lib/utils'
+import useDelayUntilDone from 'hooks/useDelayUntilDone'
 import { isEmpty } from 'lodash'
 import { useEffect, useState } from 'react'
 import useSWR from 'swr'
@@ -25,7 +26,9 @@ export default function useAddressTransactions(address: string, page: number) {
 			}
 		]
 	}
-	const { data } = useSWR<AddressTransactionResponse>(_fetchCondition())
+	const { data, error } = useSWR<AddressTransactionResponse>(_fetchCondition())
+
+	const { isWaiting } = useDelayUntilDone(() => !isEmpty(data) || error)
 
 	const getFromAndToOfEvm = (account: string, messages: TransactionMessage[]): [string, string] => {
 		if (account && !isEmpty(messages) && messages.length > 0) {
@@ -105,6 +108,7 @@ export default function useAddressTransactions(address: string, page: number) {
 	}, [data])
 	return {
 		data: hookData.result,
-		pagination: hookData.pagination
+		pagination: hookData.pagination,
+		loading: isWaiting
 	}
 }

views/accounts/hook/useContractTransaction.ts

@@ -1,5 +1,7 @@
 import API_LIST from 'api/api_list'
-import { useEffect, useState } from 'react'
+import useDelayUntilDone from 'hooks/useDelayUntilDone'
+import { isEmpty } from 'lodash'
+import { useCallback, useEffect, useState } from 'react'
 import useSWR from 'swr'
 import { getEnvNumber } from 'utils/helper'
 
@@ -29,7 +31,13 @@ export default function useContractTransaction(address: string, params: string):
 			}
 		]
 	}
-	const { data } = useSWR<ContractTransactionResponse>(_fetchCondition())
+	const { data, error } = useSWR<AddressTokenTransferResponse>(_fetchCondition())
+
+	const isLoadedData = useCallback(() => {
+		return !isEmpty(data) || error
+	}, [data])
+
+	const { isWaiting } = useDelayUntilDone(isLoadedData)
 
 	useEffect(() => {
 		if (data?.result) {
@@ -44,6 +52,7 @@ export default function useContractTransaction(address: string, params: string):
 	return {
 		result: hookData.result,
 		hasNextPage: hookData.hasNextPage,
-		nextPagePath: hookData.nextPagePath
+		nextPagePath: hookData.nextPagePath,
+		loading: isWaiting
 	}
 }

views/accounts/tabs/AddressInternalTransactionTab/index.tsx

@@ -1,4 +1,4 @@
-import { PaginationLite } from '@astraprotocol/astra-ui'
+import { PaginationLite, RowLoader } from '@astraprotocol/astra-ui'
 import Row from 'components/Grid/Row'
 import usePaginationLite from 'hooks/usePaginationLite'
 import { isEmpty } from 'lodash'
@@ -13,7 +13,7 @@ interface Props {
 const AddressInternalTransactionTab = ({ address }: Props) => {
 	const [currentPage, setPage] = useState(1)
 	const { currentParam, makeNextPage, makePrevPage } = usePaginationLite()
-	const { hasNextPage, nextPagePath, result } = useAddressInternalTransaction(address, currentParam)
+	const { hasNextPage, nextPagePath, result, loading } = useAddressInternalTransaction(address, currentParam)
 
 	const onPagingChange = (value: number) => {
 		if (value < currentPage) {
@@ -25,6 +25,7 @@ const AddressInternalTransactionTab = ({ address }: Props) => {
 	}
 
 	const isHasData = useMemo(() => !isEmpty(result), [result])
+
 	return (
 		<div>
 			<Row style={{ justifyContent: 'space-between' }} classes="padding-xl">
@@ -35,8 +36,11 @@ const AddressInternalTransactionTab = ({ address }: Props) => {
 					</div>
 				)}
 			</Row>
-
-			<Transactions rows={result} emptyMsg="There are no internal transactions for this address." />
+			{loading ? (
+				<RowLoader row={5} />
+			) : (
+				<Transactions rows={result} emptyMsg="There are no internal transactions for this address." />
+			)}
 			<div className="flex flex-justify-end padding-right-xl margin-top-md">
 				{isHasData && (
 					<div>

views/accounts/tabs/AddressTokenTransferTab/index.tsx

@@ -1,4 +1,4 @@
-import { PaginationLite } from '@astraprotocol/astra-ui'
+import { PaginationLite, RowLoader } from '@astraprotocol/astra-ui'
 import Row from 'components/Grid/Row'
 import Empty from 'components/Typography/Empty'
 import usePaginationLite from 'hooks/usePaginationLite'
@@ -14,7 +14,7 @@ interface Props {
 const AddressTokenTransferTab = ({ address }: Props) => {
 	const [currentPage, setPage] = useState(1)
 	const { currentParam, makeNextPage, makePrevPage } = usePaginationLite()
-	const { hasNextPage, nextPagePath, result } = useAddressTokenTransfers(address, currentParam)
+	const { hasNextPage, nextPagePath, result, loading } = useAddressTokenTransfers(address, currentParam)
 	const onPagingChange = (value: number) => {
 		if (value < currentPage) {
 			makePrevPage()
@@ -38,7 +38,9 @@ const AddressTokenTransferTab = ({ address }: Props) => {
 				)}
 			</Row>
 			<div style={{ overflowY: 'auto' }}>
-				{!result || result.length == 0 ? (
+				{loading ? (
+					<RowLoader row={5} />
+				) : !result || result.length == 0 ? (
 					<Empty classes="margin-top-xl" />
 				) : (
 					<>

views/accounts/tabs/AddressTransactionTab/index.tsx

@@ -1,4 +1,4 @@
-import { Pagination } from '@astraprotocol/astra-ui'
+import { Pagination, RowLoader } from '@astraprotocol/astra-ui'
 import Row from 'components/Grid/Row'
 import Empty from 'components/Typography/Empty'
 import { isEmpty } from 'lodash'
@@ -12,7 +12,7 @@ interface Props {
 
 const AddressTransactionTab = ({ address }: Props) => {
 	const [currentPage, setPage] = useState(1)
-	const { data, pagination } = useAddressTransactions(address, currentPage)
+	const { data, pagination, loading } = useAddressTransactions(address, currentPage)
 
 	const onPagingChange = (value: number) => setPage(value)
 	const isHasData = useMemo(() => !isEmpty(data), [data])
@@ -35,7 +35,9 @@ const AddressTransactionTab = ({ address }: Props) => {
 			</Row>
 			<div style={{ overflowX: 'auto' }}>
 				<div style={{ minWidth: '950px' }}>
-					{!isHasData ? (
+					{loading ? (
+						<RowLoader row={5} />
+					) : !isHasData ? (
 						<Empty text={'There are no transactions.'} />
 					) : (
 						<>

views/accounts/tabs/ContractTransactionTab/index.tsx

@@ -1,4 +1,4 @@
-import { PaginationLite } from '@astraprotocol/astra-ui'
+import { PaginationLite, RowLoader } from '@astraprotocol/astra-ui'
 import Row from 'components/Grid/Row'
 import Empty from 'components/Typography/Empty'
 import usePaginationLite from 'hooks/usePaginationLite'
@@ -14,7 +14,7 @@ interface Props {
 const ContractTransactionTab = ({ address }: Props) => {
 	const [currentPage, setPage] = useState(1)
 	const { currentParam, makeNextPage, makePrevPage } = usePaginationLite()
-	const { hasNextPage, nextPagePath, result } = useContractTransaction(address, currentParam)
+	const { hasNextPage, nextPagePath, result, loading } = useContractTransaction(address, currentParam)
 
 	const onPagingChange = (value: number) => {
 		if (value < currentPage) {
@@ -38,7 +38,9 @@ const ContractTransactionTab = ({ address }: Props) => {
 			</Row>
 			<div style={{ overflowX: 'auto' }}>
 				<div style={{ minWidth: '700px' }}>
-					{!isHasData ? (
+					{loading ? (
+						<RowLoader row={5} />
+					) : !isHasData ? (
 						<Empty text={'There are no transactions.'} />
 					) : (
 						<>

views/tokens/hook/useTokenHolders.ts

@@ -1,4 +1,6 @@
 import API_LIST from 'api/api_list'
+import useDelayUntilDone from 'hooks/useDelayUntilDone'
+import { isEmpty } from 'lodash'
 import { useEffect, useState } from 'react'
 import useSWR from 'swr'
 import { getEnvNumber } from 'utils/helper'
@@ -16,8 +18,8 @@ export default function useTokenHolders(token: string, page: number) {
 			}
 		]
 	}
-	const { data } = useSWR<any>(_fetchCondition())
-
+	const { data, error } = useSWR<any>(_fetchCondition())
+	const { isWaiting } = useDelayUntilDone(() => !isEmpty(data) || error)
 	useEffect(() => {
 		if (data?.result) {
 			const tokens: any = data.result.map(d => ({ address: d.address, balance: d.value }))
@@ -26,6 +28,7 @@ export default function useTokenHolders(token: string, page: number) {
 	}, [data])
 	return {
 		tokens: hookData?.result,
-		hasNextPage: hookData?.hasNextPage
+		hasNextPage: hookData?.hasNextPage,
+		loading: isWaiting
 	}
 }

views/tokens/hook/useTokenTransactions.ts

@@ -1,4 +1,6 @@
 import API_LIST from 'api/api_list'
+import useDelayUntilDone from 'hooks/useDelayUntilDone'
+import { isEmpty } from 'lodash'
 import { useEffect, useState } from 'react'
 import useSWR from 'swr'
 import { ZERO_ADDRESS } from 'utils/constants'
@@ -30,7 +32,9 @@ export default function useTokenTransactions(token: string, params: string | und
 			}
 		]
 	}
-	const { data } = useSWR<TokenTransactionResponse>(_fetchCondition())
+	const { data, error } = useSWR<TokenTransactionResponse>(_fetchCondition())
+
+	const { isWaiting } = useDelayUntilDone(() => !isEmpty(data) || error)
 
 	const convertData = (_data: TokenTransactionResponse): TokenTransaction[] => {
 		return data.result.map((d: TokenTransaction) => {
@@ -57,6 +61,7 @@ export default function useTokenTransactions(token: string, params: string | und
 	return {
 		result: hookData.result,
 		hasNextPage: hookData.hasNextPage,
-		nextPagePath: hookData.nextPagePath
+		nextPagePath: hookData.nextPagePath,
+		loading: isWaiting
 	}
 }