#37 and LUSHDigital/lrpi_player#137 - error message is now displayed …

…instead of an infinitely spinning wheel (#40)

src/app/app.component.css

@@ -10,8 +10,8 @@ html {
     font-size: 140%;
 }
 
-.pair-button:hover {
-    cursor: pointer;
+.pair-button:hover, .home-button:hover {
+    cursor: pointer; 
 }
 
 p.slave-prompt {
@@ -21,4 +21,9 @@ p.slave-prompt {
 .pair-button button {
     margin-left: 0.3em;
     font-size: 110%;
+}
+
+.home-button {
+    float: right;
+    padding-right: 1em;
 }

src/app/app.component.html

@@ -15,5 +15,4 @@
     <p class="slave-prompt">
         <i>(its IP address is {{masterIp}})</i>
     </p>
-
 </ng-template>

src/app/pages/track-selector/track-selector.component.ts

@@ -89,7 +89,6 @@ export class TrackSelectorComponent implements OnInit {
         console.log('In the playlist processor');
 
         let data: any = d;
-        this.loading = false;
 
         console.log('tracks: ', data, ' length: ', data.length);
 
@@ -98,6 +97,7 @@ export class TrackSelectorComponent implements OnInit {
 
         if (data.length === undefined) {
           this.errorResponse['message'] = 'Syncing may not have completed yet. Alternatively, is the usb stick plugged in?'
+          this.loading = false;
           this.serverData = null;
           return;
         }
@@ -122,6 +122,7 @@ export class TrackSelectorComponent implements OnInit {
         }
 
         console.log('playlist? : ', isPlaylist);
+        this.loading = false; 
 
         this.serverData = of(
           data
@@ -131,6 +132,7 @@ export class TrackSelectorComponent implements OnInit {
       (err: any) => {
         console.log('error', err);
         this.errorResponse = err;
+        this.loading = false;
         this.errorResponse['message'] = 'Something is wrong...'
         this.router.navigate([`/tracks`]);
       }