♻️ Add loading state from redux to transactionList.

LiskHQ · Feb 5, 2019 · a5ed31d · a5ed31d
1 parent 31a17b8
commit a5ed31d
Show file tree

Hide file tree

Showing 6 changed files with 66 additions and 7 deletions.
diff --git a/src/actions/transactions.js b/src/actions/transactions.js
@@ -27,6 +27,8 @@ export const transactionsFilterSet = ({
 }) => (dispatch, getState) => {
   const liskAPIClient = getState().peers.liskAPIClient;
 
+  dispatch(loadingStarted(actionTypes.transactionsFilterSet));
+
   return getTransactions({
     liskAPIClient,
     address,
@@ -50,6 +52,7 @@ export const transactionsFilterSet = ({
         type: actionTypes.addFilter,
       });
     }
+    dispatch(loadingFinished(actionTypes.transactionsFilterSet));
   });
 };
 
@@ -101,11 +104,13 @@ export const transactionsRequested = ({
   address, limit, offset, filter,
 }) =>
   (dispatch, getState) => {
+    dispatch(loadingStarted(actionTypes.transactionsRequested));
     const liskAPIClient = getState().peers.liskAPIClient;
     getTransactions({
       liskAPIClient, address, limit, offset, filter,
     })
       .then((response) => {
+        dispatch(loadingFinished(actionTypes.transactionsRequested));
         dispatch({
           data: {
             count: parseInt(response.meta.count, 10),

diff --git a/src/components/transactionDashboard/index.js b/src/components/transactionDashboard/index.js
@@ -13,9 +13,9 @@ class TransactionsDashboard extends React.Component {
   render() {
     return <div className={`${grid.row} ${styles.wrapper}`}>
       <div className={`${grid['col-xs-10']} ${grid['col-sm-12']} ${grid['col-md-12']} ${grid['col-lg-12']} ${styles.transactions}`}>
-      { this.props.match.url === routes.wallet.path &&
-        <WalletTransactions {...this.props} /> }
       { this.props.match.url === routes.walletV2.path &&
+        <WalletTransactions {...this.props} /> }
+      { this.props.match.url === routes.wallet.path &&
         <WalletTransactionsV2 {...this.props} /> }
       </div>
     </div>;

diff --git a/src/components/transactionsV2/transactionRowV2.css b/src/components/transactionsV2/transactionRowV2.css
@@ -2,13 +2,10 @@
 
 .row {
   align-items: center;
+  cursor: pointer;
   padding: 0 8px;
   padding: 0 0.5em; /* stylelint-disable-line */
 
-  &:hover {
-    cursor: pointer;
-  }
-
   &:nth-child(2n+3) {
     background-color: var(--color-background-menu);
   }
@@ -30,6 +27,8 @@
 }
 
 .header {
+  cursor: initial;
+
   & > * {
     color: var(--color-content-grayblue);
     font-family: var(--heading-font);

diff --git a/src/components/transactionsV2/transactionsListV2.css b/src/components/transactionsV2/transactionsListV2.css
@@ -25,6 +25,45 @@
     padding-bottom: 30px;
   }
 
+  &.isLoading {
+    & .loadingOverlay {
+      background: rgba(255, 255, 255, 0.8);
+      bottom: 0;
+      color: var(--color-primary-standard);
+      position: absolute;
+      top: 40px;
+      width: 100%;
+      z-index: 1;
+
+      & :global(.spinner) {
+        border-width: 4px;
+        height: 36px;
+        width: 36px;
+      }
+
+      & .loadingSpinner {
+        box-sizing: border-box;
+        display: flex;
+        justify-content: center;
+        height: 100%;
+        padding: 235px 0;
+        width: 100%;
+
+        &.bottom {
+          align-items: flex-end;
+        }
+
+        &.top {
+          align-items: flex-start;
+        }
+      }
+    }
+
+    & :global(.empty-message) {
+      display: none;
+    }
+  }
+
   & .showMore {
     align-items: center;
     bottom: 0;

diff --git a/src/components/transactionsV2/transactionsListV2.js b/src/components/transactionsV2/transactionsListV2.js
@@ -6,6 +6,8 @@ import TransactionRowV2 from './transactionRowV2';
 import txFilters from '../../constants/transactionFilters';
 import txTypes from '../../constants/transactionTypes';
 import styles from './transactionsListV2.css';
+import SpinnerV2 from '../spinnerV2/spinnerV2';
+import actionTypes from '../../constants/actions';
 
 class TransactionsListV2 extends React.Component {
   render() {
@@ -14,6 +16,7 @@ class TransactionsListV2 extends React.Component {
       address,
       followedAccounts,
       canLoadMore,
+      loading,
       t,
     } = this.props;
     // All, incoming, outgoing are filter values. To be more consistance with other possible tabs
@@ -28,8 +31,20 @@ class TransactionsListV2 extends React.Component {
       return !(isFilterIncoming && (isTypeNonSend || isAccountInit));
     };
 
-    return <div className={`${styles.results} ${canLoadMore ? styles.hasMore : ''} transaction-results`}>
+    const actions = [actionTypes.transactionsRequested, actionTypes.transactionsFilterSet];
+    const isLoading = loading.some(type => actions.includes(type));
+    const spinnerClass = loading.includes(actionTypes.transactionsRequested)
+      ? styles.bottom : styles.top;
+
+    return <div className={`${styles.results} ${canLoadMore ? styles.hasMore : ''} ${isLoading ? styles.isLoading : ''} transaction-results`}>
       <TransactionsHeaderV2 tableStyle={tableStyle} />
+      {
+        isLoading ? (
+          <div className={styles.loadingOverlay}>
+            <SpinnerV2 className={`${styles.loadingSpinner} ${spinnerClass}`} />
+          </div>
+        ) : null
+      }
       {transactions.length
         ? transactions.filter(fixIncomingFilter)
             .map((transaction, i) =>

diff --git a/src/components/transactionsV2/transactionsOverviewV2.js b/src/components/transactionsV2/transactionsOverviewV2.js
@@ -70,6 +70,7 @@ class TransactionsOverviewV2 extends React.Component {
           publicKey={this.props.publicKey}
           history={this.props.history}
           onClick={props => this.props.onTransactionRowClick(props)}
+          loading={this.props.loading}
           canLoadMore={this.props.canLoadMore}
           onLoadMore={this.props.onLoadMore}
         />