Within this service/state:
export class SpinnerService {
public throttleTime: number = 10;
public isLoading$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
constructor() {}
public showLoader(): void {
this.isLoading$.next(true);
}
public hideLoader(): void {
this.isLoading$.next(false);
}
public get isLoadingAPIVal$(): Observable<boolean> {
return this.isLoading$.pipe(throttleTime(this.throttleTime), shareReplay());
}
}
This is where the logic for displaying the app loading animation is stored. The value can be set and retrieved in multiple components simultaneously or with delays. For example, setting isLoading$ to true in one component, and then after 0.004 seconds in another. It works smoothly except for one scenario.
Sometimes, I need to reset isLoading$ to false if its last true value was set over 20 seconds ago.
How can I ensure it is set to false after being true for more than 20 seconds?
I attempted the following approach:
constructor() {
this.isLoading$
.pipe(
filter((val) => !!val),
timeout(20000),
)
.subscribe(() => {
this.isLoading$.next(false);
});
}
However, it seems like this method is not working as expected and takes the first true value instead.