feat: loading spinner

Author: codediodeio

src/app/items/items-list/items-list.component.html

@@ -4,7 +4,7 @@ <h1>Items</h1>
   <item-detail [item]='item'></item-detail>
 </div>
 
-<loading-spinner></loading-spinner>
+<loading-spinner *ngIf="showSpinner"></loading-spinner>
 
 
 

src/app/items/items-list/items-list.component.ts

@@ -10,18 +10,16 @@ import { FirebaseListObservable } from "angularfire2";
 })
 export class ItemsListComponent implements OnInit {
 
-  public items: FirebaseListObservable<Item[]>;
+  items: FirebaseListObservable<Item[]>;
+
+  showSpinner: boolean = true;
+
 
   constructor(private itemSvc: ItemService) { }
 
   ngOnInit() {
     this.items = this.itemSvc.getItemsList({limitToLast: 5})
-  }
-
-
-  addEmptyItem() {
-    let item = new Item()
-    this.itemSvc.createItem(item)
+    this.items.subscribe(() => this.showSpinner = false)
   }
 
   deleteItems() {

src/app/items/shared/item.service.ts

@@ -17,7 +17,7 @@ export class ItemService {
   // Return an observable list with optional query
   // You will usually call this from OnInit in a component
   getItemsList(query={}): FirebaseListObservable<Item[]> {
-    this.items = this.db.list(this.basePath, {
+    this.items = this.db.list('/items', {
       query: query
     });
     return this.items

src/app/ui/loading-spinner/loading-spinner.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Input } from '@angular/core';
 
 @Component({
   selector: 'loading-spinner',
@@ -7,6 +7,7 @@ import { Component, OnInit } from '@angular/core';
 })
 export class LoadingSpinnerComponent implements OnInit {
 
+
   constructor() { }
 
   ngOnInit() {

src/app/uploads/uploads-list/uploads-list.component.html

@@ -4,6 +4,8 @@ <h3>File Uploads</h3>
   <upload-detail [upload]='upload'></upload-detail>
 </div>
 
+<loading-spinner *ngIf="showSpinner"></loading-spinner>
+
 <hr>
 
 <upload-form></upload-form>

src/app/uploads/uploads-list/uploads-list.component.ts

@@ -11,11 +11,13 @@ import { Upload } from '../shared/upload';
 export class UploadsListComponent implements OnInit {
 
   uploads: FirebaseListObservable<Upload[]>;
+  showSpinner: boolean = true;
 
   constructor(private upSvc: UploadService) { }
 
   ngOnInit() {
     this.uploads = this.upSvc.getUploads({limitToLast: 5})
+    this.uploads.subscribe(() => this.showSpinner = false)
   }