feat: add loading state to NFT tab

FuelLabs · Jan 20, 2025 · 1918c82 · 1918c82
1 parent 5680b65
commit 1918c82
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 2 deletions.
diff --git 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 <AssetList.Loading items={4} />;
+
   if (collections.length === 0) {
     return (
       <AssetListEmpty

diff --git a/packages/app/src/systems/Home/pages/Home/Home.tsx b/packages/app/src/systems/Home/pages/Home/Home.tsx
@@ -52,7 +52,7 @@ export function Home() {
             <BalanceAssets balances={account?.balances} isLoading={isLoading} />
           </Tabs.Content>
           <Tabs.Content value="nft" css={styles.assetsList}>
-            <BalanceNFTs balances={account?.balances} />
+            <BalanceNFTs balances={account?.balances} isLoading={isLoading} />
           </Tabs.Content>
         </Tabs>
       </Layout.Content>