add a loading animation to button

client/src/index.js

@@ -22,6 +22,7 @@ class BetterDiscord {
         Events.on('global-ready', e => {
             const { UI } = require('./modules/ui/vueui.js');
             this.ui = new UI();
+            this.init();
         });
 
         //Inject styles to head for now
@@ -30,6 +31,17 @@ class BetterDiscord {
         style.type = 'text/css';
         style.appendChild(document.createTextNode(styles));
         document.head.appendChild(style);
+
+        this.init();
+    }
+
+    async init() {
+        try {
+            await PluginManager.loadAllPlugins();
+        } catch (err) {
+        }
+
+        Events.emit('ready');
     }
 
 }

client/src/modules/ui/components/BdSettingsWrapper.vue

@@ -1,12 +1,19 @@
 <template src="./templates/BdSettingsWrapper.html"></template>
 <script>
+    const { Events } = require('../../');
+
     /*Imports*/
     import BdSettings from './BdSettings.vue';
     const components = { BdSettings };
 
     /*Methods*/
-    function showSettings() { this.active = true; }
-    function hideSettings() { this.active = false; }
+    function showSettings() {
+        if (!this.loaded) return;
+        this.active = true;
+    }
+    function hideSettings() {
+        this.active = false;
+    }
 
     const methods = { showSettings, hideSettings };
 
@@ -17,11 +24,19 @@
         methods,
         data() {
             return {
+                loaded: false,
                 active: false,
                 platform: global.process.platform
             }
         },
         created: function () {
+
+            Events.on('ready', e => {
+                setTimeout(() => { //Dummy timeout to test loading
+                    this.loaded = true;
+                }, 5000);
+            });
+
             window.addEventListener('keyup', globalKeyListener = e => {
                 if (this.active && e.which === 27) {
                     this.hideSettings();

client/src/modules/ui/components/templates/BdSettingsWrapper.html

@@ -1,6 +1,6 @@
 <div class="bd-settings-wrapper" :class="[{active: active}, 'platform-' + this.platform]">
     <div class="bd-settings-button" :class="{active: active}" @click="showSettings">
-        <div class="bd-settings-button-btn"></div>
+        <div class="bd-settings-button-btn" :class="{'bd-loading': !loaded}"></div>
     </div>
     <BdSettings :active="active" :close="hideSettings"/>
 </div>

client/src/styles/partials/bdsettings/button.scss

@@ -22,10 +22,14 @@
         opacity: 0.5;
         transition: all 0.4s ease-in-out;
 
-        &:hover {
+        &:not(.bd-loading):hover {
             filter: none;
             opacity: 1;
         }
+
+        &.bd-loading {
+            animation: bd-settings-button-pulse 1.5s infinite;
+        }
     }
 
     &.active {
@@ -47,3 +51,15 @@
     }
 }
 
+@keyframes bd-settings-button-pulse {
+    0% {
+        filter: grayscale(100%);
+    }
+    50% {
+        filter: grayscale(0%);
+        opacity: 1;
+    }
+    100% {
+        filter: grayscale(100%);
+    }
+}

client/src/styles/partials/generic/buttons.scss

@@ -1,51 +1,4 @@
-.bd-settings-button {
-    position: absolute;
-    z-index: 1;
-    top: 22px;
-    width: 70px;
-    height: 48px;
-    left: 0;
-    background: #202225;
-    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 2px 0 rgba(0, 0, 0, 0.06);
-    opacity: 1;
 
-    .bd-settings-button-btn {
-        background-image: $logoSmallBw;
-        background-size: 50% 50%;
-        background-repeat: no-repeat;
-        background-position: center;
-        width: 100%;
-        height: 100%;
-        z-index: 3000;
-        cursor: pointer;
-        filter: grayscale(100%);
-        opacity: 0.5;
-        transition: all 0.4s ease-in-out;
-
-        &:hover {
-            filter: none;
-            opacity: 1;
-        }
-    }
-
-    &.active {
-        background: transparent;
-        opacity: 1;
-        box-shadow: none;
-        z-index: 90000;
-
-        .bd-settings-button-btn {
-            background-image: $logoBigBw;
-            filter: none;
-            opacity: 1;
-            width: 130px;
-            height: 80px;
-            background-size: 100% 100%;
-            margin-left: 20px;
-            cursor: default;
-        }
-    }
-}
 
 .bd-button {
     display: flex;