fix: balance placeholders

haqq-network · Dec 18, 2024 · d12c218 · d12c218
1 parent d2e5a91
commit d12c218
Show file tree

Hide file tree

Showing 15 changed files with 434 additions and 290 deletions.
diff --git a/src/app.tsx b/src/app.tsx
@@ -115,6 +115,9 @@ export const App = observer(() => {
   }, [AppStore.networkLoggerEnabled]);
 
   useEffect(() => {
+    if (AppStore.isInitialized) {
+      return;
+    }
     const splashTimer = setTimeout(() => {
       hideModal(ModalType.splash);
     }, SPLASH_TIMEOUT_MS);

diff --git a/src/components/account-info/account-info-header.tsx b/src/components/account-info/account-info-header.tsx
@@ -22,6 +22,7 @@ import {Balance} from '@app/services/balance';
 import {WalletType} from '@app/types';
 
 import {StackedVestedTokens} from '../stacked-vested-tokens';
+import {Placeholder} from '../ui/placeholder';
 
 const CARD_WIDTH = 78;
 const CARD_RADIUS = 8;
@@ -34,6 +35,7 @@ export type AccountInfoProps = {
   total: Balance;
   vested: Balance;
   unlock: Date;
+  isBalanceLoading: boolean;
   onPressInfo: () => void;
   onSend: () => void;
   onReceive: () => void;
@@ -46,10 +48,11 @@ export const AccountInfoHeader = ({
   total,
   vested,
   available,
+  unlock,
+  isBalanceLoading,
   onPressInfo,
   onSend,
   onReceive,
-  unlock,
 }: AccountInfoProps) => {
   const formattedAddress = useMemo(
     () => shortAddress(wallet.providerSpecificAddress, '•'),
@@ -68,10 +71,20 @@ export const AccountInfoHeader = ({
           colorPattern={wallet.colorPattern}
         />
         <View style={styles.headerContent}>
-          <Text
-            variant={TextVariant.t3}
-            children={total.toFiat({useDefaultCurrency: true})}
-          />
+          <First>
+            {isBalanceLoading && (
+              <>
+                <Placeholder opacity={0.8}>
+                  <Placeholder.Item width={140} height={28} />
+                </Placeholder>
+                <Spacer height={10} />
+              </>
+            )}
+            <Text
+              variant={TextVariant.t3}
+              children={total.toFiat({useDefaultCurrency: true})}
+            />
+          </First>
           <CopyMenu wallet={wallet} style={styles.copyButton} withSettings>
             <Text variant={TextVariant.t14} color={Color.textBase2}>
               {formattedAddress}
@@ -85,18 +98,16 @@ export const AccountInfoHeader = ({
           </CopyMenu>
         </View>
       </View>
-      <First>
-        <StackedVestedTokens
-          totalBalance={total}
-          availableBalance={available}
-          lockedBalance={locked}
-          vestedBalance={vested}
-          stakingBalance={staked}
-          onPressInfo={onPressInfo}
-          unlock={unlock}
-        />
-        <Spacer height={24} />
-      </First>
+      <StackedVestedTokens
+        totalBalance={total}
+        availableBalance={available}
+        lockedBalance={locked}
+        vestedBalance={vested}
+        stakingBalance={staked}
+        unlock={unlock}
+        isBalanceLoading={isBalanceLoading}
+        onPressInfo={onPressInfo}
+      />
       <Inline gap={12} style={styles.iconButtons}>
         <IconButton
           disabled={wallet.type === WalletType.watchOnly}

diff --git a/src/components/account-info/account-info.tsx b/src/components/account-info/account-info.tsx
@@ -34,6 +34,7 @@ export type AccountInfoProps = {
   vested: Balance;
   unlock: Date;
   tokens: Record<AddressEthereum, IToken[]>;
+  isBalanceLoading: boolean;
   onPressInfo: () => void;
   onSend: () => void;
   onReceive: () => void;
@@ -57,6 +58,7 @@ export const AccountInfo = observer(
     unlock,
     vested,
     tokens,
+    isBalanceLoading,
     onPressInfo,
     onSend,
     onReceive,
@@ -87,6 +89,7 @@ export const AccountInfo = observer(
             total={total}
             unlock={unlock}
             vested={vested}
+            isBalanceLoading={isBalanceLoading}
             onPressInfo={onPressInfo}
             onSend={onSend}
             onReceive={onReceive}

diff --git a/src/components/stacked-vested-tokens.tsx b/src/components/stacked-vested-tokens.tsx
@@ -9,18 +9,28 @@ import {I18N, getText} from '@app/i18n';
 import {Balance} from '@app/services/balance';
 
 import {DashedLine} from './dashed-line';
-import {Icon, IconButton, IconsName, Spacer, Text, TextVariant} from './ui';
+import {
+  First,
+  Icon,
+  IconButton,
+  IconsName,
+  Spacer,
+  Text,
+  TextVariant,
+} from './ui';
 import {BarChart} from './ui/bar-chart';
 import {BarChartItem} from './ui/bar-chart/bar-chart-item';
+import {Placeholder} from './ui/placeholder';
 
 export interface StackedVestedTokensProps {
   lockedBalance?: Balance;
   vestedBalance?: Balance;
   stakingBalance?: Balance;
   availableBalance?: Balance;
   unlock: Date;
-  onPressInfo(): void;
   totalBalance?: Balance;
+  isBalanceLoading: boolean;
+  onPressInfo(): void;
 }
 
 const calculateDistanceToNow = (endDate: Date) => {
@@ -36,9 +46,10 @@ export function StackedVestedTokens({
   lockedBalance = Balance.Empty,
   stakingBalance = Balance.Empty,
   vestedBalance = Balance.Empty,
-  onPressInfo,
   unlock,
   totalBalance,
+  isBalanceLoading,
+  onPressInfo,
 }: StackedVestedTokensProps) {
   const {width} = useWindowDimensions();
   const vestedUnlockDescription = useMemo(() => {
@@ -86,17 +97,26 @@ export function StackedVestedTokens({
           <View style={styles.row}>
             <Icon i20 color={Color.graphicBase1} name={IconsName.islm} />
             <Spacer width={4} />
-            <Text
-              variant={TextVariant.t10}
-              color={Color.textBase1}
-              i18n={I18N.totalAvailable}
-              i18params={{count: totalBalance?.toFloatString() ?? '0'}}
-            />
-            <Text
-              variant={TextVariant.t10}
-              color={Color.textBase2}
-              children={' ' + totalBalance?.currency}
-            />
+            <First>
+              {isBalanceLoading && (
+                <Placeholder opacity={0.8}>
+                  <Placeholder.Item width={150} height={22} />
+                </Placeholder>
+              )}
+              <>
+                <Text
+                  variant={TextVariant.t10}
+                  color={Color.textBase1}
+                  i18n={I18N.totalAvailable}
+                  i18params={{count: totalBalance?.toFloatString() ?? '0'}}
+                />
+                <Text
+                  variant={TextVariant.t10}
+                  color={Color.textBase2}
+                  children={' ' + totalBalance?.currency}
+                />
+              </>
+            </First>
           </View>
           <DashedLine
             style={styles.separator}
@@ -108,17 +128,26 @@ export function StackedVestedTokens({
       <View style={styles.row}>
         <Icon i20 color={Color.graphicBase1} name={IconsName.coin} />
         <Spacer width={4} />
-        <Text
-          variant={TextVariant.t10}
-          color={Color.textBase1}
-          i18n={I18N.lockedTokensAvailable}
-          i18params={{count: availableBalance?.toFloatString() ?? '0'}}
-        />
-        <Text
-          variant={TextVariant.t10}
-          color={Color.textBase2}
-          children={' ' + availableBalance.currency}
-        />
+        <First>
+          {isBalanceLoading && (
+            <Placeholder opacity={0.8}>
+              <Placeholder.Item width={130} height={22} />
+            </Placeholder>
+          )}
+          <>
+            <Text
+              variant={TextVariant.t10}
+              color={Color.textBase1}
+              i18n={I18N.lockedTokensAvailable}
+              i18params={{count: availableBalance?.toFloatString() ?? '0'}}
+            />
+            <Text
+              variant={TextVariant.t10}
+              color={Color.textBase2}
+              children={' ' + availableBalance.currency}
+            />
+          </>
+        </First>
       </View>
       {lockedBalance?.isPositive() && (
         <>
@@ -130,17 +159,27 @@ export function StackedVestedTokens({
           <View style={styles.row}>
             <Icon i20 color={Color.graphicBase1} name={IconsName.lock} />
             <Spacer width={4} />
-            <Text
-              variant={TextVariant.t10}
-              color={Color.textBase1}
-              i18n={I18N.lockedTokensLocked}
-              i18params={{count: lockedBalance.toFloatString()}}
-            />
-            <Text
-              variant={TextVariant.t10}
-              color={Color.textBase2}
-              children={' ' + lockedBalance.currency}
-            />
+            <First>
+              {isBalanceLoading && (
+                <Placeholder opacity={0.8}>
+                  <Placeholder.Item width={110} height={22} />
+                </Placeholder>
+              )}
+              <>
+                <Text
+                  variant={TextVariant.t10}
+                  color={Color.textBase1}
+                  i18n={I18N.lockedTokensLocked}
+                  i18params={{count: lockedBalance.toFloatString()}}
+                />
+                <Text
+                  variant={TextVariant.t10}
+                  color={Color.textBase2}
+                  children={' ' + lockedBalance.currency}
+                />
+              </>
+            </First>
+
             <Spacer width={4} />
             <IconButton onPress={onPressInfo}>
               <Icon i20 color={Color.graphicBase2} name={IconsName.info} />

diff --git a/src/components/total-value-info/total-value-info-header.tsx b/src/components/total-value-info/total-value-info-header.tsx
@@ -6,7 +6,7 @@ import {Color} from '@app/colors';
 import {First, Spacer, Text, TextVariant} from '@app/components/ui';
 import {createTheme} from '@app/helpers';
 import {I18N} from '@app/i18n';
-import {BalanceModel} from '@app/models/wallet';
+import {BalanceModel, Wallet} from '@app/models/wallet';
 
 import {StackedVestedTokens} from '../stacked-vested-tokens';
 
@@ -49,6 +49,7 @@ export const TotalValueInfoHeader = ({
           stakingBalance={balance?.staked}
           onPressInfo={onPressInfo}
           unlock={balance?.nextVestingUnlockDate}
+          isBalanceLoading={Wallet.isBalancesLoading}
         />
       </First>
     </>

diff --git a/src/components/wallet-card/balance-info-details.tsx b/src/components/wallet-card/balance-info-details.tsx
@@ -15,21 +15,26 @@ import {
 import {Placeholder} from '@app/components/ui/placeholder';
 import {createTheme} from '@app/helpers';
 import {I18N} from '@app/i18n';
-import {Wallet} from '@app/models/wallet';
 import {Balance} from '@app/services/balance';
 
 type BalanceInfoDetailsProps = {
   total?: Balance;
   locked?: Balance;
   showLockedTokens: boolean;
+  isBalanceLoading: boolean;
 };
 
 export const BalanceInfoDetails = observer(
-  ({total, locked, showLockedTokens}: BalanceInfoDetailsProps) => {
+  ({
+    total,
+    locked,
+    showLockedTokens,
+    isBalanceLoading,
+  }: BalanceInfoDetailsProps) => {
     return (
       <View style={styles.row}>
         <First>
-          {Wallet.isBalancesLoading && (
+          {isBalanceLoading && (
             <>
               <Spacer height={8} />
               <Placeholder opacity={0.6}>
@@ -50,7 +55,7 @@ export const BalanceInfoDetails = observer(
         {!!total?.toFiat() && <Spacer width={10} />}
         {showLockedTokens && (
           <First>
-            {Wallet.isBalancesLoading && (
+            {isBalanceLoading && (
               <>
                 <Spacer height={8} />
                 <Placeholder opacity={0.6}>