Merge pull request #1998 from oasisprotocol/ml/fix-initial-load-for-p…

…ending-txs-on-account-page

Fix initial load for pending txs on account page

.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.

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