22.02 Add a Loading View for the Todo Page

src/pages/PageTodo.vue

@@ -3,41 +3,47 @@
 
     <div class="q-pa-md absolute full-width full-height column">
 
-      <div class="row q-mb-lg">
+      <template v-if="tasksDownloaded">
-        <search />
+        <div class="row q-mb-lg">
-        <sort />
+          <search />
-      </div>
+          <sort />
+        </div>
 
-      <q-scroll-area class="q-scroll-area-tasks">
+        <q-scroll-area class="q-scroll-area-tasks">
-        <p
+          <p
-          v-if="search && !Object.keys(tasksTodo).length && !Object.keys(tasksCompleted).length">
+            v-if="search && !Object.keys(tasksTodo).length && !Object.keys(tasksCompleted).length">
-          No Search Results
+            No Search Results
-        </p>
+          </p>
-        <noTasks
+          <noTasks
-          v-if="!Object.keys(tasksTodo).length && !search && !settings.showTasksInOnelist" />
+            v-if="!Object.keys(tasksTodo).length && !search && !settings.showTasksInOnelist" />
 
-        <tasks-todo
+          <tasks-todo
-          v-if="Object.keys(tasksTodo).length"
+            v-if="Object.keys(tasksTodo).length"
-          :tasksTodo="tasksTodo" />
+            :tasksTodo="tasksTodo" />
 
-        <tasks-completed
+          <tasks-completed
-          v-if="Object.keys(tasksCompleted).length"
+            v-if="Object.keys(tasksCompleted).length"
-          :tasksCompleted="tasksCompleted"
+            :tasksCompleted="tasksCompleted"
-          class="q-mb-xl" />
+            class="q-mb-xl" />
-      </q-scroll-area>
+        </q-scroll-area>
 
-      <div class="absolute-bottom text-center q-mb-lg no-pointer-events">
+        <div class="absolute-bottom text-center q-mb-lg no-pointer-events">
-        <q-btn
+          <q-btn
-          @click="showAddTask = true"
+            @click="showAddTask = true"
-          round
+            round
-          class="all-pointer-events"
+            class="all-pointer-events"
-          color="primary"
+            color="primary"
-          size="24px"
+            size="24px"
-          icon="add"
+            icon="add"
-        />
+          />
-      </div>
+        </div>
+      </template>
 
-  </div>
+      <template v-else>
+        <p>Loading...</p>
+      </template>
+
+    </div>
 
     <q-dialog v-model="showAddTask">
       <add-task @close="showAddTask = false" />
@@ -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 = {