22.02 Add a Loading View for the Todo Page

src/pages/PageTodo.vue

@@ -3,6 +3,7 @@
 
     <div class="q-pa-md absolute full-width full-height column">
 
+      <template v-if="tasksDownloaded">
         <div class="row q-mb-lg">
           <search />
           <sort />
@@ -36,6 +37,11 @@
             icon="add"
           />
         </div>
+      </template>
+
+      <template v-else>
+        <p>Loading...</p>
+      </template>
 
     </div>
 
@@ -73,7 +79,7 @@ export default {
   computed: {
     ...mapGetters('tasks', ['tasksTodo', 'tasksCompleted']),
     ...mapGetters('settings', ['settings']),
-    ...mapState('tasks', ['search'])
+    ...mapState('tasks', ['search', 'tasksDownloaded'])
   },
   mounted () {
     this.$root.$on('showAddTask', () => {

src/store/store-tasks.js

@@ -26,7 +26,8 @@ const state = {
     */
   },
   search: '',
-  sort: 'name'
+  sort: 'name',
+  tasksDownloaded: false
 }
 
 const mutations = {
@@ -44,7 +45,11 @@ const mutations = {
   },
   setSort (state, value) {
     state.sort = value
-  }
+  },
+  setTasksDownloaded (state, value) {
+    state.tasksDownloaded = value
+  },
+
 }
 
 const actions = {