SSR zone macrotask utilities, solve tx page initial state

frontend/src/app/services/websocket.service.ts

@@ -59,6 +59,7 @@ export class WebsocketService {
 
       const theInitData = this.transferState.get<any>(initData, null);
       if (theInitData) {
+        this.stateService.isLoadingWebSocket$.next(false);
         this.handleResponse(theInitData.body);
         this.startSubscription(false, true);
       } else {

frontend/src/app/services/zone-shim.service.ts

@@ -0,0 +1,14 @@
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ZoneService {
+
+  constructor() { }
+
+  wrapObservable<T>(obs: Observable<T>): Observable<T> {
+    return obs;
+  }
+}

frontend/src/app/services/zone.service.ts

@@ -0,0 +1,60 @@
+import { ApplicationRef, Injectable, NgZone } from '@angular/core';
+import { Observable, Subscriber } from 'rxjs';
+
+// global Zone object provided by zone.js
+declare const Zone: any;
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ZoneService {
+
+  constructor(
+    private ngZone: NgZone,
+    private appRef: ApplicationRef,
+  ) { }
+
+  wrapObservable<T>(obs: Observable<T>): Observable<T> {
+    return new Observable((subscriber: Subscriber<T>) => {
+      let task: any;
+
+      this.ngZone.run(() => {
+        task = Zone.current.scheduleMacroTask('wrapObservable', () => {}, {}, () => {}, () => {});
+      });
+
+      const subscription = obs.subscribe(
+        value => {
+          subscriber.next(value);
+          if (task) {
+            this.ngZone.run(() => {
+              this.appRef.tick();
+            });
+            task.invoke();
+          }
+        },
+        err => {
+          subscriber.error(err);
+          if (task) {
+            this.appRef.tick();
+            task.invoke();
+          }
+        },
+        () => {
+          subscriber.complete();
+          if (task) {
+            this.appRef.tick();
+            task.invoke();
+          }
+        }
+      );
+
+      return () => {
+        subscription.unsubscribe();
+        if (task) {
+          this.appRef.tick();
+          task.invoke();
+        }
+      };
+    });
+  }
+}