Rely on Vuex for loading state indications

lib/www/client/source/src/views/Calendar.vue

@@ -87,7 +87,7 @@
 </template>
 
 <script>
-import { mapActions } from 'vuex'
+import { mapActions, mapGetters } from 'vuex';
 
 export default {
   name: "Calendar",
@@ -99,7 +99,6 @@ export default {
       focus: "",
       events: [
       ],
-      loading: false,
       options: {
         sortBy: "sequence"
       }
@@ -116,13 +115,14 @@ export default {
       };
 
       return labels[this.type];
-    }
+    },
+
+    ...mapGetters(['loading'])
   },
 
   methods: {
 
     async getEvents () {
-      this.loading = true;
       const query = new URLSearchParams(this.options);
       const url = `/project/${this.$route.params.project}/sequence?${query.toString()}`;
 
@@ -139,8 +139,6 @@ export default {
         e.name = `Sequence ${s.sequence}`;
         return e;
       });
-
-      this.loading = false;
     },
 
     getEventColour (event) {

lib/www/client/source/src/views/LineList.vue

@@ -22,7 +22,7 @@
 </template>
 
 <script>
-import { mapActions } from 'vuex';
+import { mapActions, mapGetters } from 'vuex';
 
 export default {
   name: "LineList",
@@ -70,7 +70,6 @@ export default {
       ],
       items: [],
       options: {},
-      loading: false,
       num_lines: null
     }
   },
@@ -84,6 +83,10 @@ export default {
     }
   },
 
+  computed: {
+    ...mapGetters(['loading'])
+  },
+
   methods: {
 
     async getNumLines () {
@@ -92,7 +95,6 @@ export default {
     },
 
     async getLines () {
-      this.loading = true;
 
       const query = new URLSearchParams(this.options);
       if (this.options.itemsPerPage < 0) {
@@ -102,7 +104,6 @@ export default {
 
       this.items = await this.api([url]) || [];
 
-      this.loading = false;
     },
 
     ...mapActions(["api"])

lib/www/client/source/src/views/Log.vue

@@ -231,7 +231,7 @@
 </template>
 
 <script>
-import { mapActions } from 'vuex';
+import { mapActions, mapGetters } from 'vuex';
 import DougalContextMenu from '@/components/context-menu';
 import DougalEventEditDialog from '@/components/event-edit-dialog'
 
@@ -290,7 +290,6 @@ export default {
       labels: {},
       options: {},
       filter: "",
-      loading: false,
       eventCount: null,
       eventDialog: false,
       defaultEventTimestamp: null,
@@ -339,7 +338,10 @@ export default {
         }
       }
       return filtered;
-    }
+    },
+
+    ...mapGetters(['loading'])
+
   },
 
   watch: {
@@ -370,7 +372,6 @@ export default {
     },
 
     async getEvents () {
-      this.loading = true;
 
       const query = new URLSearchParams(this.options);
       if (this.options.itemsPerPage < 0) {
@@ -393,7 +394,6 @@ export default {
 
       this.items = await this.api([url]) || [];
 
-      this.loading = false;
     },
 
     async getLabelDefinitions () {

lib/www/client/source/src/views/Map.vue

@@ -20,7 +20,7 @@
 
 <script>
 import L from 'leaflet'
-import { mapActions } from 'vuex'
+import { mapActions, mapGetters } from 'vuex';
 import ftstamp from '@/lib/FormatTimestamp'
 import zoomFitIcon from '@/assets/zoom-fit-best.svg'
 
@@ -168,37 +168,28 @@ export default {
   },
 
   computed: {
-    loading () {
-      return this.requestsCount > 0;
-    }
+    ...mapGetters(['loading'])
   },
 
   watch: {
     loading (isLoading) {
-      if (isLoading) {
-        document.getElementById("loadingControl").classList.remove("d-none");
-      } else {
-        document.getElementById("loadingControl").classList.add("d-none");
+      const el = document.getElementById("loadingControl");
+      if (el) {
+        if (isLoading) {
+          el.classList.remove("d-none");
+        } else {
+          el.classList.add("d-none");
+        }
       }
     }
   },
 
   methods: {
 
-    queueRequest () {
-      this.requestsCount++;
-    },
-
-    dequeueRequest () {
-      (--this.requestsCount < 0) && (this.requestsCount = 0);
-    },
-
     async fitProjectBounds () {
-      this.queueRequest();
       const res = await this.api([`/project/${this.$route.params.project}/gis`]);
       const bbox = new L.GeoJSON(res);
       map.fitBounds(bbox.getBounds());
-      this.dequeueRequest();
     },
 
     async refreshLayers (layerset) {
@@ -219,7 +210,6 @@ export default {
         if (map.hasLayer(l.layer)) {
           // Firing all refresh events asynchronously, which is OK provided
           // we don't have hundreds of layers to be refreshed.
-          this.queueRequest();
           await this.api([l.url(query)]).then( (layer) => {
             l.layer.clearLayers();
             if ((layer.features && layer.features.length < limit) || ("length" in layer && layer.length < limit)) {
@@ -227,7 +217,6 @@ export default {
             } else {
               console.warn("Too much data from", l.url(query));
             }
-            this.dequeueRequest();
           })
         }
       }

lib/www/client/source/src/views/ProjectList.vue

@@ -32,7 +32,7 @@ td p:last-of-type {
 </style>
 
 <script>
-import { mapActions } from 'vuex';
+import { mapActions, mapGetters } from 'vuex';
 
 export default {
   name: "ProjectList",
@@ -67,10 +67,13 @@ export default {
       ],
       items: [],
       options: {},
-      loading: false
     }
   },
 
+  computed: {
+    ...mapGetters(['loading'])
+  },
+
   methods: {
     async list () {
       this.items = await this.api(["/project/"]) || [];
@@ -84,7 +87,6 @@ export default {
     },
 
     async load () {
-      this.loading = true;
       await this.list();
       const promises = [];
       for (const key in this.items) {
@@ -97,7 +99,6 @@ export default {
         });
         promises.push(promise);
       }
-      Promise.all(promises).finally( () => this.loading = false);
     },
 
     ...mapActions(["api"])

lib/www/client/source/src/views/SequenceList.vue

@@ -189,7 +189,7 @@ td span {
 </style>
 
 <script>
-import { mapActions } from 'vuex';
+import { mapActions, mapGetters } from 'vuex';
 import { basename } from 'path';
 
 export default {
@@ -292,11 +292,14 @@ export default {
       items: [],
       filter: "",
       options: {},
-      loading: false,
       num_rows: null
     }
   },
 
+  computed: {
+    ...mapGetters(['loading'])
+  },
+
   watch: {
     options: {
       handler () {
@@ -314,7 +317,6 @@ export default {
     },
 
     async getSequences () {
-      this.loading = true;
 
       const query = new URLSearchParams(this.options);
       query.set("filter", this.filter);
@@ -326,7 +328,6 @@ export default {
 
       this.items = await this.api([url]) || [];
 
-      this.loading = false;
     },
 
     basename (path, ext) {