From c9a1b6b153275f433f58e72fedd6aca9a98e8ff4 Mon Sep 17 00:00:00 2001
From: Darren Nelsen <darren@bitpay.com>
Date: Wed, 16 Aug 2017 12:46:08 -0400
Subject: [PATCH] added spinners to transaction and address pages and
 transaction list component

---
 app/src/components/head-nav/head-nav.ts       |  2 +-
 .../transaction-list/transaction-list.html    | 21 +++--
 app/src/pages/address/address.html            | 76 ++++++++++---------
 app/src/pages/transaction/transaction.html    | 68 +++++++++--------
 4 files changed, 93 insertions(+), 74 deletions(-)

diff --git a/app/src/components/head-nav/head-nav.ts b/app/src/components/head-nav/head-nav.ts
index b3122b6..664e77e 100644
--- a/app/src/components/head-nav/head-nav.ts
+++ b/app/src/components/head-nav/head-nav.ts
@@ -139,7 +139,7 @@ export class HeadNavComponent {
     actionSheet.present();
   }
 
-  public toggleSearch() {
+  public toggleSearch(): void {
     this.showSearch = !this.showSearch;
   }
 }
diff --git a/app/src/components/transaction-list/transaction-list.html b/app/src/components/transaction-list/transaction-list.html
index 6620fc2..9c0a459 100644
--- a/app/src/components/transaction-list/transaction-list.html
+++ b/app/src/components/transaction-list/transaction-list.html
@@ -1,7 +1,14 @@
-<ion-grid>
-  <ion-row *ngFor="let tx of transactions.txs">
-    <ion-col col-12>
-      <transaction [tx]="tx"></transaction>
-    </ion-col>
-  </ion-row>
-</ion-grid>
+<div *ngIf="loading">
+  <ion-spinner name="crescent"></ion-spinner>
+</div>
+
+
+<div *ngIf="!loading">
+  <ion-grid>
+    <ion-row *ngFor="let tx of transactions.txs">
+      <ion-col col-12>
+        <transaction [tx]="tx"></transaction>
+      </ion-col>
+    </ion-row>
+  </ion-grid>
+</div>
diff --git a/app/src/pages/address/address.html b/app/src/pages/address/address.html
index 752120a..4dfc4d7 100644
--- a/app/src/pages/address/address.html
+++ b/app/src/pages/address/address.html
@@ -3,45 +3,51 @@
 </ion-header>
 
 <ion-content padding>
-  <h1>Address</h1>
-  <p class="ellipsis"><b>Address</b> {{ address.addrStr }}</p>
-  <p>{{ currency.getConversion(address.balance) }}</p>
+  <div *ngIf="loading">
+    <ion-spinner name="crescent"></ion-spinner>
+  </div>
 
-  <h2>Summary</h2>
+  <div *ngIf="!loading">
+    <h1>Address</h1>
+    <p class="ellipsis"><b>Address</b> {{ address.addrStr }}</p>
+    <p>{{ currency.getConversion(address.balance) }}</p>
 
-  <ion-list class="summary">
-    <ion-item>
-      Total Received
-      <span item-end>
-        {{ currency.getConversion(address.totalReceived) }}
-      </span>
-    </ion-item>
-    <ion-item>
-      Total Sent
-      <span item-end>
-        {{ currency.getConversion(address.totalSent) }}
-      </span>
-    </ion-item>
-    <ion-item>
-      Final Balance
-      <span item-end>
-        {{ currency.getConversion(address.balance) }}
-      </span>
-    </ion-item>
-    <ion-item>
-      No. Transactions
-      <span item-end>
-        {{ address.txApperances }}
-      </span>
-    </ion-item>
-  </ion-list>
+    <h2>Summary</h2>
 
-  <p text-center>
-    <qr-code [value]="address.addrStr" [size]="160"></qr-code>
-    <p>
+    <ion-list class="summary">
+      <ion-item>
+        Total Received
+        <span item-end>
+          {{ currency.getConversion(address.totalReceived) }}
+        </span>
+      </ion-item>
+      <ion-item>
+        Total Sent
+        <span item-end>
+          {{ currency.getConversion(address.totalSent) }}
+        </span>
+      </ion-item>
+      <ion-item>
+        Final Balance
+        <span item-end>
+          {{ currency.getConversion(address.balance) }}
+        </span>
+      </ion-item>
+      <ion-item>
+        No. Transactions
+        <span item-end>
+          {{ address.txApperances }}
+        </span>
+      </ion-item>
+    </ion-list>
 
-  <h2>Transactions</h2>
+    <p text-center>
+      <qr-code [value]="address.addrStr" [size]="160"></qr-code>
+      <p>
 
-  <transaction-list [queryType]="'address'" [queryValue]="addrStr"></transaction-list>
+        <h2>Transactions</h2>
+
+        <transaction-list [queryType]="'address'" [queryValue]="addrStr"></transaction-list>
+  </div>
 
 </ion-content>
diff --git a/app/src/pages/transaction/transaction.html b/app/src/pages/transaction/transaction.html
index bed9bd1..7f904dc 100644
--- a/app/src/pages/transaction/transaction.html
+++ b/app/src/pages/transaction/transaction.html
@@ -3,40 +3,46 @@
 </ion-header>
 
 <ion-content padding>
-  <h1>Transaction</h1>
-  <p class="ellipsis"><b>Transaction</b> {{ tx.txid }}</p>
+  <div *ngIf="loading">
+    <ion-spinner name="crescent"></ion-spinner>
+  </div>
 
-  <h2>Summary</h2>
+  <div *ngIf="!loading">
+    <h1>Transaction</h1>
+    <p class="ellipsis"><b>Transaction</b> {{ tx.txid }}</p>
 
-  <ion-list class="summary">
-    <ion-item>
-      Size
-      <span item-end>
-        {{ tx.size }} (bytes)
-      </span>
-    </ion-item>
-    <ion-item>
-      Received Time
-      <span item-end>
-        {{ tx.time * 1000 | date:'medium' }}
-      </span>
-    </ion-item>
-    <ion-item>
-      Mined Time
-      <span item-end>
-        {{ tx.blocktime * 1000 | date:'medium' }}
-      </span>
-    </ion-item>
-    <ion-item>
-      Included in Block
-      <span item-end>
-        <a (click)="goToBlock(tx.blockhash)">{{ tx.blockhash }}</a>
-      </span>
-    </ion-item>
-  </ion-list>
+    <h2>Summary</h2>
 
-  <h2>Details</h2>
+    <ion-list class="summary">
+      <ion-item>
+        Size
+        <span item-end>
+          {{ tx.size }} (bytes)
+        </span>
+      </ion-item>
+      <ion-item>
+        Received Time
+        <span item-end>
+          {{ tx.time * 1000 | date:'medium' }}
+        </span>
+      </ion-item>
+      <ion-item>
+        Mined Time
+        <span item-end>
+          {{ tx.blocktime * 1000 | date:'medium' }}
+        </span>
+      </ion-item>
+      <ion-item>
+        Included in Block
+        <span item-end>
+          <a (click)="goToBlock(tx.blockhash)">{{ tx.blockhash }}</a>
+        </span>
+      </ion-item>
+    </ion-list>
 
-  <transaction [tx]="tx"></transaction>
+    <h2>Details</h2>
+
+    <transaction [tx]="tx"></transaction>
+  </div>
 
 </ion-content>