Merge pull request #2400 from Particular/spinner-all-messages

add loading spinner in all messages list page

Author: johnsimons

src/Frontend/src/components/audit/AuditList.vue

@@ -11,6 +11,7 @@ import { onBeforeMount, onUnmounted, ref, watch } from "vue";
 import RefreshConfig from "../RefreshConfig.vue";
 import useAutoRefresh from "@/composables/autoRefresh.ts";
 import throttle from "lodash/throttle";
+import LoadingSpinner from "@/components/LoadingSpinner.vue";
 
 const store = useAuditStore();
 const { messages, totalCount, sortBy, messageFilterString, selectedEndpointName, itemsPerPage, dateRange } = storeToRefs(store);
@@ -87,16 +88,16 @@ function navigateToMessage(message: Message) {
   });
 }
 
-let firstLoad = true;
+const firstLoad = ref(true);
 
 onBeforeMount(() => {
   setQuery();
 
   //without setTimeout, this happens before the store is properly initialised, and therefore the query route values aren't applied to the refresh
-  //TODO: is there a better way to achieve this?
-  setTimeout(async () => await Promise.all([dataRetriever.executeAndResetTimer(), store.loadEndpoints()]), 0);
-
-  firstLoad = false;
+  setTimeout(async () => {
+    await Promise.all([dataRetriever.executeAndResetTimer(), store.loadEndpoints()]);
+    firstLoad.value = false;
+  }, 0);
 });
 
 watch(
@@ -109,7 +110,7 @@ watch(
 );
 
 const watchHandle = watch([() => route.query, itemsPerPage, sortBy, messageFilterString, selectedEndpointName, dateRange], async () => {
-  if (firstLoad) {
+  if (firstLoad.value) {
     return;
   }
 
@@ -164,6 +165,7 @@ watch(autoRefreshValue, (newValue) => dataRetriever.updateTimeout(newValue));
       </div>
     </div>
     <div class="row results-table">
+      <LoadingSpinner v-if="firstLoad" />
       <template v-for="message in messages" :key="message.id">
         <div class="item" @click="navigateToMessage(message)">
           <div class="status">