Use inifinite scroll for transactions list - Closes #66

src/app/components/transactions/transactions.js

@@ -42,7 +42,11 @@ app.component('transactions', {
     reset() {
       this.loaded = false;
     }
-
+    showMore() {
+      if (this.more) {
+        this.update(true, true);
+      }
+    }
     update(show, more) {
       this.loading = true;
 

src/app/components/transactions/transactions.less

@@ -12,20 +12,6 @@ transactions {
     height: 40px;
   }
 
-  .loading {
-    height: 5px;
-
-    .md-container {
-      background-color: #fff;
-      border-top-left-radius: 2px;
-      border-top-right-radius: 2px;
-    }
-
-    .md-dashed {
-      background-color: #0288d1;
-    }
-  }
-
   md-table-container {
     width: 100%;
   }

src/app/components/transactions/transactions.pug

@@ -1,7 +1,5 @@
 md-card.offline-hide
   md-card-content
-    .loading
-      md-progress-linear(md-mode='indeterminate', ng-show='$ctrl.loading_show || !$ctrl.loaded')
     md-content(layout='row', layout-align='start center', layout-padding)
       span.title.md-title Transactions
       div(flex)
@@ -17,7 +15,7 @@ md-card.offline-hide
               th(md-column) Send to this
               th(md-column) Amount
               th(md-column) Fee
-          tbody(md-body)
+          tbody(md-body, infinite-scroll='$ctrl.showMore()')
             tr(md-row, ng-repeat="transaction in $ctrl.transactions track by transaction.id | orderBy:'-timestamp'")
               td(md-cell)
                 timestamp(data='transaction.timestamp', ng-show='transaction.confirmations')
@@ -48,4 +46,5 @@ md-card.offline-hide
               td(md-cell)
                 .fee
                   lsk(amount='transaction.fee')
-      md-button.more(ng-show='$ctrl.more', ng-disabled='$ctrl.loading_show', ng-click='$ctrl.update(true, true)') Load More
+  .loading
+    md-progress-linear(md-mode='indeterminate', ng-show='$ctrl.loading_show || !$ctrl.loaded')

src/spec/spec.js

@@ -177,21 +177,6 @@ function testShowTransactions() {
   expect(element.all(by.css('transactions table tbody tr')).count()).toEqual(10);
 }
 
-function testLoadMoreTransactions() {
-  login(masterAccount);
-
-  const moreButton = element(by.css('transactions button.more'));
-  const transactionsList = element.all(by.css('transactions table tbody tr'));
-  browser.wait(EC.presenceOf(moreButton), waitTime);
-
-  const initalCount = transactionsList.count();
-  moreButton.click();
-  browser.sleep(200);
-  const secondaryCount = transactionsList.count();
-
-  expect(secondaryCount).not.toBeLessThan(initalCount);
-}
-
 describe('Lisk Nano functionality', () => {
   it('should allow to login', testLogin);
   it('should allow to logout', testLogout);
@@ -203,6 +188,5 @@ describe('Lisk Nano functionality', () => {
   it('should not allow to send transaction when not enough funds', testSendWithNotEnoughFunds);
   it('should not allow to send transaction when invalid address', testSendWithInvalidAddress);
   it('should show transactions', testShowTransactions);
-  it('should allow to load more transactions', testLoadMoreTransactions);
   it('should allow to create a new account', testNewAccount);
 });