Add syncing indicator while changes are ongoing #25

Syncing icon contributed by @giovannicaligaris

app/core/account.js

@@ -101,6 +101,7 @@ class Account extends EventEmitter {
     if (this.sync) {
       await this.sync.erase();
       this.sync = null;
+      globals.updateSyncing(false);
     }
     if (this.id) {
       await globals.db.remove({_id: this.id});
@@ -140,6 +141,7 @@ class Account extends EventEmitter {
   }
 
   watchChanges(syncObject) {
+    syncObject.on('syncing', syncing => globals.updateSyncing(syncing));
     syncObject.on('filesChanged', (changes) => this.emit("filesChanged", changes));
   }
 }

app/core/sync.js

@@ -38,6 +38,8 @@ class Sync extends EventEmitter {
     this.closed = false;
     this.savedTime = 0;
     this.changesSinceSave = 0;
+    this.handlingRemoteChange = false;
+    this.handlingLocalChange = false;
 
     this.watcher = new LocalWatcher(this);
     this.initWatcher();
@@ -46,6 +48,52 @@ class Sync extends EventEmitter {
     this.load();
   }
 
+  set handlingLocalChange(value) {
+    if (this.handlingLocalChange === value) {
+      return;
+    }
+    this._handlingLocalChange = value;
+    console.log("local change", value, this.syncing || this.handlingLocalChange || this.handlingRemoteChange);
+    this.emit("syncing", this.syncing || this.handlingLocalChange || this.handlingRemoteChange);
+    this.notifyChanges();
+  }
+
+  set handlingRemoteChange(value) {
+    if (this.handlingRemoteChange === value) {
+      return;
+    }
+    this._handlingRemoteChange = value;
+    console.log("remote change", value, this.syncing || this.handlingLocalChange || this.handlingRemoteChange);
+    this.emit("syncing", this.syncing || this.handlingLocalChange || this.handlingRemoteChange);
+    this.notifyChanges();
+  }
+
+  set syncing(value) {
+    if (this.syncing === value) {
+      return;
+    }
+    this._syncing = value;
+    console.log("syncing", this.handlingChanges);
+    this.emit("syncing", this.handlingChanges);
+    this.notifyChanges();
+  }
+
+  get syncing() {
+    return this._syncing;
+  }
+
+  get handlingRemoteChange() {
+    return this._handlingRemoteChange;
+  }
+
+  get handlingLocalChange() {
+    return this._handlingLocalChange;
+  }
+
+  get handlingChanges () {
+    return this.syncing || this.handlingLocalChange || this.handlingRemoteChange;
+  }
+
   get running() {
     return "id" in this;
   }
@@ -183,6 +231,7 @@ class Sync extends EventEmitter {
     } catch (err) {
       log("Error when watching changes...");
       this.watchingChanges = false;
+      this.handlingRemoteChange = false;
 
       /* For the unhandledRejection handler */
       err.syncObject = this;
@@ -202,13 +251,16 @@ class Sync extends EventEmitter {
   async handleChanges() {
 
     while((this.changesToExecute||[]).length > 0 && !this.closed) {
+      this.handlingRemoteChange = true;
+
       let nextChange = this.changesToExecute.shift();
       if (await this.handleChange(nextChange)) {
         await this.save();
       } else {
         this.changesSinceSave += 1;
       }
     }
+    this.handlingRemoteChange = false;
 
     /* Notify user of changes */
     this.notifyChanges();
@@ -293,8 +345,8 @@ class Sync extends EventEmitter {
   }
 
   async notifyChanges() {
-    if (Date.now() - this.lastChangesUpdated < 3000) {
-      //Give time for other changes to happen, in order to group them all
+    //Give time for other changes to happen, in order to group them all
+    if (this.handlingChanges) {
       return;
     }
     if (!deepEqual({}, this.lastChanges)) {
@@ -961,13 +1013,21 @@ class Sync extends EventEmitter {
       return;
     }
 
-    while (this.queued.length > 0 && !this.closed) {
-      let f = this.queued[0];
-      debug("Awaiting function end--->");
-      await f();
-      this.queued.shift();
-      debug("<---Function ended");
+    try {
+      while (this.queued.length > 0 && !this.closed) {
+        this.handlingLocalChange = true;
+        let f = this.queued[0];
+        debug("Awaiting function end--->");
+        await f();
+        this.queued.shift();
+        debug("<---Function ended");
+      }
+    } catch (err) {
+      this.handlingLocalChange = false;
+      throw err;
     }
+
+    this.handlingLocalChange = false;
     debug("Queue end");
   }
 
@@ -1015,6 +1075,7 @@ class Sync extends EventEmitter {
       this.loading = false;
     } catch (err) {
       this.loading = false;
+      this.handlingRemoteChange = false;
       throw err;
     }
   }

config/globals.js

@@ -11,6 +11,7 @@ class Globals extends EventEmitter {
     this.secret = "did-JgyKIPUtVU2J5Hi2a2ES";
     this.port = process.env.port || 16409;
     this.connected = true;
+    this.syncing = false;
   }
 
   updateConnectivity(isConnected) {
@@ -22,6 +23,16 @@ class Globals extends EventEmitter {
     this.connected = isConnected;
     this.emit("connectivity", isConnected);
   }
+
+  updateSyncing(syncing) {
+    if (this.syncing === syncing) {
+      return false;
+    }
+
+    console.log("Updated syncing status");
+    this.syncing = syncing;
+    this.emit("syncing", syncing);
+  }
 }
 
 module.exports = new Globals();

main.js

@@ -9,8 +9,9 @@ const core = require('./app/core');
 //Actual backend
 const backend = require('./app/backend');
 
-let logo = path.join(__dirname, 'public', 'logo.png');
-let logoGrey = path.join(__dirname, 'public', 'logo-grey.png');
+const logo = path.join(__dirname, 'public', 'images', 'logo.png');
+const logoGrey = path.join(__dirname, 'public', 'images', 'logo-grey.png');
+const logoSync = path.join(__dirname, 'public', 'images', 'logo-sync.png');
 
 function createWindow () {
   // Create the browser window.
@@ -83,11 +84,14 @@ async function launch() {
   gbs.on("connectivity", () => {
     updateTrayIcon();
   });
+  gbs.on("syncing", () => {
+    updateTrayIcon();
+  });
 }
 
 function updateTrayIcon() {
-  console.log("Updating tray icon, connected: ", gbs.connected);
-  let path = gbs.connected ? logo : logoGrey;
+  console.log("Updating tray icon, connected: ", gbs.connected, "syncing: ", gbs.syncing);
+  let path = gbs.connected ? (gbs.syncing ? logoSync : logo) : logoGrey;
   gbs.tray.setImage(path);
 }