3 files changed, 53 insertions, 9 deletions
diff --git a/app/app.js b/app/app.js
index 7c69648423..114b5e276e 100644
--- a/app/app.js
+++ b/app/app.js
@@ -47,8 +47,9 @@ if(recentLocation && recentLocation.pathname) {
 const updateTrayIcon = () => {
   const getName = (s) => {
     switch(s) {
-    case ConnectionState.connected: return 'connected';
-    default: return 'default';
+    case ConnectionState.connected: return 'secured';
+    case ConnectionState.connecting: return 'securing';
+    default: return 'unsecured';
     }
   };
   const { connect } = store.getState();
@@ -66,6 +67,7 @@ mapBackendEventsToRouter(backend, store);
 
 // Setup events to update tray icon
 backend.on(Backend.EventType.connect, updateTrayIcon);
+backend.on(Backend.EventType.connecting, updateTrayIcon);
 backend.on(Backend.EventType.disconnect, updateTrayIcon);
 
 // force update tray
diff --git a/app/lib/tray-animator.js b/app/lib/tray-animator.js
index d4fd0b79c5..eb8dd02af6 100644
--- a/app/lib/tray-animator.js
+++ b/app/lib/tray-animator.js
@@ -182,7 +182,8 @@ export class TrayAnimator {
    * @memberOf TrayAnimator
    */
   start() {
-    assert(this._started === false);
+    if(this._started) { return; };
+
     this._timer = this._nextFrame();
     this._started = true;
 
@@ -198,7 +199,7 @@ export class TrayAnimator {
    * @memberOf TrayAnimator
    */
   stop() {
-    assert(this._started === true);
+    if(!this._started) { return; }
 
     this._started = false;
     
diff --git a/app/main.js b/app/main.js
index 1d5ba3f91a..582b14c68d 100644
--- a/app/main.js
+++ b/app/main.js
@@ -1,5 +1,6 @@
 import path from 'path';
-import { app, crashReporter, BrowserWindow, ipcMain, Tray, Menu, nativeImage } from 'electron';
+import { app, crashReporter, BrowserWindow, ipcMain, Tray, Menu } from 'electron';
+import { TrayAnimation, TrayAnimator } from './lib/tray-animator';
 
 // Override appData path to avoid collisions with old client
 // New userData path, i.e on macOS: ~/Library/Application Support/mullvad.vpn
@@ -29,11 +30,51 @@ const stopTrayEventMonitor = () => {
   }
 };
 
+const menubarIcons = {
+  base: path.join(__dirname, 'assets/images/menubar icons'),
+  spinner: {
+    light: 'light ui/spinner/spinner-{s}-light.png',
+    dark: 'dark ui/spinner/spinner-{s}-dark.png'
+  },
+  lock: {
+    light: 'light ui/lock/lock-{s}-light.png',
+    dark: 'dark ui/lock/lock-{s}-dark.png'
+  }
+};
+
+const spinnerPath = path.join(menubarIcons.base, menubarIcons.spinner.light);
+const lockPath = path.join(menubarIcons.base, menubarIcons.lock.light);
+
+let trayAnimator = null;
+
 ipcMain.on('changeTrayIcon', (event, name) => {
-  const iconPath = path.join(__dirname, './assets/images/tray-icon-' + name + '.png');
-  const image = nativeImage.createFromPath(iconPath);
-  if(image) {
-    tray.setImage(image);
+  if(!tray) { return; }
+  
+  trayAnimator && trayAnimator.stop();
+  trayAnimator = null;
+
+  console.log('changeTrayIcon: ' + name);
+
+  if(name === 'securing') {
+    let animation = TrayAnimation.fromFileSequence(spinnerPath, [1, 9]);
+    animation.speed = 100;
+    animation.repeat = true;
+
+    trayAnimator = new TrayAnimator(tray, animation);
+    trayAnimator.start();
+  } else if(name === 'secured') {
+    let animation = TrayAnimation.fromFileSequence(lockPath, [1, 9]);
+    animation.speed = 100;
+
+    trayAnimator = new TrayAnimator(tray, animation);
+    trayAnimator.start();
+  } else if(name === 'unsecured') {
+    let animation = TrayAnimation.fromFileSequence(lockPath, [1, 9]);
+    animation.speed = 100;
+    animation.reverse = true;
+
+    trayAnimator = new TrayAnimator(tray, animation);
+    trayAnimator.start();
   }
 });