Merge pull request #497 from LiskHQ/348-transaction-loader

Hide transaction list and empty message when loading - Closes #348
LiskHQ · Mar 5, 2018 · 3115565 · 3115565
2 parents 038f65e + 87871c5
commit 3115565
Show file tree

Hide file tree

Showing 12 changed files with 86 additions and 44 deletions.
diff --git a/src/components/accountTransactions/index.js b/src/components/accountTransactions/index.js
@@ -22,6 +22,7 @@ class accountTransactions extends React.Component {
           balance={this.props.balance}
           address={this.props.match.params.address}
           t={this.props.t}
+          notLoading={this.props.notLoading}
         />
       </div>
       <div className={`${grid['col-sm-12']} ${styles.transactions} ${grid['col-md-8']}`}>
@@ -35,6 +36,7 @@ class accountTransactions extends React.Component {
 
 const mapStateToProps = state => ({
   balance: state.transactions.account ? state.transactions.account.balance : null,
+  notLoading: state.loading.length === 0,
 });
 
 const mapDispatchToProps = dispatch => ({

diff --git a/src/components/accountTransactions/index.test.js b/src/components/accountTransactions/index.test.js
@@ -20,6 +20,7 @@ describe('AccountTransaction Component', () => {
       },
       peers: { options: { data: {} } },
       account: { address: 'some address' },
+      loading: [],
     };
 
     props = {

diff --git a/src/components/dashboard/index.js b/src/components/dashboard/index.js
@@ -32,6 +32,8 @@ class Dashboard extends React.Component {
             transactions,
             t,
             address: this.props.accountAddress,
+            dashboard: true,
+            loading: this.props.loading,
           }} />
         </Box>
       </div>
@@ -45,6 +47,7 @@ class Dashboard extends React.Component {
 const mapStateToProps = state => ({
   transactions: [...state.transactions.pending, ...state.transactions.confirmed].slice(0, 3),
   accountAddress: state.account.address,
+  loading: state.loading.length > 0,
 });
 
 export default connect(mapStateToProps)(translate()(Dashboard));
diff --git a/src/components/dashboard/index.test.js b/src/components/dashboard/index.test.js
@@ -29,6 +29,7 @@ describe('Dashboard', () => {
           data: {},
           options: {},
         },
+        loading: [],
         account: { address: 'some address' },
       },
     };

diff --git a/src/components/sendTo/index.js b/src/components/sendTo/index.js
@@ -40,8 +40,12 @@ class SendTo extends React.Component {
         `}>
             <h2>
               <span>
-                <LiskAmount val={this.props.balance}/>
-              </span> <small className={styles.balanceUnit}>LSK</small>
+                {
+                  this.props.notLoading
+                    ? <LiskAmount val={this.props.balance}/>
+                    : null
+                } <small className={styles.balanceUnit}>LSK</small>
+              </span>
             </h2>
             <CopyToClipboard value={this.props.address} className={`${styles.address}`} copyClassName={styles.copy} />
           </div>

diff --git a/src/components/transactions/index.test.js b/src/components/transactions/index.test.js
@@ -27,6 +27,7 @@ describe('TransactionsHOC', () => {
       peers,
       transactions,
       account,
+      loading: [],
     });
     wrapper = mount(<Provider store={store}><Router><TransactionsHOC /></Router></Provider>, {
       context: { store, history, i18n },

diff --git a/src/components/transactions/transactionList.js b/src/components/transactions/transactionList.js
@@ -28,51 +28,64 @@ class TransactionsList extends React.Component {
   }
 
   render() {
+    const {
+      filter,
+      transactions,
+      loading,
+      dashboard,
+      address,
+      nextStep,
+      loadMore,
+      t,
+    } = this.props;
+
     const fixIncomingFilter = (transaction) => {
       const isTypeNonSend = transaction.type !== txTypes.send;
-      const isFilterIncoming = this.props.filter
-        && this.props.filter.value === txFilters.incoming;
+      const isFilterIncoming = filter && filter.value === txFilters.incoming;
       const isAccountInit = transaction.type === txTypes.send
         && transaction.senderId === transaction.recipientId;
 
       return !(isFilterIncoming && (isTypeNonSend || isAccountInit));
     };
 
-    if (this.props.transactions.length > 0) {
-      return <div className={`${styles.results} transaction-results`}>
-        <TransactionsHeader tableStyle={tableStyle}></TransactionsHeader>
-        {this.props.transactions
-          .filter(fixIncomingFilter)
-          .map((transaction, i) => (
-            <TransactionRow address={this.props.address}
-              key={i}
-              t={this.props.t}
-              value={transaction}
-              nextStep={this.props.nextStep}
-            />))}
-        {
-          // the transaction list should be scrollable on a large screen
-          // otherwise (XS) the whole transaction box will be scrollable
-          // (see transactionOverview.js)
-          this.isLargeScreen()
-            ? <Waypoint bottomOffset='-80%'
-              key={this.props.transactions.length}
-              onEnter={() => {
-                if (this.props.loadMore) {
-                  this.props.loadMore();
-                }
-              }}></Waypoint>
-            : null
-        }
-      </div>;
-    } else if (!this.props.filter || this.props.filter.value !== txFilters.all) {
-      return <p className={`${styles.empty} hasPaddingRow empty-message`}>
-        {this.props.t('There are no {{filterName}} transactions.', {
-          filterName: this.props.filter && this.props.filter.name ? this.props.filter.name.toLowerCase() : '',
-        })}
-      </p>;
+    if (loading) return null;
+    if (transactions.length === 0) {
+      if (dashboard || (filter && filter.value !== txFilters.all)) {
+        return <p className={`${styles.empty} hasPaddingRow empty-message`}>
+          {t('There are no {{filterName}} transactions.', {
+            filterName: filter && filter.name ? filter.name.toLowerCase() : '',
+          })}
+        </p>;
+      }
+      return null;
     }
-    return null;
+
+    return <div className={`${styles.results} transaction-results`}>
+      <TransactionsHeader tableStyle={tableStyle}></TransactionsHeader>
+      {transactions
+        .filter(fixIncomingFilter)
+        .map((transaction, i) => (
+          <TransactionRow address={address}
+            key={i}
+            t={t}
+            value={transaction}
+            nextStep={nextStep}
+          />))}
+      {
+        // the transaction list should be scrollable on a large screen
+        // otherwise (XS) the whole transaction box will be scrollable
+        // (see transactionOverview.js)
+        this.isLargeScreen()
+          ? <Waypoint bottomOffset='-80%'
+            key={transactions.length}
+            onEnter={() => {
+              if (!dashboard) {
+                loadMore();
+              }
+            }}></Waypoint>
+          : null
+      }
+    </div>;
   }
 }
 

diff --git a/src/components/transactions/transactionOverview.js b/src/components/transactions/transactionOverview.js
@@ -42,10 +42,14 @@ class Transactions extends React.Component {
   }
 
   shouldShowEmptyState() {
-    return this.props.transactions.length === 0 &&
+    return this.props.transactions.length === 0 && !this.isLoading() &&
       (!this.props.activeFilter || this.props.activeFilter === txFilters.all);
   }
 
+  isLoading() {
+    return this.props.loading.length > 0;
+  }
+
   render() {
     const filters = [
       {
@@ -71,13 +75,17 @@ class Transactions extends React.Component {
           <h2 className={styles.title}>{this.props.t('Activity')}</h2>
           <div className={styles.account}>
             <h2>
-              <span>
-                <LiskAmount val={this.props.balance}/>&nbsp;
-              </span>
+              {!this.isLoading()
+                ? <span>
+                  <LiskAmount val={this.props.balance}/>&nbsp;
+                </span>
+                : null
+              }
               <small className={styles.balanceUnit}>LSK</small>
             </h2>
-            <CopyToClipboard value={this.props.address} className={`${styles.address}`} copyClassName={styles.copy} />
+            <CopyToClipboard value={this.props.address} className={`${styles.address}`} copyClassName={styles.copy}/>
           </div>
+
         </header>
         {this.shouldShowEmptyState() ?
           <EmptyState title={this.props.t('No activity yet')}
@@ -100,6 +108,7 @@ class Transactions extends React.Component {
           transactions={this.props.transactions}
           loadMore={this.loadMore.bind(this)}
           nextStep={this.props.nextStep}
+          loading={this.isLoading()}
           t={this.props.t}
         />
         {

diff --git a/src/components/voting/index.test.js b/src/components/voting/index.test.js
@@ -17,6 +17,7 @@ describe('VotingHOC', () => {
         pending: [],
         confirmed: [],
       },
+      loading: [],
       voting: {
         delegates: [
           {

diff --git a/src/store/middlewares/transactions.js b/src/store/middlewares/transactions.js
@@ -1,3 +1,5 @@
+import { loadingStarted, loadingFinished } from '../../utils/loading';
+
 import { unconfirmedTransactions, transactions as getTransactions, getAccount, transaction } from '../../utils/api/account';
 import {
   transactionsFailed,
@@ -39,7 +41,7 @@ const filterTransactions = (store, action) => {
 const initTransactions = (store, action) => {
   const activePeer = store.getState().peers.data;
   const address = action.data.address;
-
+  loadingStarted('transactions-init');
   getTransactions({ activePeer, address, limit: 25 })
     .then((txResponse) => {
       const { transactions, count } = txResponse;
@@ -51,6 +53,7 @@ const initTransactions = (store, action) => {
             balance: accountResponse.balance,
             address,
           }));
+          loadingFinished('transactions-init');
         });
     });
 };

diff --git a/test/integration/accountTransactions.test.js b/test/integration/accountTransactions.test.js
@@ -10,6 +10,7 @@ import { prepareStore, renderWithRouter } from '../utils/applicationInit';
 import accountReducer from '../../src/store/reducers/account';
 import transactionReducer from '../../src/store/reducers/transactions';
 import peersReducer from '../../src/store/reducers/peers';
+import loadingReducer from '../../src/store/reducers/loading';
 import loginMiddleware from '../../src/store/middlewares/login';
 import accountMiddleware from '../../src/store/middlewares/account';
 import transactionsMiddleware from '../../src/store/middlewares/transactions';
@@ -79,6 +80,7 @@ describe('@integration: Account Transactions', () => {
       account: accountReducer,
       transactions: transactionReducer,
       peers: peersReducer,
+      loading: loadingReducer,
     }, [
       thunk,
       accountMiddleware,

diff --git a/test/integration/wallet.test.js b/test/integration/wallet.test.js
@@ -10,6 +10,7 @@ import { prepareStore, renderWithRouter } from '../utils/applicationInit';
 import accountReducer from '../../src/store/reducers/account';
 import transactionReducer from '../../src/store/reducers/transactions';
 import peersReducer from '../../src/store/reducers/peers';
+import loadingReducer from '../../src/store/reducers/loading';
 import loginMiddleware from '../../src/store/middlewares/login';
 import accountMiddleware from '../../src/store/middlewares/account';
 import peerMiddleware from '../../src/store/middlewares/peers';
@@ -93,6 +94,7 @@ describe('@integration: Wallet', () => {
       account: accountReducer,
       transactions: transactionReducer,
       peers: peersReducer,
+      loading: loadingReducer,
     }, [
       thunk,
       accountMiddleware,