From b24d08092d88f2ae59ea48bc1b59d9740f1e807d Mon Sep 17 00:00:00 2001
From: Adam Havel <adam.havel@satoshilabs.com>
Date: Tue, 20 Aug 2024 10:53:43 +0200
Subject: [PATCH] fix(suite): account details animation triggering on first
 render

(cherry picked from commit 2c95e1dbd78890673e551cdb211c534e2fb54f4f)
---
 .../PageNames/AccountName/AccountDetails.tsx  | 28 +++++++++++++++++--
 1 file changed, 25 insertions(+), 3 deletions(-)

diff --git a/packages/suite/src/components/suite/layouts/SuiteLayout/PageHeader/PageNames/AccountName/AccountDetails.tsx b/packages/suite/src/components/suite/layouts/SuiteLayout/PageHeader/PageNames/AccountName/AccountDetails.tsx
index af3e7de50a7..8e90108d113 100644
--- a/packages/suite/src/components/suite/layouts/SuiteLayout/PageHeader/PageNames/AccountName/AccountDetails.tsx
+++ b/packages/suite/src/components/suite/layouts/SuiteLayout/PageHeader/PageNames/AccountName/AccountDetails.tsx
@@ -1,3 +1,4 @@
+import { useState, useEffect } from 'react';
 import styled, { keyframes } from 'styled-components';
 import { Account } from '@suite-common/wallet-types';
 import { spacingsPx } from '@trezor/theme';
@@ -36,11 +37,19 @@ const rotateOut = keyframes`
     }
 `;
 
-const DetailsContainer = styled.div<{ $isBalanceShown: boolean }>`
+const getAnimation = ($isBalanceShown: boolean, $shouldAnimate: boolean) => {
+    if (!$shouldAnimate) return 'none';
+
+    return $isBalanceShown ? rotateIn : rotateOut;
+};
+
+const DetailsContainer = styled.div<{ $isBalanceShown: boolean; $shouldAnimate: boolean }>`
     display: flex;
     flex-direction: column;
     justify-content: ${({ $isBalanceShown }) => ($isBalanceShown ? 'space-between' : 'center')};
-    animation: ${({ $isBalanceShown }) => ($isBalanceShown ? rotateIn : rotateOut)} 0.3s forwards;
+    animation: ${({ $isBalanceShown, $shouldAnimate }) =>
+            getAnimation($isBalanceShown, $shouldAnimate)}
+        0.3s forwards;
 `;
 
 const AccountHeading = styled(H2)<{ $isBalanceShown: boolean }>`
@@ -69,12 +78,25 @@ interface AccountDetailsProps {
 }
 
 export const AccountDetails = ({ selectedAccount, isBalanceShown }: AccountDetailsProps) => {
+    const [shouldAnimate, setShouldAnimate] = useState(false);
+    const [hasMounted, setHasMounted] = useState(false);
     const selectedAccountLabels = useSelector(selectLabelingDataForSelectedAccount);
     const { defaultAccountLabelString } = useAccountLabel();
     const { symbol, key, path, index, accountType, formattedBalance } = selectedAccount;
 
+    useEffect(() => {
+        setHasMounted(true);
+    }, []);
+
+    useEffect(() => {
+        if (!hasMounted) return;
+
+        setShouldAnimate(true);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isBalanceShown]);
+
     return (
-        <DetailsContainer $isBalanceShown={isBalanceShown}>
+        <DetailsContainer $isBalanceShown={isBalanceShown} $shouldAnimate={shouldAnimate}>
             <AccountHeading $isBalanceShown={isBalanceShown}>
                 <MetadataLabeling
                     defaultVisibleValue={