Add the spinner component to App.vue instead of Accounts.vue so that is usable from all pages.

Update showSpinner function to accept the message to be displayed, defaults to 'loading' if none is provided.

resources/js/app.js

@@ -21,7 +21,10 @@ const app = new Vue({
         isDemoApp: window.isDemoApp,
         isTestingApp: window.isTestingApp,
         prefersDarkScheme: window.matchMedia('(prefers-color-scheme: dark)').matches,
-        spinnerActive: false
+        spinner: {
+            active: false,
+            message: 'loading'
+        },
     },
 
     computed: {
@@ -47,12 +50,14 @@ const app = new Vue({
             this.prefersDarkScheme = matches
         },
 
-        showSpinner() {
+        showSpinner(message) {
-            this.spinnerActive = true
+            this.spinner.message = message;
+            this.spinner.active = true;
         },
 
         hideSpinner() {
-            this.spinnerActive = false
+            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,9 +17,14 @@
 </template>
 
 <script>
+    import Spinner from "./Spinner.vue";
+
     export default {
         name: 'App',
-        
+        components: {
+            Spinner
+        },
+
         data(){
             return {
             }
@@ -31,4 +38,4 @@
 
         }
     }
-</script>
+</script>

resources/js/views/Accounts.vue

@@ -1,7 +1,5 @@
 <template>
     <div>
-        <!-- Loading spinner -->
-        <spinner :active="$root.spinnerActive" :message="$t('commons.generating_otp')"/>
         <!-- Group switch -->
         <div class="container groups" v-if="showGroupSwitch">
             <div class="columns is-centered">
@@ -256,7 +254,6 @@
      */
 
     import Modal from '../components/Modal'
-    import Spinner from '../components/Spinner'
     import OtpDisplayer from '../components/OtpDisplayer'
     import draggable from 'vuedraggable'
     import Form from './../components/Form'
@@ -363,8 +360,7 @@
         components: {
             Modal,
             OtpDisplayer,
-            draggable,
+            draggable
-            Spinner
         },
 
         methods: {
@@ -421,11 +417,11 @@
                     this.selectAccount(account.id)
                 }
                 else {
-                    this.$root.showSpinner();
+                    this.$root.showSpinner(this.$t('commons.generating_otp'));
                     this.$refs.OtpDisplayer.show(account.id);
                 }
             },
-            
+
             /**
              * Select an account while in edit mode
              */