Infinite scroll replaces "load more" buttons.

frontend/src/app/components/transactions-list/transactions-list.component.html

@@ -8,7 +8,7 @@
       </ng-template>
     </div>
   </div>
-  <div class="header-bg box">
+  <div class="header-bg box" infiniteScroll [fromRoot]="true" [infiniteScrollContainer]="'body'" [infiniteScrollDistance]="2" [infiniteScrollUpDistance]="1.5" [infiniteScrollThrottle]="50" (scrolled)="onScroll()">
     <div class="row">
       <div class="col">
         <table class="table table-borderless smaller-text table-xs" style="margin: 0;">

frontend/src/app/components/transactions-list/transactions-list.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, ChangeDetectionStrategy, OnChanges, ChangeDetectorRef } from '@angular/core';
+import { Component, OnInit, Input, ChangeDetectionStrategy, OnChanges, ChangeDetectorRef, Output, EventEmitter } from '@angular/core';
 import { StateService } from '../../services/state.service';
 import { Observable, forkJoin } from 'rxjs';
 import { Block, Outspend, Transaction } from '../../interfaces/electrs.interface';
@@ -15,6 +15,8 @@ export class TransactionsListComponent implements OnInit, OnChanges {
   @Input() showConfirmations = false;
   @Input() transactionPage = false;
 
+  @Output() loadMore = new EventEmitter();
+
   latestBlock$: Observable<Block>;
   outspends: Outspend[] = [];
 
@@ -53,6 +55,10 @@ export class TransactionsListComponent implements OnInit, OnChanges {
       });
   }
 
+  onScroll() {
+    this.loadMore.emit();
+  }
+
   getTotalTxOutput(tx: any) {
     return tx.vout.map((v: any) => v.value || 0).reduce((a: number, b: number) => a + b);
   }