Renamed Loader to Spinner, added theming and localization

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,

resources/js/components/Loader.vue

@@ -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>

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();
                 }
             },
 

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>

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

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',
-];
+];

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