Add loading state to account collection card

oasisprotocol · Dec 1, 2023 · e764373 · e764373
1 parent bb2d294
commit e764373
Showing 1 changed file with 4 additions and 0 deletions.
diff --git a/src/app/pages/AccountDetailsPage/AccountNFTCollectionCard.tsx b/src/app/pages/AccountDetailsPage/AccountNFTCollectionCard.tsx
@@ -84,6 +84,7 @@ export const AccountNFTCollectionCard: FC<AccountDetailsContext> = ({ scope, add
           <AccountNFTCollection
             inventory={inventory}
             isFetched={isFetched}
+            isLoading={isLoading}
             totalCount={totalCount}
             isTotalCountClipped={isTotalCountClipped}
             pagination={pagination}
@@ -97,6 +98,7 @@ export const AccountNFTCollectionCard: FC<AccountDetailsContext> = ({ scope, add
 
 type AccountNFTCollectionProps = {
   inventory: EvmNft[] | undefined
+  isLoading: boolean
   isFetched: boolean
   isTotalCountClipped: boolean | undefined
   totalCount: number | undefined
@@ -110,6 +112,7 @@ type AccountNFTCollectionProps = {
 
 const AccountNFTCollection: FC<AccountNFTCollectionProps> = ({
   inventory,
+  isLoading,
   isFetched,
   isTotalCountClipped,
   pagination,
@@ -120,6 +123,7 @@ const AccountNFTCollection: FC<AccountNFTCollectionProps> = ({
 
   return (
     <>
+      {isLoading && <Skeleton variant="rectangular" sx={{ height: 200 }} />}
       {isFetched && !totalCount && <CardEmptyState label={t('tokens.emptyInventory')} />}
       {!!inventory?.length && (
         <>