implement when page visible custom pipe

src/app/services/polling.service.ts

@@ -1,7 +1,7 @@
 import {Injectable} from '@angular/core';
 import {HttpClient} from '@angular/common/http';
 import {fromEvent, Observable, timer} from 'rxjs';
-import {concatMapTo, map, repeatWhen, shareReplay, takeUntil} from 'rxjs/operators';
+import {concatMapTo, filter, map, repeatWhen, shareReplay, takeUntil} from 'rxjs/operators';
 
 @Injectable()
 export class PollingService {
@@ -11,7 +11,8 @@ export class PollingService {
   poll<T>(url: string, period: number): Observable<T> {
     return this.http.get<T>(url).pipe(
         pollWithPeriod(period),
-        whenOnline()
+        whenOnline(),
+        whenPageVisible(),
     );
   }
 }
@@ -39,3 +40,24 @@ const whenOnline = () => {
     );
   };
 };
+
+const whenPageVisible = () => {
+  const visibilityChange$ = fromEvent(document, 'visibilitychange').pipe(
+      shareReplay({refCount: true, bufferSize: 1})
+  );
+
+  const pageVisible$ = visibilityChange$.pipe(
+      filter(() => document.visibilityState === 'visible')
+  );
+
+  const pageHidden$ = visibilityChange$.pipe(
+      filter(() => document.visibilityState === 'hidden')
+  );
+
+  return <T>(source: Observable<T>) => {
+    return source.pipe(
+        takeUntil(pageHidden$),
+        repeatWhen(() => pageVisible$)
+    );
+  };
+};