feat: add stacks balance loader

leather-io · Apr 4, 2024 · 20418ab · 20418ab
1 parent 5c1c284
commit 20418ab
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 2 deletions.
diff --git a/src/app/components/account-total-balance.tsx b/src/app/components/account-total-balance.tsx
@@ -22,7 +22,7 @@ export const AccountTotalBalance = memo(({ btcAddress, stxAddress }: AccountTota
   if (!totalUsdBalance) return null;
 
   return (
-    <SkeletonLoader width="200px" height="38px" isLoading={isInitialLoading}>
+    <SkeletonLoader height="20px" isLoading={isInitialLoading}>
       <styled.span
         className={css(shimmerStyles)}
         textStyle="label.02"

diff --git a/src/app/features/asset-list/components/stacks-balance-list-item.layout.tsx b/src/app/features/asset-list/components/stacks-balance-list-item.layout.tsx
@@ -15,6 +15,7 @@ interface StacksBalanceListItemLayoutProps {
   stxEffectiveUsdBalance?: string;
   stxLockedBalance?: Money;
   stxUsdLockedBalance?: string;
+  isInitialLoading?: boolean;
 }
 export function StacksBalanceListItemLayout(props: StacksBalanceListItemLayoutProps) {
   const {
@@ -23,6 +24,7 @@ export function StacksBalanceListItemLayout(props: StacksBalanceListItemLayoutPr
     stxEffectiveUsdBalance,
     stxLockedBalance,
     stxUsdLockedBalance,
+    isInitialLoading,
   } = props;
 
   const stxAdditionalBalanceInfo = stxLockedBalance?.amount.isGreaterThan(0) ? (
@@ -44,6 +46,7 @@ export function StacksBalanceListItemLayout(props: StacksBalanceListItemLayoutPr
       additionalBalanceInfo={stxAdditionalBalanceInfo}
       additionalUsdBalanceInfo={stxAdditionalUsdBalanceInfo}
       icon={<StxAvatarIcon />}
+      isLoading={isInitialLoading}
     />
   );
 }
diff --git a/src/app/features/asset-list/components/stacks-balance-list-item.tsx b/src/app/features/asset-list/components/stacks-balance-list-item.tsx
@@ -7,5 +7,11 @@ interface StacksBalanceListItemProps {
 }
 export function StacksBalanceListItem({ address }: StacksBalanceListItemProps) {
   const balaceDetails = useStxBalance();
-  return <StacksBalanceListItemLayout address={address} {...balaceDetails} />;
+  return (
+    <StacksBalanceListItemLayout
+      address={address}
+      isInitialLoading={balaceDetails.stxBalanceQuery.isInitialLoading}
+      {...balaceDetails}
+    />
+  );
 }