Added loading spinner

src/app/animations/loading-spinner/loading-spinner.component.css

@@ -0,0 +1,34 @@
+.spinner {
+ position: fixed;
+ left: 50%;
+ right: 50%;
+ width: 60px;
+ height: 60px;
+ margin-top: 40px;
+ margin-left: -30px;
+
+ background-color: rgba(255, 255, 255, 0.4);
+
+ border-radius: 100%; 
+ -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
+ animation: sk-scaleout 1.0s infinite ease-in-out;
+ }
+
+ @-webkit-keyframes sk-scaleout {
+ 0% { -webkit-transform: scale(0) }
+ 100% {
+ -webkit-transform: scale(1.0);
+ opacity: 0;
+ }
+ }
+
+ @keyframes sk-scaleout {
+ 0% { 
+ -webkit-transform: scale(0);
+ transform: scale(0);
+ } 100% {
+ -webkit-transform: scale(1.0);
+ transform: scale(1.0);
+ opacity: 0;
+ }
+ }

src/app/animations/loading-spinner/loading-spinner.component.html

@@ -0,0 +1 @@
+<div class="spinner"></div>

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

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+ selector: 'loading-spinner',
+ templateUrl: './loading-spinner.component.html',
+ styleUrls: ['./loading-spinner.component.css']
+})
+export class LoadingSpinnerComponent implements OnInit {
+
+ constructor() { }
+
+ ngOnInit() {
+ }
+
+}

src/app/app.component.ts

@@ -1,11 +1,11 @@
 import { Component } from '@angular/core';
-import { animView } from './animations/transitions.animation'; // Anim file
+import { animView } from './animations/transitions.animation'; // Anim file for transitions
 
 @Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
- animations: [animView] // add our animations
+ animations: [animView] // add our transition animations
 })
 export class AppComponent {
  title = 'app';

src/app/app.module.ts

@@ -11,13 +11,15 @@ import { AppComponent } from './app.component';
 import { CustomerComponent } from './customer/customer.component';
 import { CustomerDetailsComponent } from './customer-details/customer-details.component';
 import { AddCustomerComponent } from './add-customer/add-customer.component';
+import { LoadingSpinnerComponent } from './animations/loading-spinner/loading-spinner.component';
 
 @NgModule({
  declarations: [
  AppComponent,
  CustomerComponent,
  CustomerDetailsComponent,
- AddCustomerComponent
+ AddCustomerComponent,
+ LoadingSpinnerComponent
  ],
  imports: [
  BrowserModule,

src/app/customer-details/customer-details.component.html

@@ -1,4 +1,7 @@
 <h5><span class="badge badge-light">ID: {{customer._id}}</span> -> {{customer.firstname}}</h5>
+
+<loading-spinner *ngIf="showSpinner"></loading-spinner>
+
 <div [hidden]="submitted" [@transitionView]>
  <form #detailCustomerForm="ngForm">
  <div class="form-group">

src/app/customer-details/customer-details.component.ts

@@ -18,6 +18,7 @@ export class CustomerDetailsComponent implements OnInit {
  submitted = false;
  message: string;
  hobbyInputVal: string;
+ showSpinner: boolean = true; // Loading spinner stuff
 
  constructor(
  private customerService: CustomerService,
@@ -28,9 +29,12 @@ export class CustomerDetailsComponent implements OnInit {
  ngOnInit(): void {
  const id = this.route.snapshot.paramMap.get('id');
  this.hobbyInputVal = '';
- // Get the customer via id in url from server
+ // Get the customer details via their id in url from server
  this.customerService.getCustomer(id)
- .subscribe(customer => this.customer = customer);
+ .subscribe(customer => {
+ this.customer = customer;
+ this.showSpinner = false; // Hide spinner
+ });
  }
 
  deleteHobby(hobby): void {

src/app/customer/customer.component.html

@@ -1,4 +1,7 @@
 <h3>All Heroes</h3>
+
+<loading-spinner *ngIf="showSpinner"></loading-spinner>
+
 <div *ngFor="let cust of customers; let rowIndex=index" [@transitionView]>
- <a [routerLink]="['/customers', cust._id]"><span class="badge badge-dark">{{rowIndex + 1}}</span> -> {{cust.firstname}}</a>
+ <a [routerLink]="['/customers', cust._id]"><span class="badge badge-dark">{{rowIndex + 1}}</span> -> {{cust.firstname}} {{cust.lastname}}</a>
 </div>

src/app/customer/customer.component.ts

@@ -1,3 +1,4 @@
+//** This shows list of all 'customers' **//
 import { Component, OnInit } from '@angular/core';
 
 import { Customer } from '../customer';
@@ -17,6 +18,9 @@ export class CustomerComponent implements OnInit {
 
  constructor(private customerService: CustomerService) {}
 
+ // Loading spinner stuff
+ showSpinner: boolean = true;
+
  ngOnInit(): void {
  this.getCustomers();
  }
@@ -26,7 +30,8 @@ export class CustomerComponent implements OnInit {
  .subscribe(
  customers => {
  console.log(customers);
- this.customers = customers
+ this.customers = customers;
+ this.showSpinner = false; // Hide spinner
  }
  );
  }