Infinite scroll replaces "load more" buttons.

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