Merge pull request #186 from josh-gaby/feature/spinner

Loading spinner - Closes #183

resources/js/app.js

@@ -20,7 +20,11 @@ const app = new Vue({
         userPreferences: window.userPreferences,
         isDemoApp: window.isDemoApp,
         isTestingApp: window.isTestingApp,
-        prefersDarkScheme: window.matchMedia('(prefers-color-scheme: dark)').matches
+        prefersDarkScheme: window.matchMedia('(prefers-color-scheme: dark)').matches,
+        spinner: {
+            active: false,
+            message: 'loading'
+        },
     },
 
     computed: {
@@ -44,6 +48,16 @@ const app = new Vue({
     methods: {
         setDarkScheme ({ matches }) {
             this.prefersDarkScheme = matches
+        },
+
+        showSpinner(message) {
+            this.spinner.message = message;
+            this.spinner.active = true;
+        },
+
+        hideSpinner() {
+            this.spinner.active = false;
+            this.spinner.message = 'loading';
         }
     },
     i18n,

resources/js/components/App.vue

@@ -7,6 +7,8 @@
         <div v-if="this.$root.isTestingApp" class="demo has-background-warning has-text-centered is-size-7-mobile">
             {{ $t('commons.testing_do_not_post_sensitive_data') }}
         </div>
+        <!-- Loading spinner -->
+        <spinner :active="$root.spinner.active" :message="$root.spinner.message"/>
         <notifications id="vueNotification" role="alert" width="100%" position="top" :duration="4000" :speed="0" :max="1" classes="notification is-radiusless" />
         <main class="main-section">
             <router-view></router-view>
@@ -15,8 +17,13 @@
 </template>
 
 <script>
+    import Spinner from "./Spinner.vue";
+
     export default {
         name: 'App',
+        components: {
+            Spinner
+        },
 
         data(){
             return {

resources/js/components/OtpDisplayer.vue

@@ -172,6 +172,11 @@
                     catch(error) {
                         this.clearOTP()
                     }
+                    finally {
+                        this.$root.hideSpinner();
+                    }
+                } else  {
+                    this.$root.hideSpinner();
                 }
             },
 

resources/js/components/Spinner.vue

@@ -0,0 +1,41 @@
+<template>
+    <div v-if="active" class="spinner-container">
+        <div class="spinner-wrapper">
+            <span class="is-size-1 spinner">
+                <font-awesome-icon :icon="['fas', 'spinner']" spin />
+            </span>
+            <span>{{ message }}</span>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'Spinner',
+    props: {
+        active: {
+            type: Boolean,
+            default: false
+        },
+        message: String,
+    }
+}
+</script>
+
+<style scoped>
+.spinner-container {
+    text-align: center;
+    z-index: 10000;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.spinner {
+    display: block;
+}
+</style>

resources/js/views/Accounts.vue

@@ -360,7 +360,7 @@
         components: {
             Modal,
             OtpDisplayer,
-            draggable,
+            draggable
         },
 
         methods: {
@@ -417,11 +417,11 @@
                     this.selectAccount(account.id)
                 }
                 else {
-                    this.$refs.OtpDisplayer.show(account.id)
+                    this.$root.showSpinner(this.$t('commons.generating_otp'));
+                    this.$refs.OtpDisplayer.show(account.id);
                 }
             },
 
-
             /**
              * Select an account while in edit mode
              */

resources/lang/en/commons.php

@@ -49,6 +49,7 @@
     'reload' => 'Reload',
     'some_data_have_changed' => 'Some data have changed. You should',
     'generate' => 'Generate',
+    'generating_otp' => 'Generating OTP',
     'open_in_browser' => 'Open in browser',
     'continue' => 'Continue',
     'discard' => 'Discard',

resources/sass/app.scss

@@ -1204,6 +1204,28 @@ footer .field.is-grouped {
   }
 }
 
+// Themed Spinner
+.spinner-container {
+    background-color: $white-ter;
+    .spinner {
+        color: $dark;
+    }
+}
+:root[data-theme="dark"] .spinner-container {
+    background-color: $black-ter;
+    .spinner {
+        color: $light;
+    }
+}
+@media (prefers-color-scheme: dark) {
+    :root[data-theme="system"] .spinner-container {
+        background-color: $black-ter;
+        .spinner {
+            color: $light;
+        }
+    }
+}
+
 .fadeInOut-enter-active {
   animation: fadeIn 500ms
 }