Use new sync-started event when available

It's faster than waiting for the first sync request to have finished (or
failed)

Author: raucao

src/widget.js

@@ -58,13 +58,12 @@ class Widget {
       case 'ready':
         this.setState(this.state);
         break;
+      case 'sync-started':
+        this.handleSyncStarted();
+        break;
+      // For backward compatibility with rs.js <= 2.0.0-beta.6
       case 'sync-req-done':
-        this.syncInProgress = true;
-        this.rsSyncButton.classList.add("rs-rotate");
-        setTimeout(() => {
-          if (!this.syncInProgress) return;
-          this.rsConnectedLabel.textContent = 'Synchronizing';
-        }, 1000);
+        this.handleSyncStarted();
         break;
       case 'sync-done':
         if (this.online && !msg.completed) return;
@@ -500,6 +499,15 @@ class Widget {
     this.close();
   }
 
+  handleSyncStarted () {
+    this.syncInProgress = true;
+    this.rsSyncButton.classList.add("rs-rotate");
+    setTimeout(() => {
+      if (!this.syncInProgress) return;
+      this.rsConnectedLabel.textContent = 'Synchronizing';
+    }, 1000);
+  }
+
   handleDiscoveryError (error) {
     let msgContainer = document.querySelector('.rs-sign-in-error');
     msgContainer.innerHTML = error.message;