Add loading indicators (#211)

src/components/DirectNeighbors.vue

@@ -45,6 +45,8 @@
       :sort-by="sortBy"
       :search="searchFilter"
       hover
+      :loading="loading"
+      loading-text="Loading data..."
     >
       <!-- <tr> -->
       <template v-slot:item.direction="{ item }">

src/components/EntitySelector.vue

@@ -15,7 +15,7 @@
   >
     <template v-slot:no-data>
       <v-list-item>
-        <v-list-item-title>Start typing...</v-list-item-title>
+        <v-list-item-title>No entities found...</v-list-item-title>
       </v-list-item>
     </template>
     <template v-slot:chip="{ props, item }">
@@ -85,12 +85,11 @@ export default {
       selectedEntity: null
     };
   },
+  mounted() {
+    this.loadObjects("");
+  },
   methods: {
     async loadObjects(searchQuery: String = "") {
-      if (searchQuery.length == 0) {
-        this.items = [];
-        return;
-      }
       const params = { query: { name: searchQuery }, count: 20 };
       const entities = (await axios.post("/api/v2/entities/search", params)).data.entities;
       const indicators = (await axios.post("/api/v2/indicators/search", params)).data.indicators;

src/components/ObjectList.vue

@@ -18,6 +18,8 @@
       :item-value="item => item.id"
       hover
       :sort-by="sortBy"
+      :loading="loading"
+      loading-text="Loading data..."
     >
       <template v-slot:item.name="{ item }">
         <span class="short-links">
@@ -121,7 +123,8 @@ export default {
       page: 1,
       perPage: 20,
       total: 0,
-      sortBy: [{ key: "name", order: "asc" }]
+      sortBy: [{ key: "name", order: "asc" }],
+      loading: true
     };
   },
   methods: {
@@ -167,6 +170,7 @@ export default {
       itemsPerPage: number;
       sortBy: Array<{ key: string; order: string }>;
     }) {
+      this.loading = true;
       let params = {
         page: page - 1,
         count: itemsPerPage === -1 ? 0 : itemsPerPage,
@@ -177,13 +181,18 @@ export default {
       if (this.searchSubtype != "") {
         params["type"] = this.searchSubtype;
       }
-      axios.post(`/api/v2/${this.searchType}/search`, params).then(response => {
-        this.items = response.data[this.searchType];
-        if (response.data.total != this.total) {
-          this.total = response.data.total;
-          this.$emit("totalUpdated", this.total);
-        }
-      });
+      axios
+        .post(`/api/v2/${this.searchType}/search`, params)
+        .then(response => {
+          this.items = response.data[this.searchType];
+          if (response.data.total != this.total) {
+            this.total = response.data.total;
+            this.$emit("totalUpdated", this.total);
+          }
+        })
+        .finally(() => {
+          this.loading = false;
+        });
     }
   }
 };

src/views/TagsAdmin.vue

@@ -9,6 +9,8 @@
       density="compact"
       :search="tagFilterDebounced"
       @update:options="searchTags"
+      :loading="loading"
+      loading-text="Loading tags..."
     >
       <template v-slot:item.name="{ item }">
         <v-chip color="primary" @click="selectTag(item)" density="compact">{{ item.name }}</v-chip>
@@ -141,6 +143,7 @@ export default {
   },
   methods: {
     searchTags({ page, itemsPerPage, sortBy }) {
+      this.loading = true;
       axios
         .post(`/api/v2/tags/search`, { name: this.tagFilter, page: page - 1, count: itemsPerPage })
         .then(response => {
@@ -150,7 +153,9 @@ export default {
         .catch(error => {
           return console.log(error);
         })
-        .finally(() => {});
+        .finally(() => {
+          this.loading = false;
+        });
     },
     selectTag(selectedTag) {
       this.selectedTag = selectedTag;