From b0eff3abbdf51789bcdb6a65c15b705282be1284 Mon Sep 17 00:00:00 2001
From: Matej Lubej <matej.lubej@oasisprotocol.org>
Date: Wed, 10 Jul 2024 10:21:23 +0200
Subject: [PATCH] Fix initial load for pending txs on account page

---
 .changelog/1998.feature.md                         |  7 +++++++
 .../Features/TransactionHistory/index.tsx          | 14 ++++++++++----
 2 files changed, 17 insertions(+), 4 deletions(-)
 create mode 100644 .changelog/1998.feature.md

diff --git a/.changelog/1998.feature.md b/.changelog/1998.feature.md
new file mode 100644
index 0000000000..9a26096a2b
--- /dev/null
+++ b/.changelog/1998.feature.md
@@ -0,0 +1,7 @@
+Pending transactions
+
+Introduces a section for pending transactions within the transaction history
+interface. It is designed to display transactions currently in a pending
+state that are made within the wallet. The section will also show up in case
+there is a discrepancy between transaction history nonce and wallet nonce,
+indicating that some transactions are currently in pending state.
diff --git a/src/app/pages/AccountPage/Features/TransactionHistory/index.tsx b/src/app/pages/AccountPage/Features/TransactionHistory/index.tsx
index 6a33c09217..7fa21a0d12 100644
--- a/src/app/pages/AccountPage/Features/TransactionHistory/index.tsx
+++ b/src/app/pages/AccountPage/Features/TransactionHistory/index.tsx
@@ -6,7 +6,7 @@
 import { Transaction } from 'app/components/Transaction'
 import { Box } from 'grommet/es6/components/Box'
 import { Heading } from 'grommet/es6/components/Heading'
-import * as React from 'react'
+import React, { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
 
@@ -39,6 +39,14 @@ export function TransactionHistory() {
   const pendingTransactions = useSelector(selectPendingTransactionForAccount)
   const hasUnknownPendingTransactions = useSelector(hasAccountUnknownPendingTransactions)
   const network = useSelector(selectSelectedNetwork)
+
+  const [isInitialLoading, setInitialLoading] = useState(true)
+  useEffect(() => {
+    if (!!address && !accountIsLoading) {
+      setInitialLoading(false)
+    }
+  }, [address, accountIsLoading])
+
   const backendLinks = config[network][backend()]
   const transactionComponents = allTransactions.map(t => (
     <Transaction key={t.hash} transaction={t} referenceAddress={address} network={network} />
@@ -47,8 +55,6 @@ export function TransactionHistory() {
     .filter(({ hash: pendingTxHash }) => !allTransactions.some(({ hash }) => hash === pendingTxHash))
     .map(t => <Transaction key={t.hash} transaction={t} referenceAddress={address} network={network} />)
 
-  const showPendingSection = !accountIsLoading && !!address
-
   return (
     <Box margin="none">
       {transactionsError && (
@@ -58,7 +64,7 @@ export function TransactionHistory() {
         </p>
       )}
       {/* eslint-disable no-restricted-syntax */}
-      {showPendingSection && (!!pendingTransactionComponents.length || hasUnknownPendingTransactions) && (
+      {!isInitialLoading && (!!pendingTransactionComponents.length || hasUnknownPendingTransactions) && (
         <>
           <Heading level="3">{t('account.summary.pendingTransactions', 'Pending transactions')}</Heading>
           <AlertBox