fix(suite-native): show fiat balance skeleton while graph is loading

trezor · Jan 9, 2025 · 132e7c6 · 132e7c6
1 parent 00cb7c4
commit 132e7c6
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 19 deletions.
diff --git a/suite-native/graph/src/components/GraphFiatBalance.tsx b/suite-native/graph/src/components/GraphFiatBalance.tsx
@@ -17,6 +17,7 @@ type GraphFiatBalanceProps = BalanceProps & {
     percentageChangeAtom: Atom<number>;
     hasPriceIncreasedAtom: Atom<boolean>;
     showChange?: boolean;
+    isLoading?: boolean;
 };
 
 const wrapperStyle = prepareNativeStyle(_ => ({
@@ -50,11 +51,12 @@ export const GraphFiatBalance = ({
     percentageChangeAtom,
     hasPriceIncreasedAtom,
     showChange = true,
+    isLoading = false,
 }: GraphFiatBalanceProps) => {
     const { applyStyle } = useNativeStyles();
     const firstGraphPoint = useAtomValue(referencePointAtom);
 
-    if (!firstGraphPoint) {
+    if (isLoading || !firstGraphPoint) {
         return <Skeleton />;
     }
 

diff --git a/suite-native/module-home/src/screens/HomeScreen/components/PortfolioContent.tsx b/suite-native/module-home/src/screens/HomeScreen/components/PortfolioContent.tsx
@@ -3,7 +3,7 @@ import { useSelector } from 'react-redux';
 
 import { useNavigation } from '@react-navigation/native';
 
-import { selectHasDeviceDiscovery } from '@suite-common/wallet-core';
+import { selectHasDeviceDiscovery, selectIsDeviceAuthorized } from '@suite-common/wallet-core';
 import { Button, VStack } from '@suite-native/atoms';
 import { Assets } from '@suite-native/assets';
 import {
@@ -18,7 +18,9 @@ import { PortfolioGraph, PortfolioGraphRef } from './PortfolioGraph';
 export const PortfolioContent = forwardRef<PortfolioGraphRef>((_props, ref) => {
     const navigation = useNavigation<StackNavigationProps<RootStackParamList, RootStackRoutes>>();
 
+    const isDeviceAuthorized = useSelector(selectIsDeviceAuthorized);
     const hasDiscovery = useSelector(selectHasDeviceDiscovery);
+    const showReceiveButton = isDeviceAuthorized && !hasDiscovery;
 
     const handleReceive = () => {
         navigation.navigate(RootStackRoutes.ReceiveModal, { closeActionType: 'back' });
@@ -28,7 +30,7 @@ export const PortfolioContent = forwardRef<PortfolioGraphRef>((_props, ref) => {
         <VStack spacing="sp32" marginTop="sp8">
             <PortfolioGraph ref={ref} />
             <VStack spacing="sp24" marginHorizontal="sp16">
-                {!hasDiscovery && (
+                {showReceiveButton && (
                     <Button
                         data-testID="@home/portolio/recieve-button"
                         onPress={handleReceive}

diff --git a/suite-native/module-home/src/screens/HomeScreen/components/PortfolioGraph.tsx b/suite-native/module-home/src/screens/HomeScreen/components/PortfolioGraph.tsx
@@ -97,12 +97,12 @@ export const PortfolioGraph = forwardRef<PortfolioGraphRef>((_props, ref) => {
         [refetch],
     );
 
+    const showHeader = isAnyMainnetAccountPresent || isLoading;
     const showGraph = hasDeviceHistoryEnabledAccounts || hasDeviceDiscovery;
 
     return (
         <VStack spacing="sp24" testID="@home/portfolio/graph">
-            {isAnyMainnetAccountPresent ? <PortfolioHeader /> : null}
-
+            {showHeader && <PortfolioHeader isLoading={isLoading} />}
             {showGraph && (
                 <Graph
                     points={graphPoints}

diff --git a/suite-native/module-home/src/screens/HomeScreen/components/PortfolioHeader.tsx b/suite-native/module-home/src/screens/HomeScreen/components/PortfolioHeader.tsx
@@ -2,7 +2,6 @@ import { useSelector } from 'react-redux';
 
 import { Box, VStack } from '@suite-native/atoms';
 import { GraphFiatBalance, selectHasDeviceHistoryEnabledAccounts } from '@suite-native/graph';
-import { selectHasDeviceDiscovery, selectIsDeviceAuthorized } from '@suite-common/wallet-core';
 
 import {
     hasPriceIncreasedAtom,
@@ -11,24 +10,24 @@ import {
     selectedPointAtom,
 } from '../portfolioGraphAtoms';
 
-export const PortfolioHeader = () => {
-    const hasDiscovery = useSelector(selectHasDeviceDiscovery);
-    const isDeviceAuthorized = useSelector(selectIsDeviceAuthorized);
+type PortfolioHeaderProps = {
+    isLoading: boolean;
+};
+
+export const PortfolioHeader = ({ isLoading }: PortfolioHeaderProps) => {
     const hasDeviceHistoryEnabledAccounts = useSelector(selectHasDeviceHistoryEnabledAccounts);
-    const isLoading = hasDiscovery || !isDeviceAuthorized;
 
     return (
         <Box testID="@home/portfolio/header">
             <VStack spacing="sp4" alignItems="center">
-                {!isLoading && (
-                    <GraphFiatBalance
-                        selectedPointAtom={selectedPointAtom}
-                        referencePointAtom={referencePointAtom}
-                        percentageChangeAtom={percentageChangeAtom}
-                        hasPriceIncreasedAtom={hasPriceIncreasedAtom}
-                        showChange={hasDeviceHistoryEnabledAccounts}
-                    />
-                )}
+                <GraphFiatBalance
+                    selectedPointAtom={selectedPointAtom}
+                    referencePointAtom={referencePointAtom}
+                    percentageChangeAtom={percentageChangeAtom}
+                    hasPriceIncreasedAtom={hasPriceIncreasedAtom}
+                    showChange={hasDeviceHistoryEnabledAccounts}
+                    isLoading={isLoading}
+                />
             </VStack>
         </Box>
     );