diff --git a/source/renderer/app/components/wallet/transactions/WalletTransactionsList.js b/source/renderer/app/components/wallet/transactions/WalletTransactionsList.js index f0ec820129..7bc2d80995 100644 --- a/source/renderer/app/components/wallet/transactions/WalletTransactionsList.js +++ b/source/renderer/app/components/wallet/transactions/WalletTransactionsList.js @@ -72,10 +72,14 @@ type Props = { onCopyAssetItem: Function, }; +type State = { + isPreloading: boolean, +}; + const DATE_FORMAT = 'YYYY-MM-DD'; @observer -export default class WalletTransactionsList extends Component { +export default class WalletTransactionsList extends Component { static contextTypes = { intl: intlShape.isRequired, }; @@ -87,6 +91,26 @@ export default class WalletTransactionsList extends Component { onOpenExternalLink: () => {}, }; + state = { + isPreloading: true, + }; + + // We need to track the mounted state in order to avoid calling + // setState promise handling code after the component was already unmounted: + // Read more: https://facebook.github.io/react/blog/2015/12/16/ismounted-antipattern.html + _isMounted = false; + + componentDidMount() { + this._isMounted = true; + setTimeout(() => { + if (this._isMounted) this.setState({ isPreloading: false }); + }, 0); + } + + componentWillUnmount() { + this._isMounted = false; + } + expandedTransactionIds: Map = new Map(); transactionsShowingMetadata: Map = new Map(); virtualList: ?VirtualTransactionList; @@ -269,6 +293,8 @@ export default class WalletTransactionsList extends Component { }; render() { + const { intl } = this.context; + const { isPreloading } = this.state; const { hasMoreToLoad, isLoadingTransactions, @@ -278,8 +304,6 @@ export default class WalletTransactionsList extends Component { transactions, walletId, } = this.props; - - const { intl } = this.context; const transactionsGroups = this.groupTransactionsByDay(transactions); const loadingSpinner = @@ -335,6 +359,13 @@ export default class WalletTransactionsList extends Component { /> ); + if (isPreloading) + return ( +
+ +
+ ); + return (
{syncingTransactionsSpinner} diff --git a/source/renderer/app/components/wallet/transactions/WalletTransactionsList.scss b/source/renderer/app/components/wallet/transactions/WalletTransactionsList.scss index 9f47c4c765..fddd51c96e 100644 --- a/source/renderer/app/components/wallet/transactions/WalletTransactionsList.scss +++ b/source/renderer/app/components/wallet/transactions/WalletTransactionsList.scss @@ -69,3 +69,17 @@ display: block !important; margin: 30px auto 20px; } + +.preloadingBlockWrapper { + align-items: center; + display: flex; + flex: 1; + justify-content: center; + min-height: 44px; + + :global { + .LoadingSpinner_component { + margin: 0; + } + } +}