feature(insight): load more txs

Micah Riggan · Micah Riggan · commit 8286fe10f6aa · 2019-01-08T11:44:13.000-05:00
Instead of loading them all into the dom at once, load 10, and then exponentially load more
diff --git a/packages/insight-previous/src/components/transaction-list/transaction-list.html b/packages/insight-previous/src/components/transaction-list/transaction-list.html
@@ -5,10 +5,15 @@
 
 <div *ngIf="!loading">
   <ion-grid>
-    <ion-row *ngFor="let tx of transactions">
-      <ion-col col-12>
+    <ion-row *ngFor="let tx of transactions; let i = index">
+      <ion-col col-12 *ngIf="i < limit">
         <transaction [tx]="tx"></transaction>
       </ion-col>
     </ion-row>
+    <ion-row *ngIf="limit < transactions.length">
+      <ion-col col-12 text-center (click)="loadMore()">
+        <a>Load More</a>
+      </ion-col>
+    </ion-row>
   </ion-grid>
 </div>
diff --git a/packages/insight-previous/src/components/transaction-list/transaction-list.ts b/packages/insight-previous/src/components/transaction-list/transaction-list.ts
@@ -15,6 +15,9 @@ export class TransactionListComponent implements OnInit {
   @Input()
   public transactions?: any = [];
 
+  limit = 10;
+  chunkSize = 100;
+
   constructor(private txProvider: TxsProvider) {}
 
   ngOnInit(): void {
@@ -33,4 +36,9 @@ export class TransactionListComponent implements OnInit {
       this.loading = false;
     }
   }
+
+  loadMore() {
+    this.limit += this.chunkSize;
+    this.chunkSize *= 2;
+  }
 }

Original file line number	Diff line number	Diff line change
`@@ -15,6 +15,9 @@ export class TransactionListComponent implements OnInit {`
`15`	`15`	`@Input()`
`16`	`16`	`public transactions?: any = [];`
`17`	`17`
	`18`	`+ limit = 10;`
	`19`	`+ chunkSize = 100;`
	`20`	`+`
`18`	`21`	`constructor(private txProvider: TxsProvider) {}`
`19`	`22`
`20`	`23`	`ngOnInit(): void {`
`@@ -33,4 +36,9 @@ export class TransactionListComponent implements OnInit {`
`33`	`36`	`this.loading = false;`
`34`	`37`	`}`
`35`	`38`	`}`
	`39`	`+`
	`40`	`+ loadMore() {`
	`41`	`+ this.limit += this.chunkSize;`
	`42`	`+ this.chunkSize *= 2;`
	`43`	`+ }`
`36`	`44`	`}`