refactor: Improved pulse animation code

src/renderer/components/TheSettingBar.vue

@@ -111,17 +111,19 @@ export default {
          el.querySelector('.ex-tooltip-content').style.top = `${fromTop}px`;
       },
       getStatusBadge (uid) {
-         const status = this.getWorkspace(uid).connection_status;
+         if (this.getWorkspace(uid)) {
+            const status = this.getWorkspace(uid).connection_status;
 
-         switch (status) {
+            switch (status) {
-            case 'connected':
+               case 'connected':
-               return 'badge badge-connected';
+                  return 'badge badge-connected';
-            case 'connecting':
+               case 'connecting':
-               return 'badge badge-connecting';
+                  return 'badge badge-connecting';
-            case 'failed':
+               case 'failed':
-               return 'badge badge-failed';
+                  return 'badge badge-failed';
-            default:
+               default:
-               return '';
+                  return '';
+            }
          }
       }
    }

src/renderer/scss/_transitions.scss

@@ -30,6 +30,12 @@
   animation: jump-down-in 0.2s reverse;
 }
 
+.pulse {
+  animation-name: pulse;
+  animation-duration: 2s;
+  animation-iteration-count: infinite;
+}
+
 @keyframes jump-down-in {
   0% {
     transform: scale(0);
@@ -40,16 +46,16 @@
   }
 }
 
-@keyframes connecting {
+@keyframes pulse {
   0% {
-    background-color: transparent;
+    opacity: 0;
   }
 
   50% {
-    background-color: $warning-color;
+    opacity: 1;
   }
 
   100% {
-    background-color: transparent;
+    opacity: 0;
   }
 }

src/renderer/scss/main.scss

@@ -142,7 +142,8 @@ body {
   }
 
   &.badge-connecting::after {
-    animation-name: connecting;
+    background: $warning-color;
+    animation-name: pulse;
     animation-duration: 2s;
     animation-iteration-count: infinite;
   }