From ccc5f8868af12aecffad80d5aa9dc22019adf5ae Mon Sep 17 00:00:00 2001
From: Darren Nelsen <darren@bitpay.com>
Date: Wed, 26 Jul 2017 16:05:10 -0400
Subject: [PATCH] add loading indication

---
 app/src/pages/block-detail/block-detail.html | 31 ++++++++++++--------
 app/src/pages/block-detail/block-detail.ts   | 13 ++++++--
 2 files changed, 28 insertions(+), 16 deletions(-)

diff --git a/app/src/pages/block-detail/block-detail.html b/app/src/pages/block-detail/block-detail.html
index 0c532c5..3a9e9e9 100644
--- a/app/src/pages/block-detail/block-detail.html
+++ b/app/src/pages/block-detail/block-detail.html
@@ -17,17 +17,22 @@
   <h1>Block # {{ block.height }}</h1>
   <p>BlockHash {{ block.hash }}</p>
   <h2>Summary</h2>
-  <p>Number of Transactions {{ block.tx.length }}</p>
-  <p>Height {{ block.height }}</p>
-  <p>Block Reward {{ block.reward }}</p>
-  <p>Timestamp {{ block.time }}</p>
-  <p>Mined by</p>
-  <p>Merkle Root {{ block.merkleroot }}</p>
-  <p>Previous Block <a (click)="goToPreviousBlock()">{{ block.height - 1 }}</a></p>
-  <p>Difficulty {{ block.difficulty }}</p>
-  <p>Bits {{ block.bits }}</p>
-  <p>Size (bytes) {{ block.size }}</p>
-  <p>Version {{ block.version }}</p>
-  <p>Nonce {{ block.nonce }}</p>
-  <p>Next Block <a (click)="goToNextBlock()">{{ block.height + 1 }}</a></p>
+  <div *ngIf="!loading">
+    <p>Number of Transactions {{ block.tx.length }}</p>
+    <p>Height {{ block.height }}</p>
+    <p>Block Reward {{ block.reward }}</p>
+    <p>Timestamp {{ block.time }}</p>
+    <p>Mined by</p>
+    <p>Merkle Root {{ block.merkleroot }}</p>
+    <p>Previous Block <a (click)="goToPreviousBlock()">{{ block.height - 1 }}</a></p>
+    <p>Difficulty {{ block.difficulty }}</p>
+    <p>Bits {{ block.bits }}</p>
+    <p>Size (bytes) {{ block.size }}</p>
+    <p>Version {{ block.version }}</p>
+    <p>Nonce {{ block.nonce }}</p>
+    <p>Next Block <a (click)="goToNextBlock()">{{ block.height + 1 }}</a></p>
+  </div>
+  <div *ngIf="loading">
+    <p>Loading...</p>
+  </div>
 </ion-content>
diff --git a/app/src/pages/block-detail/block-detail.ts b/app/src/pages/block-detail/block-detail.ts
index 56a617e..868ad92 100644
--- a/app/src/pages/block-detail/block-detail.ts
+++ b/app/src/pages/block-detail/block-detail.ts
@@ -18,6 +18,7 @@ import { Http } from '@angular/http';
 })
 export class BlockDetailPage {
 
+  public loading: boolean = true;
   private blockHash: string;
   public block: any = {
     tx: []
@@ -25,7 +26,6 @@ export class BlockDetailPage {
 
   constructor(public navCtrl: NavController, private http: Http, public navParams: NavParams) {
     this.blockHash = navParams.get('blockHash');
-    console.log('blockHash is', this.blockHash);
 
     let apiPrefix: string = 'http://localhost:3001/insight-api/';
 
@@ -37,6 +37,9 @@ export class BlockDetailPage {
       },
       (err) => {
         console.log('err is', err);
+      },
+      () => {
+        this.loading = false;
       }
     );
   }
@@ -45,13 +48,17 @@ export class BlockDetailPage {
     console.log('ionViewDidLoad BlockDetailPage');
   }
 
-  public goToPreviousBlock() {
+  public ionViewWillLeave(): void {
+    this.loading = true;
+  }
+
+  public goToPreviousBlock(): void {
     this.navCtrl.push('block-detail', {
       'blockHash': this.block.previousblockhash
     });
   }
 
-  public goToNextBlock() {
+  public goToNextBlock(): void {
     this.navCtrl.push('block-detail', {
       'blockHash': this.block.nextblockhash
     });