Marmelator/red-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1.4k Wiki Activity

fix loading service

Browse Source
This commit is contained in:
Dan Percic 2021-08-14 17:23:29 +03:00
parent d00c977746
commit 3d8a19289c
4 changed files with 19 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/red-ui/src/app/app.component.html
View File

@ -1,2 +1,2 @@
<router-outlet></router-outlet> <router-outlet></router-outlet>
<redaction-full-page-loading-indicator [displayed]="loadingService.isLoading$ | async"></redaction-full-page-loading-indicator> <redaction-full-page-loading-indicator></redaction-full-page-loading-indicator>

12
apps/red-ui/src/app/modules/shared/components/full-page-loading-indicator/full-page-loading-indicator.component.html
View File

@ -1,5 +1,7 @@
<section *ngIf="displayed" class="full-page-load-section"></section> <ng-container *ngIf="loadingService.isLoading$ | async">
<section *ngIf="displayed" class="full-page-load-spinner"> <section class="full-page-load-section"></section>
<mat-spinner diameter="40"></mat-spinner> <section class="full-page-load-spinner">
<ng-content></ng-content> <mat-spinner diameter="40"></mat-spinner>
</section> <ng-content></ng-content>
</section>
</ng-container>

5
apps/red-ui/src/app/modules/shared/components/full-page-loading-indicator/full-page-loading-indicator.component.ts
View File

@ -1,4 +1,5 @@
import { ChangeDetectionStrategy, Component, Input } from '@angular/core'; import { ChangeDetectionStrategy, Component } from '@angular/core';
import { LoadingService } from '@services/loading.service';
@Component({ @Component({
selector: 'redaction-full-page-loading-indicator', selector: 'redaction-full-page-loading-indicator',
@ -7,5 +8,5 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
changeDetection: ChangeDetectionStrategy.OnPush changeDetection: ChangeDetectionStrategy.OnPush
}) })
export class FullPageLoadingIndicatorComponent { export class FullPageLoadingIndicatorComponent {
@Input() displayed = false; constructor(readonly loadingService: LoadingService) {}
} }

17
apps/red-ui/src/app/services/loading.service.ts
View File

@ -1,5 +1,5 @@
import { Injectable } from '@angular/core'; import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs'; import { BehaviorSubject } from 'rxjs';
const MIN_LOADING_TIME = 300; const MIN_LOADING_TIME = 300;
@ -7,16 +7,15 @@ const MIN_LOADING_TIME = 300;
providedIn: 'root' providedIn: 'root'
}) })
export class LoadingService { export class LoadingService {
private readonly _loadingEvent = new BehaviorSubject(false); private readonly _loadingEvent$ = new BehaviorSubject(false);
readonly isLoading$ = this._loadingEvent$.asObservable();
private _loadingStarted: number; private _loadingStarted: number;
get isLoading$(): Observable<boolean> {
return this._loadingEvent.asObservable();
}
start(): void { start(): void {
this._loadingEvent.next(true); setTimeout(() => {
this._loadingStarted = new Date().getTime(); this._loadingEvent$.next(true);
this._loadingStarted = new Date().getTime();
});
} }
stop(): void { stop(): void {
@ -36,7 +35,7 @@ export class LoadingService {
} }
private _stop() { private _stop() {
setTimeout(() => this._loadingEvent.next(false)); setTimeout(() => this._loadingEvent$.next(false));
} }
private _stopAfter(timeout: number) { private _stopAfter(timeout: number) {