feat(core): show sync state at doc info (#7244)

packages/common/infra/src/livedata/livedata.ts

@@ -345,7 +345,7 @@ export class LiveData<T = unknown>
     duration: number,
     { trailing = true, leading = true }: ThrottleConfig = {}
   ) {
-    return LiveData.from(
+    return LiveData.from<T>(
       this.pipe(throttleTime(duration, undefined, { trailing, leading })),
       null as any
     );

packages/common/infra/src/sync/doc/index.ts

@@ -53,12 +53,25 @@ export class DocEngine {
     const localState$ = this.localPart.docState$(docId);
     const remoteState$ = this.remotePart?.docState$(docId);
     return LiveData.computed(get => {
-      const local = get(localState$);
-      const remote = remoteState$ ? get(remoteState$) : null;
+      const localState = get(localState$);
+      const remoteState = remoteState$ ? get(remoteState$) : null;
+      if (remoteState) {
+        return {
+          syncing: remoteState.syncing,
+          saving: localState.syncing,
+          retrying: remoteState.retrying,
+          ready: localState.ready,
+          errorMessage: remoteState.errorMessage,
+          serverClock: remoteState.serverClock,
+        };
+      }
       return {
-        ready: local.ready,
-        saving: local.syncing,
-        syncing: local.syncing || remote?.syncing,
+        syncing: localState.syncing,
+        saving: localState.syncing,
+        ready: localState.ready,
+        retrying: false,
+        errorMessage: null,
+        serverClock: null,
       };
     });
   }

packages/common/infra/src/sync/doc/remote.ts

@@ -60,6 +60,9 @@ export interface RemoteEngineState {
 
 export interface RemoteDocState {
   syncing: boolean;
+  retrying: boolean;
+  serverClock: number | null;
+  errorMessage: string | null;
 }
 
 export class DocEngineRemotePart {
@@ -87,20 +90,22 @@ export class DocEngineRemotePart {
     new Observable(subscribe => {
       const next = () => {
         if (!this.status.syncing) {
+          // if syncing = false, jobMap is empty
           subscribe.next({
             total: this.status.docs.size,
             syncing: this.status.docs.size,
             retrying: this.status.retrying,
             errorMessage: this.status.errorMessage,
           });
+        } else {
+          const syncing = this.status.jobMap.size;
+          subscribe.next({
+            total: this.status.docs.size,
+            syncing: syncing,
+            retrying: this.status.retrying,
+            errorMessage: this.status.errorMessage,
+          });
         }
-        const syncing = this.status.jobMap.size;
-        subscribe.next({
-          total: this.status.docs.size,
-          syncing: syncing,
-          retrying: this.status.retrying,
-          errorMessage: this.status.errorMessage,
-        });
       };
       next();
       return this.statusUpdatedSubject$.subscribe(() => {
@@ -123,6 +128,9 @@ export class DocEngineRemotePart {
             syncing:
               !this.status.connectedDocs.has(docId) ||
               this.status.jobMap.has(docId),
+            serverClock: this.status.serverClocks.get(docId),
+            retrying: this.status.retrying,
+            errorMessage: this.status.errorMessage,
           });
         };
         next();
@@ -130,7 +138,7 @@ export class DocEngineRemotePart {
           if (updatedId === true || updatedId === docId) next();
         });
       }),
-      { syncing: false }
+      { syncing: false, retrying: false, errorMessage: null, serverClock: null }
     );
   }
 
@@ -326,6 +334,7 @@ export class DocEngineRemotePart {
   readonly actions = {
     updateServerClock: (docId: string, serverClock: number) => {
       this.status.serverClocks.setIfBigger(docId, serverClock);
+      this.statusUpdatedSubject$.next(docId);
     },
     addDoc: (docId: string) => {
       if (!this.status.docs.has(docId)) {
@@ -359,7 +368,6 @@ export class DocEngineRemotePart {
     // eslint-disable-next-line no-constant-condition
     while (true) {
       try {
-        this.status.retrying = false;
         await this.retryLoop(signal);
       } catch (err) {
         if (signal?.aborted) {
@@ -448,6 +456,10 @@ export class DocEngineRemotePart {
         }),
       ]);
 
+      // reset retrying flag after connected with server
+      this.status.retrying = false;
+      this.statusUpdatedSubject$.next(true);
+
       throwIfAborted(signal);
       disposes.push(
         await this.server.subscribeAllDocs(({ docId, data, serverClock }) => {