From 4980fc66b27fe45ac46f1324bca9b12b0704ef35 Mon Sep 17 00:00:00 2001
From: Jayanthi <jayanthi.sourirajan@particular.net>
Date: Tue, 6 May 2025 13:04:16 -0700
Subject: [PATCH 1/2] add loading spinner in all messages

---
 src/Frontend/src/components/audit/AuditList.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/Frontend/src/components/audit/AuditList.vue b/src/Frontend/src/components/audit/AuditList.vue
index b1f2ba6aa..b94670bcc 100644
--- a/src/Frontend/src/components/audit/AuditList.vue
+++ b/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);
@@ -164,6 +165,7 @@ watch(autoRefreshValue, (newValue) => dataRetriever.updateTimeout(newValue));
       </div>
     </div>
     <div class="row results-table">
+      <LoadingSpinner v-if="isLoading" />
       <template v-for="message in messages" :key="message.id">
         <div class="item" @click="navigateToMessage(message)">
           <div class="status">

From 02172252ae77f9fdc8f969b2b99b82c528fc46bc Mon Sep 17 00:00:00 2001
From: John Simons <john.simons@particular.net>
Date: Wed, 7 May 2025 07:55:41 +1000
Subject: [PATCH 2/2] Only display main spinner on first load

---
 src/Frontend/src/components/audit/AuditList.vue | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/Frontend/src/components/audit/AuditList.vue b/src/Frontend/src/components/audit/AuditList.vue
index b94670bcc..a6fd1e10f 100644
--- a/src/Frontend/src/components/audit/AuditList.vue
+++ b/src/Frontend/src/components/audit/AuditList.vue
@@ -88,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(
@@ -110,7 +110,7 @@ watch(
 );
 
 const watchHandle = watch([() => route.query, itemsPerPage, sortBy, messageFilterString, selectedEndpointName, dateRange], async () => {
-  if (firstLoad) {
+  if (firstLoad.value) {
     return;
   }
 
@@ -165,7 +165,7 @@ watch(autoRefreshValue, (newValue) => dataRetriever.updateTimeout(newValue));
       </div>
     </div>
     <div class="row results-table">
-      <LoadingSpinner v-if="isLoading" />
+      <LoadingSpinner v-if="firstLoad" />
       <template v-for="message in messages" :key="message.id">
         <div class="item" @click="navigateToMessage(message)">
           <div class="status">