Loader

Implement a loader.component.tsfile:
import { Component } from '@angular/core';
import { Observable, debounce, timer, mergeMap } from 'rxjs';
import { ObserveService, ObserveStatus } from 'ngx-crud';
import { Store } from 'ngx-crud/observe/observe.interface';
​
@Component(
{
	selector: 'app-loader',
	styleUrls:
	[
		'./loader.component.scss'
	],
	templateUrl: './loader.component.html'
})
export class LoaderComponent implements OnInit
{
	observeStatus : Observable<ObserveStatus> = this.getObserveStatus();
​
	constructor(protected observeService : ObserveService)
	{
	}
​
	protected getObserveStatus() : Observable<ObserveStatus>
	{
		return this.observeService
			.observeAll()
			.pipe(
				mergeMap(value => (value.at(1) as Store).status),
				debounce(observeStatus => timer(observeStatus === 'COMPLETED' ? 2000 : 0))
			);
	}
}
Implement a loader.component.htmlfile: 
<div *ngIf="observeStatus | async as observeStatus"
	[class.is-started]="observeStatus === 'STARTED'"
	[class.is-completed]="observeStatus === 'COMPLETED'"
	[class.is-errored]="observeStatus === 'ERRORED'"
	class="component-loader"></div>
Implement a loader.compontent.scss file:
.component-loader
{
	&.is-started
	{
	}
​
	&.is-completed
	{
	}
​
	&.is-errored
	{
	}
}
Components
Effects
Last modified 4mo ago