Show sync indicator in account header

actualbudget · Apr 6, 2024 · 9f23e99 · 9f23e99
1 parent b5f617d
commit 9f23e99
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 0 deletions.
diff --git a/packages/desktop-client/src/components/accounts/Account.jsx b/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}

diff --git a/packages/desktop-client/src/components/accounts/Header.jsx b/packages/desktop-client/src/components/accounts/Header.jsx
@@ -41,6 +41,7 @@ export function AccountHeader({
   filterId,
   filtersList,
   accountsSyncing,
+  failedAccounts,
   accounts,
   transactions,
   showBalances,
@@ -165,6 +166,21 @@ export function AccountHeader({
                   },
                 }}
               >
+                {!!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,
+                    }}
+                  />
+                )}
                 <View
                   style={{
                     fontSize: 25,