From 1918c827b1111a25d1dab9ec369aeebe6dc69c13 Mon Sep 17 00:00:00 2001
From: kirtiraj22 <kirtirajthakor064@gmail.com>
Date: Tue, 21 Jan 2025 00:28:52 +0530
Subject: [PATCH 1/2] 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>

From a3f8e842ca75cbde8f2ffa57d0b09cedba4bb0af Mon Sep 17 00:00:00 2001
From: kirtiraj22 <kirtirajthakor064@gmail.com>
Date: Mon, 27 Jan 2025 23:56:31 +0530
Subject: [PATCH 2/2] doc: add changeset

---
 .changeset/red-pigs-grow.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/red-pigs-grow.md

diff --git a/.changeset/red-pigs-grow.md b/.changeset/red-pigs-grow.md
new file mode 100644
index 0000000000..4e80959f38
--- /dev/null
+++ b/.changeset/red-pigs-grow.md
@@ -0,0 +1,5 @@
+---
+"fuels-wallet": major
+---
+
+Added loading state to the NFT tab