feat(hero loading): add as a component

Author: Ismaestro

src/app/modules/heroes/pages/hero-detail-page/hero-detail-page.component.html

@@ -1,10 +1,8 @@
 <h1 class="header__title">{{'heroDetail' | translate}}</h1>
-<mat-progress-spinner *ngIf="!hero"
-                      class="progress__spinner"
-                      [color]="'primary'"
-                      [mode]="'indeterminate'">
-</mat-progress-spinner>
-<div id="heroe-detail" *ngIf="hero" [@fadeInOut]>
+<div class="container" *ngIf="!hero">
+  <app-hero-loading></app-hero-loading>
+</div>
+<div class="container" *ngIf="hero" [@fadeInOut]>
     <ng-container>
         <app-hero-card [hero]="hero"></app-hero-card>
         <div id="hero-json">

src/app/modules/heroes/pages/hero-detail-page/hero-detail-page.component.scss

@@ -1,6 +1,6 @@
 @import "mixins";
 
-#heroe-detail {
+.container {
   width: 65%;
   @include push--auto();
   margin-top: 2rem;
@@ -12,7 +12,7 @@ button {
 }
 
 @media (max-width: 600px) {
-  #heroe-detail {
+  .container {
     width: 90%;
   }
-}
+}

src/app/shared/components/hero-loading/hero-loading.component.html

@@ -0,0 +1,14 @@
+<mat-card id="loading-card" class="hero-card">
+  <mat-card-header>
+    <div mat-card-avatar class="hero-header__image"></div>
+    <mat-card-title>.</mat-card-title>
+    <mat-card-subtitle>.</mat-card-subtitle>
+    <div class="flex-spacer"></div>
+    <div class="hero-actions">
+      <mat-icon class="icon__like--grey">favorite</mat-icon>
+    </div>
+  </mat-card-header>
+  <mat-progress-bar [color]="'warn'" [mode]="'indeterminate'"></mat-progress-bar>
+  <app-spinner></app-spinner>
+  <img mat-card-image src="assets/images/loading-hero.jpg">
+</mat-card>

src/app/shared/components/hero-loading/hero-loading.component.scss

@@ -0,0 +1,39 @@
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+import {HeroLoadingComponent} from './hero-loading.component';
+import {TestsModule} from '../../modules/tests.module';
+import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
+import {APP_BASE_HREF} from '@angular/common';
+import {TranslateModule} from '@ngx-translate/core';
+import {APP_CONFIG, AppConfig} from '../../../configs/app.config';
+
+describe('HeroLoadingComponent', () => {
+  let component: HeroLoadingComponent;
+  let fixture: ComponentFixture<HeroLoadingComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        TestsModule,
+        TranslateModule.forRoot()
+      ],
+      declarations: [
+        HeroLoadingComponent
+      ],
+      providers: [
+        {provide: APP_CONFIG, useValue: AppConfig},
+        {provide: APP_BASE_HREF, useValue: '/'},
+      ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HeroLoadingComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/shared/components/hero-loading/hero-loading.component.spec.ts

@@ -0,0 +1,16 @@
+import {Component, OnInit} from '@angular/core';
+
+@Component({
+  selector: 'app-hero-loading',
+  templateUrl: './hero-loading.component.html',
+  styleUrls: ['./hero-loading.component.scss']
+})
+export class HeroLoadingComponent implements OnInit {
+
+  constructor() {
+  }
+
+  ngOnInit() {
+  }
+
+}

src/app/shared/components/hero-loading/hero-loading.component.ts

@@ -2,20 +2,7 @@
   <div fxFlex="10" fxFlex.gt-sm="20"></div>
   <div fxFlex="90" fxFlex.gt-sm="80">
     <h1 class="header__title">{{'topHeroes' | translate}}</h1>
-    <mat-card id="loading-card" class="hero-card" *ngIf="!heroes">
-      <mat-card-header>
-        <div mat-card-avatar class="hero-header__image"></div>
-        <mat-card-title>.</mat-card-title>
-        <mat-card-subtitle>.</mat-card-subtitle>
-        <div class="flex-spacer"></div>
-        <div class="hero-actions">
-          <mat-icon class="icon__like--grey">favorite</mat-icon>
-        </div>
-      </mat-card-header>
-      <mat-progress-bar [color]="'warn'" [mode]="'indeterminate'"></mat-progress-bar>
-      <app-spinner></app-spinner>
-      <img mat-card-image src="assets/images/loading-hero.jpg">
-    </mat-card>
+    <app-hero-loading *ngIf="!heroes"></app-hero-loading>
     <div id="heroes-list" *ngIf="heroes" [@fadeInOut]>
       <ng-container *ngFor="let hero of heroes">
         <app-hero-card [hero]="hero"></app-hero-card>

src/app/shared/pages/home-page/home-page.component.html

@@ -15,6 +15,7 @@ import {HeroCardComponent} from './components/hero-card/hero-card.component';
 import {ScrollToFirstInvalidDirective} from './directives/scroll-to-first-invalid.directive';
 import {NgxExampleLibraryModule} from '@ismaestro/ngx-example-library';
 import {WebStorageModule} from 'ngx-store';
+import { HeroLoadingComponent } from './components/hero-loading/hero-loading.component';
 
 @NgModule({
   imports: [
@@ -35,6 +36,7 @@ import {WebStorageModule} from 'ngx-store';
     FooterComponent,
     SpinnerComponent,
     HeroCardComponent,
+    HeroLoadingComponent,
     ScrollToFirstInvalidDirective
   ],
   exports: [
@@ -49,6 +51,7 @@ import {WebStorageModule} from 'ngx-store';
     FooterComponent,
     SpinnerComponent,
     HeroCardComponent,
+    HeroLoadingComponent,
     ScrollToFirstInvalidDirective
   ]
 })