18.13 Show a Loading Overlay when Logging In

src/functions/function-show-error-message.js

@@ -1,6 +1,7 @@
-import { Dialog } from 'quasar'
+import { Dialog, Loading } from 'quasar'
 
 export function showErrorMessage (errorMessage) {
+  Loading.hide()
   Dialog.create({
     title: 'Error',
     message: errorMessage

src/store/store-auth.js

@@ -1,4 +1,4 @@
-import { LocalStorage } from 'quasar'
+import { LocalStorage, Loading } from 'quasar'
 import { firebaseAuth } from 'boot/firebase'
 import { showErrorMessage } from 'src/functions/function-show-error-message'
 
@@ -15,6 +15,7 @@ const mutations = {
 
 const actions = {
   registerUser ({ commit }, payload) {
+    Loading.show()
     firebaseAuth.createUserWithEmailAndPassword(payload.email, payload.password)
       .then(response => {
         console.log('response: ', response)
@@ -24,6 +25,7 @@ const actions = {
       })
   },
   loginUser ({ commit }, payload) {
+    Loading.show()
     firebaseAuth.signInWithEmailAndPassword(payload.email, payload.password)
       .then(response => {
         console.log('response: ', response)
@@ -37,6 +39,7 @@ const actions = {
   },
   handleAuthStateChange ({ commit }) {
     firebaseAuth.onAuthStateChanged(user => {
+      Loading.hide()
       if (user) {
         commit('setLoggedIn', true)
         /* eslint handle-callback-err: "off" */