Very basic Loader component for use on Accounts.vue (still needs styling etc.)

resources/js/app.js

@@ -20,7 +20,8 @@ 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,
+        loaderActive: false
     },
 
     computed: {
@@ -44,6 +45,14 @@ const app = new Vue({
     methods: {
         setDarkScheme ({ matches }) {
             this.prefersDarkScheme = matches
+        },
+
+        showLoader() {
+            this.loaderActive = true
+        },
+
+        hideLoader() {
+            this.loaderActive = false
         }
     },
     i18n,

resources/js/components/Loader.vue

@@ -0,0 +1,77 @@
+<template>
+    <div v-if="active" class="loader-wrapper">
+        <div class="spinner">
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+        </div>
+        <p>{{ message }}</p>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'Loader',
+    props: {
+        active: Boolean,
+        message: String
+    }
+}
+</script>
+
+<style scoped>
+.loader-wrapper {
+    text-align: center;
+    z-index: 10000;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(50,50,50,0.68);
+}
+.loader-wrapper p {
+    font-size: 1.2em;
+    font-weight: 300;
+    margin-top: 5px;
+    letter-spacing: 1px;
+    color: rgb(255, 255, 255);
+}
+.spinner {
+    display: inline-block;
+    position: relative;
+    width: 80px;
+    height: 80px;
+}
+
+.spinner div {
+    box-sizing: border-box;
+    display: block;
+    position: absolute;
+    width: 64px;
+    height: 64px;
+    margin: 8px;
+    border: 8px solid #6916a0;
+    border-radius: 50%;
+    animation: spinner 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+    border-color: #6916a0 transparent transparent transparent;
+}
+.spinner div:nth-child(1) {
+    animation-delay: -0.45s;
+}
+.spinner div:nth-child(2) {
+    animation-delay: -0.3s;
+}
+.spinner div:nth-child(3) {
+    animation-delay: -0.15s;
+}
+@keyframes spinner {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}
+</style>

resources/js/components/OtpDisplayer.vue

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

resources/js/views/Accounts.vue

@@ -1,5 +1,7 @@
 <template>
     <div>
+        <!-- Loading spinner -->
+        <loader :active="$root.loaderActive" message="calculating..." />
         <!-- Group switch -->
         <div class="container groups" v-if="showGroupSwitch">
             <div class="columns is-centered">
@@ -254,6 +256,7 @@
      */
 
     import Modal from '../components/Modal'
+    import Loader from '../components/Loader'
     import OtpDisplayer from '../components/OtpDisplayer'
     import draggable from 'vuedraggable'
     import Form from './../components/Form'
@@ -361,6 +364,7 @@
             Modal,
             OtpDisplayer,
             draggable,
+            Loader
         },
 
         methods: {
@@ -417,6 +421,7 @@
                     this.selectAccount(account.id)
                 }
                 else {
+                    this.$root.showLoader();
                     this.$refs.OtpDisplayer.show(account.id)
                 }
             },