feat(mobile): nicer animation for discovery loader (#16334)

trezor · Jan 15, 2025 · 64d08a4 · 64d08a4
1 parent 922abd3
commit 64d08a4
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 35 deletions.
diff --git a/suite-native/assets/src/components/Assets.tsx b/suite-native/assets/src/components/Assets.tsx
@@ -1,5 +1,5 @@
 import { useCallback, useState } from 'react';
-import Animated, { FadeInDown } from 'react-native-reanimated';
+import Animated, { FadeInDown, LinearTransition } from 'react-native-reanimated';
 import { useSelector } from 'react-redux';
 
 import { useNavigation } from '@react-navigation/native';
@@ -8,7 +8,7 @@ import { useSelectorDeepComparison } from '@suite-common/redux-utils';
 import { type NetworkSymbol } from '@suite-common/wallet-config';
 import { selectIsDeviceAuthorized, selectHasDeviceDiscovery } from '@suite-common/wallet-core';
 import { OnSelectAccount } from '@suite-native/accounts';
-import { Card } from '@suite-native/atoms';
+import { AnimatedCard } from '@suite-native/atoms';
 import {
     AppTabsParamList,
     AppTabsRoutes,
@@ -63,14 +63,18 @@ export const Assets = () => {
 
     return (
         <>
-            <Card noPadding>
+            <AnimatedCard noPadding layout={LinearTransition}>
                 {deviceNetworks.map(symbol => (
-                    <Animated.View entering={isLoading ? FadeInDown : undefined} key={symbol}>
+                    <Animated.View
+                        entering={isLoading ? FadeInDown : undefined}
+                        layout={LinearTransition}
+                        key={symbol}
+                    >
                         <AssetItem cryptoCurrencySymbol={symbol} onPress={setSelectedAssetSymbol} />
                     </Animated.View>
                 ))}
                 {isLoading && <DiscoveryAssetsLoader isListEmpty={deviceNetworks.length < 1} />}
-            </Card>
+            </AnimatedCard>
             {selectedAssetSymbol && (
                 <NetworkAssetsBottomSheet
                     symbol={selectedAssetSymbol}

diff --git a/suite-native/assets/src/components/DiscoveryAssetsLoader.tsx b/suite-native/assets/src/components/DiscoveryAssetsLoader.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import Animated, { FadeInDown, LinearTransition } from 'react-native-reanimated';
 
 import { ListItemSkeleton, HStack, Text } from '@suite-native/atoms';
 import { Icon } from '@suite-native/icons';
@@ -16,12 +17,12 @@ export const DiscoveryAssetsLoader = ({ isListEmpty }: { isListEmpty: boolean })
     );
 
     return (
-        <>
+        <Animated.View entering={FadeInDown} layout={LinearTransition}>
             <ListItemSkeleton />
             <HStack justifyContent="center" marginBottom="sp16">
                 <Icon size="mediumLarge" name="trezorLogo" />
                 <Text variant="callout">{discoveryProgressText}</Text>
             </HStack>
-        </>
+        </Animated.View>
     );
 };
diff --git a/suite-native/atoms/src/Card/Card.tsx b/suite-native/atoms/src/Card/Card.tsx
@@ -1,5 +1,6 @@
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { View } from 'react-native';
+import Animated from 'react-native-reanimated';
 
 import { RequireAllOrNone } from 'type-fest';
 import { G } from '@mobily/ts-belt';
@@ -55,34 +56,42 @@ const alertBoxWrapperStyle = prepareNativeStyle(utils => ({
     paddingTop: utils.spacings.sp4,
 }));
 
-export const Card = ({
-    children,
-    style,
-    alertVariant,
-    alertTitle,
-    borderColor,
-    noPadding = false,
-}: CardProps) => {
-    const { applyStyle } = useNativeStyles();
+export const Card = React.forwardRef<View, CardProps>(
+    (
+        { children, style, alertVariant, alertTitle, borderColor, noPadding = false }: CardProps,
+        ref,
+    ) => {
+        const { applyStyle } = useNativeStyles();
 
-    const isAlertDisplayed = !!alertVariant;
+        const isAlertDisplayed = !!alertVariant;
 
-    return (
-        <View>
-            {isAlertDisplayed && (
-                <View style={applyStyle(alertBoxWrapperStyle)}>
-                    <AlertBox variant={alertVariant} title={alertTitle} borderRadius={12} />
+        return (
+            <View>
+                {isAlertDisplayed && (
+                    <View style={applyStyle(alertBoxWrapperStyle)}>
+                        <AlertBox variant={alertVariant} title={alertTitle} borderRadius={12} />
+                    </View>
+                )}
+                {/* CAUTION: in case that alert is displayed, it is not possible to change styles of the top borders by the `style` prop. */}
+                <View
+                    style={[
+                        applyStyle(cardContainerStyle, {
+                            isAlertDisplayed,
+                            noPadding,
+                            borderColor,
+                        }),
+                        style,
+                    ]}
+                    // Ref must be here otherwise the animation will not work
+                    ref={ref}
+                >
+                    {children}
                 </View>
-            )}
-            {/* CAUTION: in case that alert is displayed, it is not possible to change styles of the top borders by the `style` prop. */}
-            <View
-                style={[
-                    applyStyle(cardContainerStyle, { isAlertDisplayed, noPadding, borderColor }),
-                    style,
-                ]}
-            >
-                {children}
             </View>
-        </View>
-    );
-};
+        );
+    },
+);
+
+Card.displayName = 'Card';
+export const AnimatedCard = Animated.createAnimatedComponent(Card);
+AnimatedCard.displayName = 'AnimatedCard';