diff --git a/packages/app/src/systems/Account/components/BalanceNFTs/BalanceNFTs.tsx b/packages/app/src/systems/Account/components/BalanceNFTs/BalanceNFTs.tsx index 59712e6250..6fffdc90ac 100644 --- a/packages/app/src/systems/Account/components/BalanceNFTs/BalanceNFTs.tsx +++ b/packages/app/src/systems/Account/components/BalanceNFTs/BalanceNFTs.tsx @@ -2,6 +2,7 @@ import { cssObj } from '@fuel-ui/css'; import { Accordion, Badge, Box, Copyable, VStack } from '@fuel-ui/react'; import type { CoinAsset } from '@fuel-wallet/types'; import { useMemo } from 'react'; +import { AssetList } from '~/systems/Asset'; import { AssetListEmpty } from '~/systems/Asset/components/AssetList/AssetListEmpty'; import { shortAddress } from '~/systems/Core'; import { NFTImage } from './NFTImage'; @@ -12,9 +13,10 @@ import { interface BalanceNFTsProps { balances: CoinAsset[] | undefined; + isLoading?: boolean; } -export const BalanceNFTs = ({ balances = [] }: BalanceNFTsProps) => { +export const BalanceNFTs = ({ balances = [], isLoading }: BalanceNFTsProps) => { const { collections, defaultValue } = useMemo(() => { const collections = groupNFTsByCollection(balances); const defaultValue = collections @@ -27,6 +29,8 @@ export const BalanceNFTs = ({ balances = [] }: BalanceNFTsProps) => { }; }, [balances]); + if (isLoading || !balances) return ; + if (collections.length === 0) { return ( - +