web-ui: Add infinite scroll to block screen

Author: JonSalazar

package-lock.json

@@ -271,7 +271,12 @@ <h2 class="col-xs-12">{{'label.block' | translate}} #{{blockDetails.block.height
               </tr>
             </thead>
 
-            <tbody>
+            <tbody
+            infiniteScroll
+            [infiniteScrollDistance]="1"
+            [infiniteScrollThrottle]="300"
+            (scrolled)="load()"
+            [scrollWindow]="true">
               <tr *ngFor="let index = index; let item of transactions">
                 <td>{{index + 1}}</td>
                 <td>
@@ -285,13 +290,6 @@ <h2 class="col-xs-12">{{'label.block' | translate}} #{{blockDetails.block.height
           </table>
         </div>
 
-        <div class="row">
-          <div class="col-xs-11 col-xs-offset-1 col-sm-5 col-sm-offset-4">
-            <button (click)="load()">{{'label.more' | translate}}</button>
-          </div>
-        </div>
-      </div>
-
       <!-- transaction list only -->
       <div *ngIf="transactions != null && transactions.length == 0" class="col-xs-12 col-md-offset-2 col-md-8">
         <div class="table-responsive">

web-ui/package-lock.json

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, HostListener } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 
 import { BlockDetails } from '../../models/block';
@@ -8,6 +8,8 @@ import { BlocksService } from '../../services/blocks.service';
 import { ErrorService } from '../../services/error.service';
 import { PaginatedResult } from '../../models/paginated-result';
 
+import { getNumberOfRowsForScreen } from '../../utils';
+
 @Component({
   selector: 'app-block-details',
   templateUrl: './block-details.component.html',
@@ -19,7 +21,7 @@ export class BlockDetailsComponent implements OnInit {
   blockDetails: BlockDetails;
 
   // pagination
-  limit = 10;
+  limit = 30;
   transactions: Transaction[] = [];
 
   constructor(
@@ -28,6 +30,8 @@ export class BlockDetailsComponent implements OnInit {
     private errorService: ErrorService) { }
 
   ngOnInit() {
+    const height = this.getScreenSize();
+    this.limit = getNumberOfRowsForScreen(height);
     this.route.params.forEach(params => this.onQuery(params['query']));
   }
 
@@ -59,10 +63,15 @@ export class BlockDetailsComponent implements OnInit {
 
     this.blocksService
       .getTransactionsV2(this.blockhash, this.limit, lastSeenTxid)
-      .do(response => this.transactions = this.transactions.concat(response.data))
+      .do(response => this.transactions.push(...response.data))
       .subscribe();
   }
 
+  @HostListener('window:resize', ['$event'])
+  private getScreenSize(_?): number {
+    return window.innerHeight;
+  }
+
   private onError(response: any) {
     this.errorService.renderServerErrors(null, response);
   }