22.04 Hide Loading View when Tasks Downloaded

src/pages/PageTodo.vue

@@ -3,7 +3,16 @@
 
     <div class="q-pa-md absolute full-width full-height column">
 
-      <template v-if="tasksDownloaded">
+      <template v-if="!tasksDownloaded">
+        <div class="absolute-center">
+          <q-spinner
+            color="primary"
+            size="6em"
+          ></q-spinner>
+        </div>
+      </template>
+
+      <template v-else>
         <div class="row q-mb-lg">
           <search />
           <sort />
@@ -39,15 +48,6 @@
         </div>
       </template>
 
-      <template v-else>
-        <div class="absolute-center">
-          <q-spinner
-            color="primary"
-            size="6em"
-          ></q-spinner>
-        </div>
-      </template>
-
     </div>
 
     <q-dialog v-model="showAddTask">

src/store/store-auth.js

@@ -35,6 +35,7 @@ const actions = {
       })
   },
   logoutUser () {
+    console.log('xx')
     firebaseAuth.signOut()
   },
   handleAuthStateChange ({ commit, dispatch }) {
@@ -47,6 +48,7 @@ const actions = {
         dispatch('tasks/fbReadData', null, { root: true })
       } else {
         commit('setLoggedIn', false)
+        commit('/tasks/setTasksDownloaded', false, { root: true })
         this.$router.replace('/auth').catch(err => { })
       }
     })

src/store/store-tasks.js

@@ -76,6 +76,11 @@ const actions = {
     const userId = firebaseAuth.currentUser.uid
     const userTasks = firebaseDb.ref('tasks/' + userId)
 
+    // initial chcek for data
+    userTasks.once('value', snapshot => {
+      commit('setTasksDownloaded', true)
+    })
+
     // child added
     userTasks.on('child_added', snapshot => {
       const task = snapshot.val()