fix displaying indicator when navigation start

src/lib/error/error.service.ts

@@ -1,8 +1,8 @@
 import { Injectable } from '@angular/core';
-import { Subject } from 'rxjs';
+import { fromEvent, merge, Observable, Subject } from 'rxjs';
 import { HttpErrorResponse, HttpStatusCode } from '@angular/common/http';
 import { LoadingService } from '../loading';
-import { filter, map, skip } from 'rxjs/operators';
+import { delay, filter, map, mapTo } from 'rxjs/operators';
 import { NavigationStart, Router } from '@angular/router';
 import { shareLast } from '../utils';
 
@@ -19,18 +19,21 @@ const isOffline = (error?: HttpErrorResponse) => !!error && OFFLINE_STATUSES.inc
 @Injectable({ providedIn: 'root' })
 export class ErrorService {
     readonly error$ = new Subject<HttpErrorResponse | undefined>();
-    readonly offlineError$ = this.error$.pipe(
+    readonly offline$: Observable<Event>;
-        skip(1),
+    readonly online$: Observable<Event>;
-        filter(error => !error || isOffline(error)),
-        map(error => new Event(error ? 'offline' : 'online')),
-        shareLast(),
-    );
     readonly serverError$ = this.error$.pipe(filter(error => !error || !isOffline(error)));
+    readonly connectionStatus$: Observable<string | undefined>;
+    private readonly _online$ = new Subject();
 
     constructor(private readonly _loadingService: LoadingService, private readonly _router: Router) {
         _router.events.pipe(filter(event => event instanceof NavigationStart)).subscribe(() => {
             this.clear();
         });
+        this.offline$ = this._offline();
+        this.online$ = this._online();
+        const removeIndicator$ = this.online$.pipe(delay(3000), mapTo(undefined));
+
+        this.connectionStatus$ = merge(this.online$, this.offline$, removeIndicator$).pipe(map(event => event?.type));
     }
 
     set(error: HttpErrorResponse): void {
@@ -38,7 +41,19 @@ export class ErrorService {
         this.error$.next(error);
     }
 
+    setOnline(): void {
+        this._online$.next();
+    }
+
     clear(): void {
         this.error$.next();
     }
+
+    private _offline() {
+        return merge(fromEvent(window, 'offline'), this.error$.pipe(filter(isOffline), mapTo(new Event('offline')), shareLast()));
+    }
+
+    private _online() {
+        return merge(fromEvent(window, 'online'), this._online$.pipe(mapTo(new Event('online')))).pipe(shareLast());
+    }
 }

src/lib/error/full-page-error/full-page-error.component.html

@@ -1,4 +1,9 @@
-<div *ngIf="connectionStatus$ | async as status" [@animateOpenClose]="status" [ngClass]="status" class="indicator flex-align-items-center">
+<div
+    *ngIf="errorService.connectionStatus$ | async as status"
+    [@animateOpenClose]="status"
+    [ngClass]="status"
+    class="indicator flex-align-items-center"
+>
     <span [translate]="translations[status]"></span>
 </div>
 

src/lib/error/full-page-error/full-page-error.component.ts

@@ -2,9 +2,6 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { IconButtonTypes } from '../../buttons';
 import { ErrorService } from '../error.service';
 import { animate, state, style, transition, trigger } from '@angular/animations';
-import { fromEvent, merge, Observable } from 'rxjs';
-import { delay, filter, map, mapTo } from 'rxjs/operators';
-import { shareLast } from '../../utils';
 import { connectionStatusTranslations } from '../../translations/connection-status-translations';
 
 @Component({
@@ -24,17 +21,8 @@ import { connectionStatusTranslations } from '../../translations/connection-stat
 export class FullPageErrorComponent {
     translations = connectionStatusTranslations;
     readonly iconButtonTypes = IconButtonTypes;
-    readonly connectionStatus$: Observable<string | undefined>;
 
-    constructor(readonly errorService: ErrorService) {
+    constructor(readonly errorService: ErrorService) {}
-        const offline$ = merge(fromEvent(window, 'offline'), this.errorService.offlineError$);
-        const online$ = fromEvent(window, 'online').pipe(shareLast());
-
-        const errorGone$ = this.errorService.offlineError$.pipe(filter(error => !error));
-        const removeIndicator$ = merge(online$, errorGone$).pipe(delay(3000), mapTo(undefined));
-
-        this.connectionStatus$ = merge(online$, offline$, removeIndicator$).pipe(map(event => event?.type));
-    }
 
     reload(): void {
         window.location.reload();

src/lib/error/server-error-interceptor.ts

@@ -60,7 +60,7 @@ export class ServerErrorInterceptor implements HttpInterceptor {
             backoffOnServerError(this._maxRetries || 3),
             tap(() => {
                 if (this._urlsWithError.has(req.url)) {
-                    this._errorService.clear();
+                    this._errorService.setOnline();
                     this._urlsWithError.delete(req.url);
                 }
             }),