fix: show correct sync status

app/assets/javascripts/services/statusManager.ts

@@ -8,20 +8,13 @@ export class StatusManager {
   private statuses: FooterStatus[] = []
   private observers: StatusCallback[] = []
 
-  statusFromString(string: string) {
-    return {string: string};
-  }
-
   replaceStatusWithString(status: FooterStatus, string: string) {
     this.removeStatus(status);
     return this.addStatusFromString(string);
   }
 
   addStatusFromString(string: string) {
-    return this.addStatus(this.statusFromString(string));
-  }
-
-  addStatus(status: FooterStatus) {
+    const status = { string };
     this.statuses.push(status);
     this.notifyObservers();
     return status;
@@ -33,7 +26,20 @@ export class StatusManager {
     return undefined;
   }
 
-  getStatusString() {
+  addStatusObserver(callback: StatusCallback) {
+    this.observers.push(callback);
+    return () => {
+      removeFromArray(this.observers, callback);
+    }
+  }
+
+  private notifyObservers() {
+    for(const observer of this.observers) {
+      observer(this.getStatusString());
+    }
+  }
+
+  private getStatusString() {
     let result = '';
     this.statuses.forEach((status, index) => {
       if(index > 0) {
@@ -45,16 +51,4 @@ export class StatusManager {
     return result;
   }
 
-  notifyObservers() {
-    for(const observer of this.observers) {
-      observer(this.getStatusString());
-    }
-  }
-
-  addStatusObserver(callback: StatusCallback) {
-    this.observers.push(callback);
-    return () => {
-      removeFromArray(this.observers, callback);
-    }
-  }
 }

app/assets/javascripts/views/application/application_view.ts

@@ -118,7 +118,7 @@ class ApplicationViewCtrl extends PureViewCtrl {
       if (!this.completedInitialSync) {
         this.syncStatus = this.application!.getStatusService().replaceStatusWithString(
           this.syncStatus,
-          "Syncing..."
+          "Syncing…"
         );
       }
     } else if (eventName === ApplicationEvent.CompletedFullSync) {
@@ -203,9 +203,18 @@ class ApplicationViewCtrl extends PureViewCtrl {
         this.syncStatus = this.application!.getStatusService().removeStatus(this.syncStatus);
       }, 2000);
     } else if (stats.uploadTotalCount > 20) {
+      const completionPercentage = stats.uploadCompletionCount === 0
+        ? 0
+        : stats.uploadCompletionCount / stats.uploadTotalCount;
+
+      const stringPercentage = completionPercentage.toLocaleString(
+        undefined,
+        { style: 'percent' }
+      );
+
       this.uploadSyncStatus = this.application!.getStatusService().replaceStatusWithString(
         this.uploadSyncStatus,
-        `Syncing ${stats.uploadCompletionCount}/${stats.uploadTotalCount} items...`
+        `Syncing ${stats.uploadTotalCount} items (${stringPercentage} complete)`,
       );
     } else {
       if (this.syncStatus) {