fix(watch): add spinner to watch page while querying remote server

Toolwatchapp · Nov 3, 2016 · cebdd82 · cebdd82
1 parent 0ed640e
commit cebdd82
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 7 deletions.
diff --git a/src/pages/watch/watch.html b/src/pages/watch/watch.html
@@ -82,23 +82,27 @@
 
     <div  class="group">
 
-      <div [hidden]="watchModel.id!==null">
+      <div  [hidden]="watchModel.id!==null">
         <button
+        [disabled]="submitAttempt"
         ion-button  
         color="primary" type="submit"> 
-        {{ 'add-watch' | translate }}
+        <span [hidden]="submitAttempt">{{ 'add-watch' | translate }}</span>
+        <ion-spinner [hidden]="!submitAttempt"></ion-spinner>
         </button>
       </div>
 
       <div [hidden]="watchModel.id===null">
-          <button ion-button color="accent" type="submit"
+          <button [disabled]="submitAttempt" ion-button color="accent" type="submit"
           > 
-          {{ 'update-watch' | translate }}
+          <span [hidden]="submitAttempt">{{ 'update-watch' | translate }}</span>
+          <ion-spinner [hidden]="!submitAttempt"></ion-spinner>
           </button>
 
-          <button ion-button color="danger"
+          <button [disabled]="submitAttempt" ion-button color="danger"
           (click)="onDelete()"> 
-          {{ 'delete-watch' | translate }}
+          <span [hidden]="submitAttempt">{{ 'delete-watch' | translate }}</span>
+          <ion-spinner [hidden]="!submitAttempt"></ion-spinner>
           </button>
       </div>
 

diff --git a/src/pages/watch/watch.scss b/src/pages/watch/watch.scss
@@ -21,6 +21,13 @@ ion-content#watch{
 		width: 100%;
 	}
 
+	ion-spinner * {
+	  width: 28px;
+	  height: 28px;
+	  stroke: white;
+	  fill: white;
+	}
+
 
 	input               {
 	  font-size:18px;

diff --git a/src/share b/src/share