Delaying Loading Indicators Using CSS Animations In Angular 9.0.0-next.14

// Import the core angular services.
import { Component } from "@angular/core";

// ----------------------------------------------------------------------------------- //
// ----------------------------------------------------------------------------------- //

@Component({
	selector: "app-root",
	styleUrls: [ "./app.component.less" ],
	template:
	`
		<p>
			Toggle Container with delay:
			<a (click)="toggle( 0 )" class="toggle">0ms</a>,
			<a (click)="toggle( 300 )" class="toggle">300ms</a>,
			<a (click)="toggle( 500 )" class="toggle">500ms</a>,
			<a (click)="toggle( 1000 )" class="toggle">1,000ms</a>
		</p>

		<section *ngIf="isShowingContainer">

			<!--
				The [delay] property determines the number of MS to wait before the
				loading indicator is renderered. By pushing this logic into the loader,
				it keeps the calling logic simple and binary (ie, show / don't show). The
				underlying THEORY here is that the precense of the loading indicator can
				increase the perceived delay when the latency is relatively low.
			-->
			<app-loader
				*ngIf="isLoading"
				[delay]="delay"
				class="loader">
			</app-loader>

			<div *ngIf="( ! isLoading )">
				From the corner of the gym where the BIG men train,<br />
				Through a cloud of chalk and the midst of pain<br />
				Where the big iron rides high and threatens lives,<br />
				Where the noise is made with big forty-fives,<br />
				A deep voice bellowed as he wrapped his knees,<br />
				A very big man with legs like trees.<br />
				Laughing as he snatched another plate from the stack<br />
				Chalking his hands and monstrous back,<br />
				said, "Boy, stop lying and don't say you've forgotten,<br />
				The trouble with you is you ain't been SQUATTIN'."<br />
				&mdash;DALE CLARK, 1983
			</div>

		</section>
	`
})
export class AppComponent {

	public delay: number;
	public isLoading: boolean;
	public isShowingContainer: boolean;

	// I initialize the app component.
	constructor() {

		this.delay = 0;
		this.isLoading = false;
		this.isShowingContainer = false;

	}

	// ---
	// PUBLIC METHODS.
	// ---

	// I toggle the visibility of the data container, which triggers a "network" request
	// using the given delay for the loading indicator.
	public toggle( newDelay: number ) : void {

		this.delay = newDelay;

		// Toggle the container closed.
		if ( this.isShowingContainer ) {

			this.isShowingContainer = false;
			this.isLoading = false;

		// Toggle the container opened.
		} else {

			this.isShowingContainer = true;
			this.isLoading = true;

			this.getData().then(
				() => {

					this.isLoading = false;

				}
			);

		}

	}

	// ---
	// PRIVATE METHODS.
	// ---

	// I simulate a network request with a random amount of latency.
	private getData( maxLatency: number = 1000 ) : Promise<void> {

		var promise = new Promise<void>(
			( resolve ) => {

				var latency = Math.floor( Math.random() * maxLatency );

				console.log( "Data Fetch Latency:", latency, "ms" );
				setTimeout( resolve, latency );
				
			}
		);

		return( promise );

	}

}

// Import the core angular services.
import { Component } from "@angular/core";

// ----------------------------------------------------------------------------------- //
// ----------------------------------------------------------------------------------- //

@Component({
	selector: "app-loader",
	inputs: [ "delay" ],
	host: {
		"[style.animation-delay.ms]": "delay"
	},
	styleUrls: [ "./loader.component.less" ],
	template:
	`
		<div class="indicator">
			Loading....
		</div>
	`
})
export class LoaderComponent {

	public delay: number = 0;

}

:host {
	animation-delay: 0ms ; // This will be overridden in the HTML template.
	animation-duration: 250ms ;
	animation-fill-mode: both ;
	animation-name: loader-component-keyframes ;
	display: flex ;
}

// The opacity property is going to be used to drive the visibility of the loader. It
// will start out as transparent (ie, not visible); and then, the animation-delay
// property defined in the component template (in conjunction with the keyframes) will
// determine how long to wait before the indicator is rendered for the user.
// --
// NOTE: Using animation-fill-mode of "both" causes the 0% state to be applied to the
// component when it is first rendered.
@keyframes loader-component-keyframes {
	0% {
		opacity: 0.0 ;
	}

	100% {
		opacity: 1.0 ;
	}
}

.indicator {
	flex: 0 0 auto ;
	margin: auto auto auto auto ; // Center vertically and horizontally.
}