change text on fallback message when api data not available

src/app/timeline-viewer/timeline-viewer.component.html

@@ -105,7 +105,7 @@
     </ng-template>
   </p-scrollPanel>
 </div>
-<ng-template #elseDataFallback>
-  API temporarily unavailable.
+<ng-template [style]="{ display: 'flex' }" #elseDataFallback>
+  <div>Thanks for visiting, take a deep breath and try again in a moment.</div>
   <button (click)="reload()">Click here to reload</button>
 </ng-template>

src/app/timeline-viewer/timeline-viewer.component.ts

@@ -45,14 +45,13 @@ export class TimelineViewerComponent {
   commentsAvailable: boolean;
   comments: Comment[];
   isSmallScreen: boolean | undefined;
+  isLoading: boolean;
   constructor(private slackerNewsApi: SlackerNewsApiService) {
+    this.isLoading = true;
     this.stories = [];
     this.comments = [];
     this.dataAvailable = false;
     this.commentsAvailable = false;
-  }
-
-  ngOnInit() {
     this.reload();
   }
 
@@ -72,7 +71,6 @@ export class TimelineViewerComponent {
       })
       .catch((e) => {
         this.dataAvailable = false;
-        console.log("catch");
         console.log(e);
       });
     this.slackerNewsApi
@@ -85,7 +83,6 @@ export class TimelineViewerComponent {
       })
       .catch((e) => {
         this.commentsAvailable = false;
-        console.log("catch");
         console.log(e);
       });
   }