From 69c688e4ea228f0a54834242bedad1053b5904fc Mon Sep 17 00:00:00 2001
From: Josh <josh@dolphinshipping.co.nz>
Date: Mon, 24 Apr 2023 18:10:13 +1200
Subject: [PATCH 1/4] Very basic Loader component for use on Accounts.vue
 (still needs styling etc.)

---
 resources/js/app.js                      | 13 +++-
 resources/js/components/Loader.vue       | 77 ++++++++++++++++++++++++
 resources/js/components/OtpDisplayer.vue | 17 ++++--
 resources/js/views/Accounts.vue          | 61 ++++++++++---------
 4 files changed, 132 insertions(+), 36 deletions(-)
 create mode 100644 resources/js/components/Loader.vue

diff --git a/resources/js/app.js b/resources/js/app.js
index a36fd937..9b20aae5 100644
--- a/resources/js/app.js
+++ b/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,8 +45,16 @@ const app = new Vue({
     methods: {
         setDarkScheme ({ matches }) {
             this.prefersDarkScheme = matches
+        },
+
+        showLoader() {
+            this.loaderActive = true
+        },
+
+        hideLoader() {
+            this.loaderActive = false
         }
     },
     i18n,
     router,
-});
\ No newline at end of file
+});
diff --git a/resources/js/components/Loader.vue b/resources/js/components/Loader.vue
new file mode 100644
index 00000000..359a3969
--- /dev/null
+++ b/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>
diff --git a/resources/js/components/OtpDisplayer.vue b/resources/js/components/OtpDisplayer.vue
index 2e3118d3..abcc328e 100644
--- a/resources/js/components/OtpDisplayer.vue
+++ b/resources/js/components/OtpDisplayer.vue
@@ -144,7 +144,7 @@
                     this.internal_account = data.account
                     this.internal_icon = data.icon
                     this.internal_otp_type = data.otp_type
-                    
+
                     if( this.isHMacBased(data.otp_type) && data.counter ) {
                         this.internal_counter = data.counter
                     }
@@ -165,13 +165,18 @@
                             await this.getHOTP()
                         }
                         else this.$router.push({ name: 'genericError', params: { err: this.$t('errors.not_a_supported_otp_type') } });
-    
+
                         this.$parent.isActive = true
                         this.focusOnOTP()
                     }
                     catch(error) {
                         this.clearOTP()
                     }
+                    finally {
+                        this.$root.hideLoader();
+                    }
+                } else  {
+                    this.$root.hideLoader();
                 }
             },
 
@@ -232,7 +237,7 @@
             },
 
             startTotpLoop: async function() {
-                
+
                 let otp = await this.getOtp()
 
                 this.internal_password = otp.password
@@ -258,7 +263,7 @@
                 //                              ● ● ● ● ●|● ◌ ◌ ◌ ◌ |
                 //                              | |      ||         |
                 //                              | |      |<-------->|--remainingTimeBeforeEndOfPeriod (for remainingTimeout)
-                //     durationBetweenTwoDots-->|-|<     ||         
+                //     durationBetweenTwoDots-->|-|<     ||
                 //     (for dotToDotInterval)   | |     >||<---durationFromFirstToNextDot (for firstDotToNextOneTimeout)
                 //                                        |
                 //                                        |
@@ -276,7 +281,7 @@
                 // We determine the position of the closest dot next to the generated_at timestamp
                 let relativePosition = (elapsedTimeInCurrentPeriod * 10) / period
                 let dotIndex = (Math.floor(relativePosition) +1)
-                
+
                 // We switch the dot on
                 this.lastActiveDot = dots.querySelector('li:nth-child(' + dotIndex + ')');
                 this.lastActiveDot.setAttribute('data-is-active', true);
@@ -365,4 +370,4 @@
             this.stopLoop()
         }
     }
-</script>
\ No newline at end of file
+</script>
diff --git a/resources/js/views/Accounts.vue b/resources/js/views/Accounts.vue
index 08abb9f2..7a5a2f9c 100644
--- a/resources/js/views/Accounts.vue
+++ b/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">
@@ -141,7 +143,7 @@
         	                            </div>
         	                        </div>
         	                    </transition>
-                                <div tabindex="0" class="tfa-cell tfa-content is-size-3 is-size-4-mobile" @click="showAccount(account)" @keyup.enter="showAccount(account)" role="button">  
+                                <div tabindex="0" class="tfa-cell tfa-content is-size-3 is-size-4-mobile" @click="showAccount(account)" @keyup.enter="showAccount(account)" role="button">
                                     <div class="tfa-text has-ellipsis">
                                         <img :src="$root.appConfig.subdirectory + '/storage/icons/' + account.icon" v-if="account.icon && $root.userPreferences.showAccountsIcons" :alt="$t('twofaccounts.icon_for_account_x_at_service_y', {account: account.account, service: account.service})">
                                         {{ displayService(account.service) }}<font-awesome-icon class="has-text-danger is-size-5 ml-2" v-if="$root.appSettings.useEncryption && account.account === $t('errors.indecipherable')" :icon="['fas', 'exclamation-circle']" />
@@ -186,9 +188,9 @@
                 </p>
                 <!-- move button -->
                 <p class="control" v-if="editMode">
-                    <button 
-                        :disabled='selectedAccounts.length == 0' class="button is-rounded" 
-                        :class="[{'is-outlined': $root.showDarkMode||selectedAccounts.length == 0}, selectedAccounts.length == 0 ? 'is-dark': 'is-link']" 
+                    <button
+                        :disabled='selectedAccounts.length == 0' class="button is-rounded"
+                        :class="[{'is-outlined': $root.showDarkMode||selectedAccounts.length == 0}, selectedAccounts.length == 0 ? 'is-dark': 'is-link']"
                         @click="showGroupSelector = true"
                         :title="$t('groups.move_selected_to_group')" >
                             {{ $t('commons.move') }}
@@ -196,19 +198,19 @@
                 </p>
                 <!-- delete button -->
                 <p class="control" v-if="editMode">
-                    <button 
-                        :disabled='selectedAccounts.length == 0' class="button is-rounded" 
-                        :class="[{'is-outlined': $root.showDarkMode||selectedAccounts.length == 0}, selectedAccounts.length == 0 ? 'is-dark': 'is-link']" 
+                    <button
+                        :disabled='selectedAccounts.length == 0' class="button is-rounded"
+                        :class="[{'is-outlined': $root.showDarkMode||selectedAccounts.length == 0}, selectedAccounts.length == 0 ? 'is-dark': 'is-link']"
                         @click="destroyAccounts" >
                             {{ $t('commons.delete') }}
                     </button>
                 </p>
                 <!-- export button -->
                 <p class="control" v-if="editMode">
-                    <button 
-                        :disabled='selectedAccounts.length == 0' class="button is-rounded" 
-                        :class="[{'is-outlined': $root.showDarkMode||selectedAccounts.length == 0}, selectedAccounts.length == 0 ? 'is-dark': 'is-link']" 
-                        @click="exportAccounts" 
+                    <button
+                        :disabled='selectedAccounts.length == 0' class="button is-rounded"
+                        :class="[{'is-outlined': $root.showDarkMode||selectedAccounts.length == 0}, selectedAccounts.length == 0 ? 'is-dark': 'is-link']"
+                        @click="exportAccounts"
                         :title="$t('twofaccounts.export_selected_to_json')" >
                             {{ $t('commons.export') }}
                     </button>
@@ -223,9 +225,9 @@
 
     /**
      *  Accounts view
-     *  
+     *
      *  route: '/account' (alias: '/')
-     *  
+     *
      *  The main view of 2FAuth that list all existing account recorded in DB.
      *  Available feature in this view :
      *  - {{OTP}} generation
@@ -248,12 +250,13 @@
      *    ~ 'userPreferences.showAccountsIcons' toggle the icon visibility
      *    ~ 'userPreferences.displayMode' change the account appearance
      *
-     *  Input : 
+     *  Input :
      *  - The 'initialEditMode' props : allows to load the view directly in Edit mode
-     *  
+     *
      */
 
     import Modal from '../components/Modal'
+    import Loader from '../components/Loader'
     import OtpDisplayer from '../components/OtpDisplayer'
     import draggable from 'vuedraggable'
     import Form from './../components/Form'
@@ -289,12 +292,12 @@
                     return this.accounts.filter(
                         item => {
                             if( parseInt(this.$root.userPreferences.activeGroup) > 0 ) {
-                                return ((item.service ? item.service.toLowerCase().includes(this.search.toLowerCase()) : false) || 
-                                    item.account.toLowerCase().includes(this.search.toLowerCase())) && 
+                                return ((item.service ? item.service.toLowerCase().includes(this.search.toLowerCase()) : false) ||
+                                    item.account.toLowerCase().includes(this.search.toLowerCase())) &&
                                     (item.group_id == parseInt(this.$root.userPreferences.activeGroup))
                             }
                             else {
-                                return ((item.service ? item.service.toLowerCase().includes(this.search.toLowerCase()) : false) || 
+                                return ((item.service ? item.service.toLowerCase().includes(this.search.toLowerCase()) : false) ||
                                     item.account.toLowerCase().includes(this.search.toLowerCase()))
                             }
                         }
@@ -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)
                 }
             },
@@ -471,7 +476,7 @@
                             })
                             this.$notify({ type: 'is-success', text: this.$t('twofaccounts.accounts_deleted') })
                         })
-                        
+
                     // we fetch the accounts again to prevent the js collection being
                     // desynchronize from the backend php collection
                     this.fetchAccounts(true)
@@ -529,7 +534,7 @@
 
                     if ( !objectEquals(groups, this.groups) ) {
                         this.groups = groups
-                    } 
+                    }
 
                     this.$storage.set('groups', this.groups)
                 })
@@ -550,7 +555,7 @@
                         // everything's fine
                     })
                     .catch(error => {
-                        
+
                         this.$router.push({ name: 'genericError', params: { err: error.response } })
                     });
                 }
@@ -593,21 +598,21 @@
             },
 
             /**
-             * 
+             *
              */
             displayService(service) {
                 return service ? service : this.$t('twofaccounts.no_service')
             },
 
             /**
-             * 
+             *
              */
             clearSelected() {
                 this.selectedAccounts = []
             },
 
             /**
-             * 
+             *
              */
             selectAll() {
                 if(this.editMode) {
@@ -621,7 +626,7 @@
             },
 
             /**
-             * 
+             *
              */
             sortAsc() {
                 this.accounts.sort((a, b) => a.service > b.service ? 1 : -1)
@@ -629,7 +634,7 @@
             },
 
             /**
-             * 
+             *
              */
             sortDesc() {
                 this.accounts.sort((a, b) => a.service < b.service ? 1 : -1)
@@ -637,7 +642,7 @@
             },
 
             /**
-             * 
+             *
              */
             keyListener : function(e) {
                 if (e.key === "f" && (e.ctrlKey || e.metaKey)) {
@@ -662,4 +667,4 @@
       opacity: 1;
       /*background: hsl(0, 0%, 21%);*/
     }
-</style>
\ No newline at end of file
+</style>

From 0727428716c5408633357ab8d9ffcd320cbda8ce Mon Sep 17 00:00:00 2001
From: Josh <josh@dolphinshipping.co.nz>
Date: Mon, 24 Apr 2023 19:30:23 +1200
Subject: [PATCH 2/4] Renamed Loader to Spinner, added theming and localization

---
 resources/js/app.js                      | 10 +--
 resources/js/components/Loader.vue       | 77 -------------------
 resources/js/components/OtpDisplayer.vue |  4 +-
 resources/js/components/Spinner.vue      | 96 ++++++++++++++++++++++++
 resources/js/views/Accounts.vue          | 10 +--
 resources/lang/en/commons.php            |  3 +-
 resources/sass/app.scss                  | 33 +++++++-
 7 files changed, 142 insertions(+), 91 deletions(-)
 delete mode 100644 resources/js/components/Loader.vue
 create mode 100644 resources/js/components/Spinner.vue

diff --git a/resources/js/app.js b/resources/js/app.js
index 9b20aae5..50165ac9 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -21,7 +21,7 @@ const app = new Vue({
         isDemoApp: window.isDemoApp,
         isTestingApp: window.isTestingApp,
         prefersDarkScheme: window.matchMedia('(prefers-color-scheme: dark)').matches,
-        loaderActive: false
+        spinnerActive: false
     },
 
     computed: {
@@ -47,12 +47,12 @@ const app = new Vue({
             this.prefersDarkScheme = matches
         },
 
-        showLoader() {
-            this.loaderActive = true
+        showSpinner() {
+            this.spinnerActive = true
         },
 
-        hideLoader() {
-            this.loaderActive = false
+        hideSpinner() {
+            this.spinnerActive = false
         }
     },
     i18n,
diff --git a/resources/js/components/Loader.vue b/resources/js/components/Loader.vue
deleted file mode 100644
index 359a3969..00000000
--- a/resources/js/components/Loader.vue
+++ /dev/null
@@ -1,77 +0,0 @@
-<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>
diff --git a/resources/js/components/OtpDisplayer.vue b/resources/js/components/OtpDisplayer.vue
index abcc328e..cc7db4f3 100644
--- a/resources/js/components/OtpDisplayer.vue
+++ b/resources/js/components/OtpDisplayer.vue
@@ -173,10 +173,10 @@
                         this.clearOTP()
                     }
                     finally {
-                        this.$root.hideLoader();
+                        this.$root.hideSpinner();
                     }
                 } else  {
-                    this.$root.hideLoader();
+                    this.$root.hideSpinner();
                 }
             },
 
diff --git a/resources/js/components/Spinner.vue b/resources/js/components/Spinner.vue
new file mode 100644
index 00000000..82b50999
--- /dev/null
+++ b/resources/js/components/Spinner.vue
@@ -0,0 +1,96 @@
+<template>
+    <div v-if="active" class="spinner-container">
+        <div class="spinner-wrapper">
+            <div class="spinner">
+                <div class="rect-1"></div>
+                <div class="rect-2"></div>
+                <div class="rect-3"></div>
+                <div class="rect-4"></div>
+                <div class="rect-5"></div>
+            </div>
+            <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-wrapper p {
+    font-size: 1.2em;
+    font-weight: 300;
+    margin-top: 5px;
+    letter-spacing: 1px;
+}
+.spinner {
+    margin: auto;
+    width: 50px;
+    height: 40px;
+    text-align: center;
+    font-size: 10px;
+}
+.spinner > div {
+    height: 100%;
+    width: 6px;
+    display: inline-block;
+    --webkit-animation: stretch-delay 1.2s infinite ease-in-out;
+    animation: stretch-delay 1.2s infinite ease-in-out;
+}
+.spinner .rect-2 {
+    --webkit-animation-delay: -1.1s;
+    animation-delay: -1.1s;
+}
+.spinner .rect-3 {
+    --webkit-animation-delay: -1.0s;
+    animation-delay: -1.0s;
+}
+.spinner .rect-4 {
+    --webkit-animation-delay: -0.9s;
+    animation-delay: -0.9s;
+}
+.spinner .rect-5 {
+    --webkit-animation-delay: -0.8s;
+    animation-delay: -0.8s;
+}
+@-webkit-keyframes stretch-delay {
+    0%, 40%, 100% {
+        --webkit-transform: scaleY(0.4)
+    }
+    20% {
+        --webkit-transform: scaleY(1.0)
+    }
+}
+@keyframes stretch-delay {
+    0%, 40%, 100% {
+        transform: scaleY(0.4);
+        --webkit-transform: scaleY(0.4)
+    }
+    20% {
+        transform: scaleY(1.0);
+        --webkit-transform: scaleY(1.0)
+    }
+}
+</style>
diff --git a/resources/js/views/Accounts.vue b/resources/js/views/Accounts.vue
index 7a5a2f9c..164b5c4b 100644
--- a/resources/js/views/Accounts.vue
+++ b/resources/js/views/Accounts.vue
@@ -1,7 +1,7 @@
 <template>
     <div>
         <!-- Loading spinner -->
-        <loader :active="$root.loaderActive" message="calculating..." />
+        <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 +256,7 @@
      */
 
     import Modal from '../components/Modal'
-    import Loader from '../components/Loader'
+    import Spinner from '../components/Spinner'
     import OtpDisplayer from '../components/OtpDisplayer'
     import draggable from 'vuedraggable'
     import Form from './../components/Form'
@@ -364,7 +364,7 @@
             Modal,
             OtpDisplayer,
             draggable,
-            Loader
+            Spinner
         },
 
         methods: {
@@ -421,8 +421,8 @@
                     this.selectAccount(account.id)
                 }
                 else {
-                    this.$root.showLoader();
-                    this.$refs.OtpDisplayer.show(account.id)
+                    this.$root.showSpinner();
+                    this.$refs.OtpDisplayer.show(account.id);
                 }
             },
 
diff --git a/resources/lang/en/commons.php b/resources/lang/en/commons.php
index aff6bdee..b4a8c893 100644
--- a/resources/lang/en/commons.php
+++ b/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',
@@ -70,4 +71,4 @@
     'file' => 'File',
     'or' => 'OR',
     'close_the_x_page' => 'Close the {pagetitle} page',
-];
\ No newline at end of file
+];
diff --git a/resources/sass/app.scss b/resources/sass/app.scss
index b9d42908..b5efe9f8 100644
--- a/resources/sass/app.scss
+++ b/resources/sass/app.scss
@@ -1204,6 +1204,37 @@ footer .field.is-grouped {
   }
 }
 
+// Themed Spinner
+.spinner-container {
+    background-color: $white-ter;
+    .spinner {
+        color: $dark;
+        > div {
+            background-color: $dark !important;
+        }
+    }
+}
+:root[data-theme="dark"] .spinner-container {
+    background-color: $black-ter;
+    .spinner {
+        color: $light;
+        > div {
+            background-color: $light !important;
+        }
+    }
+}
+@media (prefers-color-scheme: dark) {
+    :root[data-theme="system"] .spinner-container {
+        background-color: $black-ter;
+        .spinner {
+            color: $light;
+            > div {
+                background-color: $light !important;
+            }
+        }
+    }
+}
+
 .fadeInOut-enter-active {
   animation: fadeIn 500ms
 }
@@ -1374,4 +1405,4 @@ footer .field.is-grouped {
   to {
     transform: translateY(-2rem);
   }
-}
\ No newline at end of file
+}

From b9780087cc1e9f53586a7d9fc5be6885ad670a01 Mon Sep 17 00:00:00 2001
From: Josh <josh@dolphinshipping.co.nz>
Date: Mon, 24 Apr 2023 19:51:41 +1200
Subject: [PATCH 3/4] Remove the custom spinner and reuse the fontawesome one
 that is already used in other areas.

---
 resources/js/components/Spinner.vue | 63 ++---------------------------
 resources/js/views/Accounts.vue     |  3 +-
 resources/sass/app.scss             |  9 -----
 3 files changed, 5 insertions(+), 70 deletions(-)

diff --git a/resources/js/components/Spinner.vue b/resources/js/components/Spinner.vue
index 82b50999..7352356b 100644
--- a/resources/js/components/Spinner.vue
+++ b/resources/js/components/Spinner.vue
@@ -1,13 +1,9 @@
 <template>
     <div v-if="active" class="spinner-container">
         <div class="spinner-wrapper">
-            <div class="spinner">
-                <div class="rect-1"></div>
-                <div class="rect-2"></div>
-                <div class="rect-3"></div>
-                <div class="rect-4"></div>
-                <div class="rect-5"></div>
-            </div>
+            <span class="is-size-1 spinner">
+                <font-awesome-icon :icon="['fas', 'spinner']" spin />
+            </span>
             <span>{{ message }}</span>
         </div>
     </div>
@@ -39,58 +35,7 @@ export default {
     align-items: center;
     justify-content: center;
 }
-.spinner-wrapper p {
-    font-size: 1.2em;
-    font-weight: 300;
-    margin-top: 5px;
-    letter-spacing: 1px;
-}
 .spinner {
-    margin: auto;
-    width: 50px;
-    height: 40px;
-    text-align: center;
-    font-size: 10px;
-}
-.spinner > div {
-    height: 100%;
-    width: 6px;
-    display: inline-block;
-    --webkit-animation: stretch-delay 1.2s infinite ease-in-out;
-    animation: stretch-delay 1.2s infinite ease-in-out;
-}
-.spinner .rect-2 {
-    --webkit-animation-delay: -1.1s;
-    animation-delay: -1.1s;
-}
-.spinner .rect-3 {
-    --webkit-animation-delay: -1.0s;
-    animation-delay: -1.0s;
-}
-.spinner .rect-4 {
-    --webkit-animation-delay: -0.9s;
-    animation-delay: -0.9s;
-}
-.spinner .rect-5 {
-    --webkit-animation-delay: -0.8s;
-    animation-delay: -0.8s;
-}
-@-webkit-keyframes stretch-delay {
-    0%, 40%, 100% {
-        --webkit-transform: scaleY(0.4)
-    }
-    20% {
-        --webkit-transform: scaleY(1.0)
-    }
-}
-@keyframes stretch-delay {
-    0%, 40%, 100% {
-        transform: scaleY(0.4);
-        --webkit-transform: scaleY(0.4)
-    }
-    20% {
-        transform: scaleY(1.0);
-        --webkit-transform: scaleY(1.0)
-    }
+    display: block;
 }
 </style>
diff --git a/resources/js/views/Accounts.vue b/resources/js/views/Accounts.vue
index 164b5c4b..cbbaf869 100644
--- a/resources/js/views/Accounts.vue
+++ b/resources/js/views/Accounts.vue
@@ -425,8 +425,7 @@
                     this.$refs.OtpDisplayer.show(account.id);
                 }
             },
-
-
+            
             /**
              * Select an account while in edit mode
              */
diff --git a/resources/sass/app.scss b/resources/sass/app.scss
index b5efe9f8..ba85e22c 100644
--- a/resources/sass/app.scss
+++ b/resources/sass/app.scss
@@ -1209,18 +1209,12 @@ footer .field.is-grouped {
     background-color: $white-ter;
     .spinner {
         color: $dark;
-        > div {
-            background-color: $dark !important;
-        }
     }
 }
 :root[data-theme="dark"] .spinner-container {
     background-color: $black-ter;
     .spinner {
         color: $light;
-        > div {
-            background-color: $light !important;
-        }
     }
 }
 @media (prefers-color-scheme: dark) {
@@ -1228,9 +1222,6 @@ footer .field.is-grouped {
         background-color: $black-ter;
         .spinner {
             color: $light;
-            > div {
-                background-color: $light !important;
-            }
         }
     }
 }

From 68e3a8d10052ac66697df40121bf4cfb7acff0f4 Mon Sep 17 00:00:00 2001
From: Josh <josh@dolphinshipping.co.nz>
Date: Mon, 24 Apr 2023 23:09:50 +1200
Subject: [PATCH 4/4] 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             | 13 +++++++++----
 resources/js/components/App.vue | 11 +++++++++--
 resources/js/views/Accounts.vue | 10 +++-------
 3 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/resources/js/app.js b/resources/js/app.js
index 50165ac9..9f29b65d 100644
--- a/resources/js/app.js
+++ b/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() {
-            this.spinnerActive = true
+        showSpinner(message) {
+            this.spinner.message = message;
+            this.spinner.active = true;
         },
 
         hideSpinner() {
-            this.spinnerActive = false
+            this.spinner.active = false;
+            this.spinner.message = 'loading';
         }
     },
     i18n,
diff --git a/resources/js/components/App.vue b/resources/js/components/App.vue
index c3249fb5..52930527 100644
--- a/resources/js/components/App.vue
+++ b/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>
\ No newline at end of file
+</script>
diff --git a/resources/js/views/Accounts.vue b/resources/js/views/Accounts.vue
index cbbaf869..1fb9c2c2 100644
--- a/resources/js/views/Accounts.vue
+++ b/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,
-            Spinner
+            draggable
         },
 
         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
              */