From 3c83dbe0ff27cbb017e99f4abd4a05a241b77d20 Mon Sep 17 00:00:00 2001
From: Jiiks <jiiks@windowslive.com>
Date: Fri, 10 Aug 2018 15:44:33 +0300
Subject: [PATCH] add slight loading animation

---
 client/src/builtin/E2EEComponent.vue          | 23 +++++++++++++++----
 client/src/styles/partials/animations.scss    | 14 +++++++++++
 .../src/styles/partials/bdsettings/e2ee.scss  |  1 +
 3 files changed, 34 insertions(+), 4 deletions(-)

diff --git a/client/src/builtin/E2EEComponent.vue b/client/src/builtin/E2EEComponent.vue
index a1323976..c802fcef 100644
--- a/client/src/builtin/E2EEComponent.vue
+++ b/client/src/builtin/E2EEComponent.vue
@@ -10,9 +10,21 @@
 
 <template>
     <div class="bd-e2eeTaContainer">
-        <div class="bd-e2eeTaBtn bd-e2eeLock bd-error">
-            <MiLock v-tooltip="'E2EE'" />
-        </div>
+        <template v-if="error">
+            <div class="bd-e2eeTaBtn bd-e2eeLock bd-error">
+                <MiLock v-tooltip="'E2EE ERROR!'" />
+            </div>
+        </template>
+        <template v-else-if="state === 'loading'">
+            <div class="bd-e2eeTaBtn bd-e2eeLock bd-warn">
+                <MiLock v-tooltip="'E2EE is loading'" />
+            </div>
+        </template>
+        <template v-else>
+            <div class="bd-e2eeTaBtn bd-e2eeLock bd-ok">
+                <MiLock v-tooltip="'E2EE Ready!'" />
+            </div>
+        </template>
         <div class="bd-taDivider"></div>
     </div>
 </template>
@@ -22,7 +34,10 @@
     export default {
         components: { MiLock },
         data() {
-            return {};
+            return {
+                state: 'loading',
+                error: null
+            };
         },
         methods: {}
     }
diff --git a/client/src/styles/partials/animations.scss b/client/src/styles/partials/animations.scss
index 1287340a..d5003281 100644
--- a/client/src/styles/partials/animations.scss
+++ b/client/src/styles/partials/animations.scss
@@ -129,3 +129,17 @@
         transform: translate3d(4px, -4px, 0);
     }
 }
+
+@keyframes bd-pulse {
+    0% {
+        opacity: 1;
+    }
+
+    50% {
+        opacity: .7;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}
diff --git a/client/src/styles/partials/bdsettings/e2ee.scss b/client/src/styles/partials/bdsettings/e2ee.scss
index 1d1883b8..63d5b28b 100644
--- a/client/src/styles/partials/bdsettings/e2ee.scss
+++ b/client/src/styles/partials/bdsettings/e2ee.scss
@@ -25,6 +25,7 @@
 
             &.bd-warn {
                 fill: #ccab3e;
+                animation: bd-pulse 2s ease-in-out infinite;
             }
         }
     }