add loading indication

app/src/pages/block-detail/block-detail.html

@@ -17,6 +17,7 @@
   <h1>Block # {{ block.height }}</h1>
   <p>BlockHash {{ block.hash }}</p>
   <h2>Summary</h2>
+  <div *ngIf="!loading">
     <p>Number of Transactions {{ block.tx.length }}</p>
     <p>Height {{ block.height }}</p>
     <p>Block Reward {{ block.reward }}</p>
@@ -30,4 +31,8 @@
     <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>

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