initial codebase

src/app/shared/index.ts

@@ -0,0 +1,2 @@
+export * from './shared.module';
+export * from './loader/loader.component';

src/app/shared/loader/loader.component.html

@@ -0,0 +1,4 @@
+<div [hidden]="!isLoading" class="text-xs-center">
+  <i class="fas fa-cog fa-spin fa-3x"></i> <span>{{message}}</span>
+</div>
+

src/app/shared/loader/loader.component.scss

@@ -0,0 +1,3 @@
+.fa {
+  vertical-align: middle;
+}

src/app/shared/loader/loader.component.spec.ts

@@ -0,0 +1,65 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LoaderComponent } from './loader.component';
+
+describe('LoaderComponent', () => {
+  let component: LoaderComponent;
+  let fixture: ComponentFixture<LoaderComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+        declarations: [LoaderComponent]
+      })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LoaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should not be visible by default', () => {
+    // Arrange
+    const element = fixture.nativeElement;
+    const div = element.querySelectorAll('div')[0];
+
+    // Assert
+    expect(div.getAttribute('hidden')).not.toBeNull();
+  });
+
+  it('should be visible when app is loading', () => {
+    // Arrange
+    const element = fixture.nativeElement;
+    const div = element.querySelectorAll('div')[0];
+
+    // Act
+    fixture.componentInstance.isLoading = true;
+    fixture.detectChanges();
+
+    // Assert
+    expect(div.getAttribute('hidden')).toBeNull();
+  });
+
+  it('should not display a message by default', () => {
+    // Arrange
+    const element = fixture.nativeElement;
+    const span = element.querySelectorAll('span')[0];
+
+    // Assert
+    expect(span.innerText).toBe('');
+  });
+
+  it('should display specified message', () => {
+    // Arrange
+    const element = fixture.nativeElement;
+    const span = element.querySelectorAll('span')[0];
+
+    // Act
+    fixture.componentInstance.message = 'testing';
+    fixture.detectChanges();
+
+    // Assert
+    expect(span.innerText).toBe('testing');
+  });
+});

src/app/shared/loader/loader.component.ts

@@ -0,0 +1,17 @@
+import { Component, OnInit, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-loader',
+  templateUrl: './loader.component.html',
+  styleUrls: ['./loader.component.scss']
+})
+export class LoaderComponent implements OnInit {
+
+  @Input() isLoading = false;
+  @Input() message: string;
+
+  constructor() { }
+
+  ngOnInit() { }
+
+}

src/app/shared/shared.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { LoaderComponent } from './loader/loader.component';
+
+@NgModule({
+  imports: [
+    CommonModule
+  ],
+  declarations: [
+    LoaderComponent
+  ],
+  exports: [
+    LoaderComponent
+  ]
+})
+export class SharedModule { }