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>
<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>
<section *ngIf="displayed" class="full-page-load-spinner">
<mat-spinner diameter="40"></mat-spinner>
<ng-content></ng-content>
</section>
<ng-container *ngIf="loadingService.isLoading$ | async">
<section class="full-page-load-section"></section>
<section class="full-page-load-spinner">
<mat-spinner diameter="40"></mat-spinner>
<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({
selector: 'redaction-full-page-loading-indicator',
@ -7,5 +8,5 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
changeDetection: ChangeDetectionStrategy.OnPush
})
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 { BehaviorSubject, Observable } from 'rxjs';
import { BehaviorSubject } from 'rxjs';
const MIN_LOADING_TIME = 300;
@ -7,16 +7,15 @@ const MIN_LOADING_TIME = 300;
providedIn: 'root'
})
export class LoadingService {
private readonly _loadingEvent = new BehaviorSubject(false);
private readonly _loadingEvent$ = new BehaviorSubject(false);
readonly isLoading$ = this._loadingEvent$.asObservable();
private _loadingStarted: number;
get isLoading$(): Observable<boolean> {
return this._loadingEvent.asObservable();
}
start(): void {
this._loadingEvent.next(true);
this._loadingStarted = new Date().getTime();
setTimeout(() => {
this._loadingEvent$.next(true);
this._loadingStarted = new Date().getTime();
});
}
stop(): void {
@ -36,7 +35,7 @@ export class LoadingService {
}
private _stop() {
setTimeout(() => this._loadingEvent.next(false));
setTimeout(() => this._loadingEvent$.next(false));
}
private _stopAfter(timeout: number) {