Infinite scroll replaces "load more" buttons.

frontend/package.json

@@ -25,6 +25,7 @@
     "bootstrap": "^4.4.1",
     "chartist": "^0.11.4",
     "clipboard": "^2.0.4",
+    "ngx-infinite-scroll": "^8.0.1",
     "qrcode": "^1.4.4",
     "rxjs": "~6.5.3",
     "tlite": "^0.1.9",

frontend/src/app/app.module.ts

@@ -4,6 +4,7 @@ import { HttpClientModule } from '@angular/common/http';
 import { ReactiveFormsModule } from '@angular/forms';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { NgbButtonsModule } from '@ng-bootstrap/ng-bootstrap';
+import { InfiniteScrollModule } from 'ngx-infinite-scroll';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './components/app/app.component';
@@ -80,6 +81,7 @@ import { AudioService } from './services/audio.service';
     ReactiveFormsModule,
     BrowserAnimationsModule,
     NgbButtonsModule,
+    InfiniteScrollModule,
   ],
   providers: [
     ElectrsApiService,

frontend/src/app/components/address/address.component.html

@@ -42,14 +42,13 @@
 
     <h2><ng-template [ngIf]="transactions?.length">{{ transactions?.length || '?' }} of </ng-template>{{ txCount }} transactions</h2>
 
-    <app-transactions-list [transactions]="transactions" [showConfirmations]="true"></app-transactions-list>
+    <app-transactions-list [transactions]="transactions" [showConfirmations]="true" (loadMore)="loadMore()"></app-transactions-list>
 
     <div class="text-center">
       <ng-template [ngIf]="isLoadingTransactions">
         <div class="spinner-border"></div>
         <br><br>
       </ng-template>
-      <button *ngIf="!isLoadingTransactions && totalConfirmedTxCount && loadedConfirmedTxCount < totalConfirmedTxCount" type="button" class="btn btn-primary" (click)="loadMore()">Load more</button>
     </div>
 
   </ng-template>

frontend/src/app/components/address/address.component.ts

@@ -153,6 +153,9 @@ export class AddressComponent implements OnInit, OnDestroy {
   }
 
   loadMore() {
+    if (this.isLoadingTransactions || !this.totalConfirmedTxCount || this.loadedConfirmedTxCount >= this.totalConfirmedTxCount) {
+      return;
+    }
     this.isLoadingTransactions = true;
     this.electrsApiService.getAddressTransactionsFromHash$(this.address.address, this.lastTransactionTxId)
       .subscribe((transactions: Transaction[]) => {

frontend/src/app/components/block/block.component.html

@@ -65,14 +65,13 @@
 
     <br>
 
-    <app-transactions-list [transactions]="transactions"></app-transactions-list>
+    <app-transactions-list [transactions]="transactions" (loadMore)="loadMore()"></app-transactions-list>
 
     <div class="text-center">
       <ng-template [ngIf]="isLoadingTransactions">
         <div class="spinner-border"></div>
         <br><br>
       </ng-template>
-      <button *ngIf="transactions?.length && transactions?.length !== block.tx_count" type="button" class="btn btn-primary" (click)="loadMore()">Load more</button>
     </div>
 
   </ng-template>

frontend/src/app/components/block/block.component.ts

@@ -96,6 +96,10 @@ export class BlockComponent implements OnInit {
   }
 
   loadMore() {
+    if (this.isLoadingTransactions || !this.transactions.length || this.transactions.length === this.block.tx_count) {
+      return;
+    }
+
     this.isLoadingTransactions = true;
     this.electrsApiService.getBlockTransactions$(this.block.id, this.transactions.length)
       .subscribe((transactions) => {

frontend/src/app/components/latest-blocks/latest-blocks.component.html

@@ -1,4 +1,4 @@
-<table class="table table-borderless">
+<table class="table table-borderless" [fromRoot]="true" [infiniteScrollContainer]="'body'" infiniteScroll [infiniteScrollDistance]="1.5" [infiniteScrollUpDistance]="1.5" [infiniteScrollThrottle]="50" (scrolled)="loadMore()">
   <thead>
     <th style="width: 210px;">Height</th>
     <th class="d-none d-md-block" style="width: 210px;">Timestamp</th>
@@ -32,8 +32,3 @@
     </ng-template>
   </tbody>
 </table>
-
-<div class="text-center">
-  <br>
-  <button *ngIf="blocks.length" [disabled]="isLoading" type="button" class="btn btn-primary" (click)="loadMore()">Load more</button>
-</div>

frontend/src/app/components/time-since/time-since.component.ts

@@ -31,7 +31,7 @@ export class TimeSinceComponent implements OnInit, OnDestroy {
   calculate() {
     const seconds = Math.floor((+new Date() - +new Date(this.time * 1000)) / 1000);
     if (seconds < 60) {
-      return '< 1 min';
+      return '< 1 minute';
     }
     const intervals = {
         year: 31536000,

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);
   }

frontend/yarn.lock

@@ -5738,6 +5738,13 @@ neo-async@^2.5.0, neo-async@^2.6.0, neo-async@^2.6.1:
   resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.1.tgz#ac27ada66167fa8849a6addd837f6b189ad2081c"
   integrity sha512-iyam8fBuCUpWeKPGpaNMetEocMt364qkCsfL9JuhjXX6dRnguRVOfk2GZaDpPjcOKiiXCPINZC1GczQ7iTq3Zw==
 
+ngx-infinite-scroll@^8.0.1:
+  version "8.0.1"
+  resolved "https://registry.yarnpkg.com/ngx-infinite-scroll/-/ngx-infinite-scroll-8.0.1.tgz#95b9d7e51f8ed5ee6821889b4e4e3cfe8ddb5838"
+  integrity sha512-YpgkTPDNT7UCEp0GRX178V1nF+M2slCPJ2TX3CpvPZb5AR99JYwj/fNivcue5lN51oUaTySEG27qjVU73vKhjw==
+  dependencies:
+    opencollective-postinstall "^2.0.2"
+
 nice-try@^1.0.4:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366"
@@ -6086,6 +6093,11 @@ open@7.0.0:
   dependencies:
     is-wsl "^2.1.0"
 
+opencollective-postinstall@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/opencollective-postinstall/-/opencollective-postinstall-2.0.2.tgz#5657f1bede69b6e33a45939b061eb53d3c6c3a89"
+  integrity sha512-pVOEP16TrAO2/fjej1IdOyupJY8KDUM1CvsaScRbw6oddvpQoOfGk4ywha0HKKVAD6RkW4x6Q+tNBwhf3Bgpuw==
+
 opn@^5.5.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/opn/-/opn-5.5.0.tgz#fc7164fab56d235904c51c3b27da6758ca3b9bfc"