Show sync indicator in account header (#2560)

packages/desktop-client/src/components/accounts/Account.jsx

@@ -1407,6 +1407,7 @@ class AccountInternal extends PureComponent {
       hideFraction,
       addNotification,
       accountsSyncing,
+      failedAccounts,
       pushModal,
       replaceModal,
       showExtraBalances,
@@ -1478,6 +1479,7 @@ class AccountInternal extends PureComponent {
                 location={this.props.location}
                 accountName={accountName}
                 accountsSyncing={accountsSyncing}
+                failedAccounts={failedAccounts}
                 accounts={accounts}
                 transactions={transactions}
                 showBalances={showBalances}

packages/desktop-client/src/components/accounts/Header.jsx

@@ -41,6 +41,7 @@ export function AccountHeader({
   filterId,
   filtersList,
   accountsSyncing,
+  failedAccounts,
   accounts,
   transactions,
   showBalances,
@@ -131,7 +132,28 @@ export function AccountHeader({
         <View
           style={{ marginTop: 2, marginBottom: 10, alignItems: 'flex-start' }}
         >
-          <View>
+          <View
+            style={{
+              flexDirection: 'row',
+              alignItems: 'center',
+              gap: 3,
+            }}
+          >
+            {!!account?.bank && (
+              <View
+                style={{
+                  backgroundColor: accountsSyncing.includes(account.id)
+                    ? theme.sidebarItemBackgroundPending
+                    : failedAccounts.has(account.id)
+                      ? theme.sidebarItemBackgroundFailed
+                      : theme.sidebarItemBackgroundPositive,
+                  marginRight: '4px',
+                  width: 8,
+                  height: 8,
+                  borderRadius: 8,
+                }}
+              />
+            )}
             {editingName ? (
               <InitialFocus>
                 <Input
@@ -142,11 +164,12 @@ export function AccountHeader({
                   style={{
                     fontSize: 25,
                     fontWeight: 500,
-                    marginTop: -5,
-                    marginBottom: -2,
-                    marginLeft: -5,
+                    marginTop: -3,
+                    marginBottom: -4,
+                    marginLeft: -6,
                     paddingTop: 2,
                     paddingBottom: 2,
+                    width: Math.max(20, accountName.length) + 'ch',
                   }}
                 />
               </InitialFocus>

upcoming-release-notes/2560.md

@@ -0,0 +1,6 @@
+---
+category: Features
+authors: [psybers]
+---
+
+Show sync indicator in account header.