Remove the custom spinner and reuse the fontawesome one that is already used in other areas.

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>

resources/js/views/Accounts.vue

@@ -425,8 +425,7 @@
                     this.$refs.OtpDisplayer.show(account.id);
                 }
             },
-
-
+            
             /**
              * Select an account while in edit mode
              */

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;
-            }
         }
     }
 }