Skip to content

Commit 82edffc

Browse files
Ismaestroiramos
Ismaestro
authored and
iramos
committed
feat(loading states): improve loading states
1 parent 4e775d6 commit 82edffc

17 files changed

+184
-106
lines changed

‎README.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,16 @@
2222

2323
[![angular-example-app](http://thumbsnap.com/i/aIpN07i3.png?0812)](http://angularexampleapp.com/)
2424

25+
## Table of Contents
26+
* [Getting started](#getting-started)
27+
* [Usage](#usage)
28+
* [Features](#features)
29+
* [Docker](#docker)
30+
* [TravisCI](#travis-ci)
31+
* [Contributing](#contributing)
32+
* [License](#license)
33+
* [Contributors](#contributors)
34+
2535
## Getting started
2636

2737
**Warning**

‎angular.json‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -56,8 +56,7 @@
5656
]
5757
},
5858
"scripts": [
59-
"src/assets/js/modernizr.js",
60-
"src/assets/js/gtm.js"
59+
"src/assets/js/modernizr.js"
6160
]
6261
},
6362
"configurations": {
@@ -108,8 +107,7 @@
108107
"tsConfig": "src/tsconfig.spec.json",
109108
"karmaConfig": "src/karma.conf.js",
110109
"scripts": [
111-
"src/assets/js/modernizr.js",
112-
"src/assets/js/gtm.js"
110+
"src/assets/js/modernizr.js"
113111
],
114112
"styles": [
115113
{

‎src/app/modules/heroes/pages/heroes-list-page/heroes-list-page.component.html‎

Lines changed: 28 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,21 @@
22
<h2 class="header__title">{{ 'heroesList' | translate }}</h2>
33
<div>
44
<mat-list id="loading-list" *ngIf="!heroes">
5-
<mat-list-item *ngFor="let i of [1,2]">
5+
<mat-list-item *ngFor="let i of [1,2,3,4,5,6,7,8]">
66
<img mat-list-avatar src="assets/images/heroes/default.png">
7-
<h3 mat-line>.</h3>
8-
<p mat-line><span>.</span></p>
7+
<h3 mat-line>
8+
<app-loading-placeholder [width]="'150px'" [height]="'0.9rem'"></app-loading-placeholder>
9+
</h3>
10+
<p mat-line>
11+
<app-loading-placeholder [width]="'100px'" [height]="'0.9rem'"></app-loading-placeholder>
12+
</p>
913
<div class="hero-actions">
14+
<app-loading-placeholder [width]="'30px'" [height]="'0.9rem'"></app-loading-placeholder>
15+
1016
<mat-icon class="icon__like--grey">favorite</mat-icon>
1117
</div>
1218
</mat-list-item>
13-
<div id="loading-spinner">
14-
<app-spinner></app-spinner>
15-
</div>
1619
</mat-list>
17-
1820
<mat-list>
1921
<mat-list-item *ngFor="let hero of heroes" [@fadeInOut]>
2022
<img *ngIf="hero.default" class="cp"
@@ -44,7 +46,21 @@ <h3 mat-line [class.cp]="hero.default" (click)="seeHeroDetails(hero);"> {{hero.n
4446
</div>
4547
<div id="right" [@fadeInOut]>
4648
<h2 class="header__title">{{ 'createHero' | translate }}</h2>
47-
<div>
49+
<div id="form-loading" *ngIf="!heroes">
50+
<form>
51+
<div class="input-container">
52+
<app-loading-placeholder [height]="'2rem'"></app-loading-placeholder>
53+
</div>
54+
<div class="input-container">
55+
<app-loading-placeholder [height]="'2rem'"></app-loading-placeholder>
56+
</div>
57+
58+
<button mat-raised-button [disabled]="true">
59+
{{'create' | translate}}
60+
</button>
61+
</form>
62+
</div>
63+
<div *ngIf="heroes">
4864
<form [formGroup]="newHeroForm" #form="ngForm" ngxScrollToFirstInvalid
4965
(ngSubmit)="createNewHero(newHeroForm.value)" autocomplete="on">
5066
<mat-form-field class="input-container">
@@ -72,7 +88,10 @@ <h2 class="header__title">{{ 'createHero' | translate }}</h2>
7288

7389
<div id="heroes-json">
7490
<h2 class="header__title">{{ 'firstTwoHeroesById' | translate }}</h2>
75-
<pre>{{heroes | slice:0:2 | json}}</pre>
91+
<pre *ngIf="!heroes">
92+
<app-loading-placeholder [height]="'300px'"></app-loading-placeholder>
93+
</pre>
94+
<pre *ngIf="heroes">{{heroes | slice:0:2 | json}}</pre>
7695
</div>
7796
</div>
7897
<div class="clear"></div>

‎src/app/modules/heroes/pages/heroes-list-page/heroes-list-page.component.scss‎

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,15 @@
22
@import "../../../../styles/colors";
33

44
#loading-list {
5-
h3, p {
6-
color: $light-grey;
7-
background: $light-grey;
8-
}
9-
105
p {
11-
margin-top: 0.5rem;
6+
margin-top: 0.2rem;
127
}
138
}
149

15-
#loading-spinner {
16-
position: relative;
10+
#form-loading {
11+
.input-container {
12+
margin: 0.5rem 0;
13+
}
1714
}
1815

1916
#left {

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

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,17 @@
11
<mat-card id="loading-card" class="hero-card">
22
<mat-card-header>
33
<div mat-card-avatar class="hero-header__image"></div>
4-
<mat-card-title>.</mat-card-title>
5-
<mat-card-subtitle>.</mat-card-subtitle>
4+
<mat-card-title>
5+
<app-loading-placeholder [width]="'200px'" [height]="'1rem'"></app-loading-placeholder>
6+
</mat-card-title>
7+
<mat-card-subtitle>
8+
<app-loading-placeholder [width]="'160px'" [height]="'1rem'"></app-loading-placeholder>
9+
</mat-card-subtitle>
610
<div class="flex-spacer"></div>
711
<div class="hero-actions">
812
<mat-icon class="icon__like--grey">favorite</mat-icon>
913
</div>
1014
</mat-card-header>
11-
<mat-progress-bar [color]="'warn'" [mode]="'indeterminate'"></mat-progress-bar>
12-
<app-spinner></app-spinner>
13-
<img mat-card-image src="assets/images/loading-hero.jpg">
15+
<app-loading-placeholder [height]="'486px'"></app-loading-placeholder>
1416
</mat-card>
17+

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
@import "../../../styles/colors";
2+
3+
.hero-header__image {
4+
background: $grey;
5+
}

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@ import {Component, OnInit} from '@angular/core';
22

33
@Component({
44
selector: 'app-hero-loading',
5-
templateUrl: './hero-loading.component.html'
5+
templateUrl: './hero-loading.component.html',
6+
styleUrls: ['./hero-loading.component.scss']
67
})
78
export class HeroLoadingComponent implements OnInit {
89

‎src/app/shared/components/loading-placeholder/loading-placeholder.component.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<div class="placeholder-animation"
2+
[ngStyle]="{'height': height, 'width': width}">
3+
</div>

‎src/app/shared/components/loading-placeholder/loading-placeholder.component.scss‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
@import "../../../styles/colors";
2+
3+
@keyframes placeHolderShimmer{
4+
0%{
5+
background-position: -468px 0
6+
}
7+
100%{
8+
background-position: 468px 0
9+
}
10+
}
11+
12+
.placeholder-animation {
13+
animation-duration: 1.25s;
14+
animation-fill-mode: forwards;
15+
animation-iteration-count: infinite;
16+
animation-name: placeHolderShimmer;
17+
animation-timing-function: linear;
18+
background: darkgray;
19+
background: linear-gradient(to right, $light-grey 10%, #dddddd 18%, #eeeeee 33%);
20+
position: relative;
21+
background-size: 1000px 100px
22+
}

‎src/app/shared/components/loading-placeholder/loading-placeholder.component.spec.ts‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import {async, ComponentFixture, TestBed} from '@angular/core/testing';
2+
3+
import {LoadingPlaceholderComponent} from './loading-placeholder.component';
4+
5+
fdescribe('LoadingPlaceholderComponent', () => {
6+
let component: LoadingPlaceholderComponent;
7+
let fixture: ComponentFixture<LoadingPlaceholderComponent>;
8+
9+
beforeEach(async(() => {
10+
TestBed.configureTestingModule({
11+
declarations: [LoadingPlaceholderComponent]
12+
})
13+
.compileComponents();
14+
}));
15+
16+
beforeEach(() => {
17+
fixture = TestBed.createComponent(LoadingPlaceholderComponent);
18+
component = fixture.componentInstance;
19+
fixture.detectChanges();
20+
});
21+
22+
it('should create', () => {
23+
expect(component).toBeTruthy();
24+
});
25+
});

0 commit comments

Comments
 (0)