Skip to content

feat: add NFTs loading state #1786

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 4 commits into from
Closed

feat: add NFTs loading state #1786

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1918c82
feat: add loading state to NFT tab
kirtiraj22 Jan 20, 2025
c2048b9
Merge branch 'master' into feat/add-nft-loading-state
kirtiraj22 Jan 27, 2025
a3f8e84
doc: add changeset
kirtiraj22 Jan 27, 2025
775dd88
Merge branch 'master' into feat/add-nft-loading-state
arthurgeron Feb 4, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/red-pigs-grow.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"fuels-wallet": major
---

Added loading state to the NFT tab
6 changes: 5 additions & 1 deletion packages/app/src/systems/Account/components/BalanceNFTs/BalanceNFTs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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
Expand All @@ -27,6 +29,8 @@ export const BalanceNFTs = ({ balances = [] }: BalanceNFTsProps) => {
};
}, [balances]);

if (isLoading || !balances) return <AssetList.Loading items={4} />;

if (collections.length === 0) {
return (
<AssetListEmpty
Expand Down
2 changes: 1 addition & 1 deletion packages/app/src/systems/Home/pages/Home/Home.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down