feat(loading card): add hero loading state

Author: iramos

src/app/core/pages/home/home.page.html

@@ -2,11 +2,20 @@
   <div fxFlex="10" fxFlex.gt-sm="20"></div>
   <div fxFlex="90" fxFlex.gt-sm="80">
     <h1 class="header__title">{{'topHeroes' | translate}}</h1>
-    <mat-progress-spinner *ngIf="!heroes"
-                          class="progress__spinner"
-                          [color]="'primary'"
-                          [mode]="'indeterminate'">
-    </mat-progress-spinner>
+    <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>
     <div id="heroes-list" *ngIf="heroes">
       <ng-container *ngFor="let hero of heroes">
         <mat-card class="hero-card">

src/app/core/pages/home/home.page.scss

@@ -1,14 +1,12 @@
 @import "mixins";
-
-#heroes-list {
-  margin: 2rem;
-}
+@import "colors";
 
 .hero-header__image, mat-card-title, mat-card-subtitle, .mat-card-image {
   cursor: pointer;
 }
 
 .hero-card {
+  margin-bottom: 2rem;
   @include push--auto(2rem);
 }
 
@@ -25,4 +23,4 @@
   .mat-card {
     margin-bottom: 2rem;
   }
-}
+}

src/app/core/pages/home/home.page.ts

@@ -7,6 +7,7 @@ import {AppConfig} from '../../../config/app.config';
 @Component({
   selector: 'app-home',
   templateUrl: './home.page.html',
+  styleUrls: ['./home.page.scss']
 })
 
 export class HomePage implements OnInit {

src/app/shared/components/spinner/spinner.component.css

@@ -0,0 +1,33 @@
+.spinner {
+  width: 40px;
+  height: 40px;
+  background-color: #333;
+
+  border-radius: 100%;
+  -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
+  animation: sk-scaleout 1.0s infinite ease-in-out;
+
+  transform: translate(-50%, -50%);
+  position: absolute;
+  left: 50%;
+  top: 48%;
+}
+
+@-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/shared/components/spinner/spinner.component.html

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

src/app/shared/components/spinner/spinner.component.spec.ts

@@ -0,0 +1,23 @@
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+import {SpinnerComponent} from './spinner.component';
+
+describe('SpinnerComponent', () => {
+  let component: SpinnerComponent;
+  let fixture: ComponentFixture<SpinnerComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [SpinnerComponent]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SpinnerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/shared/components/spinner/spinner.component.ts

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

src/app/shared/shared.module.ts

@@ -4,6 +4,7 @@ import {TranslateModule} from '@ngx-translate/core';
 import {FlexLayoutModule} from '@angular/flex-layout';
 import {NgxExampleLibraryModule} from '@ismaestro/ngx-example-library';
 import {CommonModule} from '@angular/common';
+import {SpinnerComponent} from './components/spinner/spinner.component';
 
 @NgModule({
   imports: [
@@ -13,12 +14,16 @@ import {CommonModule} from '@angular/common';
     TranslateModule,
     NgxExampleLibraryModule
   ],
+  declarations: [
+    SpinnerComponent
+  ],
   exports: [
     CommonModule,
     MaterialModule,
     FlexLayoutModule,
     TranslateModule,
-    NgxExampleLibraryModule
+    NgxExampleLibraryModule,
+    SpinnerComponent
   ]
 })
 

src/app/styles/global.scss

@@ -9,6 +9,10 @@ a, .cp {
   cursor: pointer;
 }
 
+h1, h2 {
+  margin-bottom: 2rem;
+}
+
 .header__title {
   text-align: center;
   font-size: 1.5rem;
@@ -36,6 +40,11 @@ a, .cp {
   cursor: pointer;
 }
 
+.icon__like--grey {
+  color: $grey;
+  cursor: pointer;
+}
+
 .hero-header__image {
   background-size: cover;
 }
@@ -131,3 +140,34 @@ snack-bar-container {
     background-color: white !important;
   }
 }
+
+#loading-card {
+  .hero-header__image, .hero__image {
+    background: $grey;
+  }
+
+  .mat-card-header-text {
+    width: 30%;
+  }
+
+  mat-card-title, mat-card-subtitle {
+    background: $grey;
+    color: $grey;
+  }
+
+  .mat-progress-bar {
+    width: calc(100% + 48px);
+    margin: 0 -24px -1px -24px;
+    .mat-progress-bar-fill, .mat-progress-bar-buffer {
+      background-color: $light-grey;
+    }
+    .mat-progress-bar-fill::after {
+      background-color: $grey;
+    }
+
+    @media (max-width: 600px) {
+      width: calc(100% + 34px);
+      margin: 0px -24px -17px -17px;
+    }
+  }
+}