From 641fd788318e00bec1f2b66dedf5eacbdf490c20 Mon Sep 17 00:00:00 2001
From: kirtiraj22 <kirtirajthakor064@gmail.com>
Date: Tue, 21 Jan 2025 00:11:52 +0530
Subject: [PATCH] feat: add loading state to NFT tab

---
 .../systems/Account/components/BalanceNFTs/BalanceNFTs.tsx  | 6 +++++-
 packages/app/src/systems/Home/pages/Home/Home.tsx           | 2 +-
 2 files changed, 6 insertions(+), 2 deletions(-)

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 <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
index 067d2b7779..58398e7134 100644
--- 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>