Animate progress circle and show complete status in blue for 10s

public/scripts/ui.js

@@ -422,6 +422,10 @@ class PeerUI {
         this._connectionHash = "";
         this._connected = false;
 
+        this._currentProgress = 0;
+        this._currentStatus = null
+        this._oldStatus = null;
+
         this._roomIds = {}
         this._roomIds[roomType] = roomId;
 
@@ -445,6 +449,7 @@ class PeerUI {
         this.$label = this.$el.querySelector('label');
         this.$input = this.$el.querySelector('input');
         this.$displayName = this.$el.querySelector('.name');
+        this.$progress = this.$el.querySelector('.progress');
 
         this.updateTypesClassList();
 
@@ -599,17 +604,17 @@ class PeerUI {
             this._connected = true;
 
             // on reconnect
-            this.setStatus(this.oldStatus);
-            this.oldStatus = null;
+            this.setStatus(this._oldStatus);
+            this._oldStatus = null;
 
             this._connectionHash = connectionHash;
         }
         else {
             this._connected = false;
 
-            if (!this.oldStatus && this.currentStatus !== "connect") {
+            if (!this._oldStatus && this._currentStatus !== "connect") {
                 // save old status when reconnecting
-                this.oldStatus = this.currentStatus;
+                this._oldStatus = this._currentStatus;
             }
             this.setStatus("connect");
 
@@ -678,36 +683,50 @@ class PeerUI {
     }
 
     setProgress(progress, status) {
-        const $progress = this.$el.querySelector('.progress');
-
-        if (0.5 < progress && progress < 1) {
-            $progress.classList.add('over50');
-        }
-        else {
-            $progress.classList.remove('over50');
-        }
-
-        if (progress === 1) {
-            progress = 0;
-            status = null;
-        }
+        clearTimeout(this.resetProgressTimeout);
 
         this.setStatus(status);
 
+        const progressSpillsOverHalf = this._currentProgress < 0.5 && 0.5 <= progress;
+
+        if (progress === 0 || progressSpillsOverHalf) {
+            this.$progress.classList.remove('animate');
+        }
+        else {
+            this.$progress.classList.add('animate');
+        }
+
+        if (0.5 <= progress && progress < 1) {
+            this.$progress.classList.add('over50');
+        }
+        else {
+            this.$progress.classList.remove('over50');
+        }
+
         const degrees = `rotate(${360 * progress}deg)`;
-        $progress.style.setProperty('--progress', degrees);
+        this.$progress.style.setProperty('--progress', degrees);
+
+        this._currentProgress = progress
+
+        if (progress === 1) {
+            this.resetProgressTimeout = setTimeout(() => this.setProgress(0, null), 200);
+        }
     }
 
     setStatus(status) {
+        if (status === this._currentStatus) return;
+
+        clearTimeout(this.statusTimeout);
+
         if (!status) {
             this.$el.removeAttribute('status');
             this.$el.querySelector('.status').innerHTML = '';
-            this.currentStatus = null;
+            this._currentStatus = null;
             NoSleepUI.disableIfPeersIdle();
             return;
         }
 
-        if (status === this.currentStatus) return;
+        this.$el.classList.add('blink');
 
         let statusName = {
             "connect": Localization.getTranslation("peer-ui.connecting"),
@@ -719,9 +738,17 @@ class PeerUI {
             "complete": Localization.getTranslation("peer-ui.complete")
         }[status];
 
+        if (status === "complete") {
+            this.$el.classList.remove('blink');
+
+            this.statusTimeout = setTimeout(() => {
+                this.setProgress(0, null);
+            }, 10000);
+        }
+
         this.$el.setAttribute('status', status);
         this.$el.querySelector('.status').innerText = statusName;
-        this.currentStatus = status;
+        this._currentStatus = status;
     }
 
     _onDrop(e) {

public/styles/styles-deferred.css

@@ -188,12 +188,12 @@ x-peer:not(.type-public-id) .highlight-room-public-id {
     display: none;
 }
 
-x-peer:not([status]):hover,
-x-peer:not([status]):focus {
+x-peer:not([status].blink):hover,
+x-peer:not([status].blink):focus {
     transform: scale(1.05);
 }
 
-x-peer[status] x-icon {
+x-peer[status].blink x-icon {
     box-shadow: none;
 }
 
@@ -249,7 +249,7 @@ x-peer[status] .device-name {
     display: none;
 }
 
-x-peer[status] {
+x-peer[status].blink {
     pointer-events: none;
 }
 
@@ -257,6 +257,10 @@ x-peer {
     animation: pop 600ms ease-out 1;
 }
 
+x-peer[status]:not(.blink) .status {
+    color: var(--primary-color);
+}
+
 @keyframes pop {
     0% {
         transform: scale(0.7);
@@ -747,7 +751,6 @@ x-dialog .dialog-subheader {
     top: -8px;
     clip: rect(0px, 80px, 80px, 40px);
     --progress: rotate(0deg);
-    transition: transform 200ms;
 }
 
 .circle {
@@ -761,6 +764,10 @@ x-dialog .dialog-subheader {
     transform: var(--progress);
 }
 
+.animate .circle {
+    transition: transform 200ms;
+}
+
 .over50 {
     clip: rect(auto, auto, auto, auto);
 }