ensure loading only gets set to false once data is actually loaded

Author: PhilBastian

src/Frontend/src/components/failedmessages/DeletedMessages.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onBeforeMount, onMounted, ref, watch } from "vue";
+import { computed, onBeforeMount, ref, watch } from "vue";
 import { useShowToast } from "../../composables/toast";
 import { onBeforeRouteLeave } from "vue-router";
 import LicenseNotExpired from "../../components/LicenseNotExpired.vue";
@@ -78,9 +78,12 @@ watch(isRestoreInProgress, (restoreInProgress) => {
 
 onBeforeMount(async () => {
   loading.value = true;
+  //set status before mount to ensure no other controls/processes can cause extra refreshes during mount
   await store.setMessageStatus(FailedMessageStatus.Archived);
 });
-onMounted(() => (loading.value = false));
+watch(isRefreshing, () => {
+  if (!isRefreshing.value && loading.value) loading.value = false;
+});
 </script>
 
 <template>

src/Frontend/src/components/failedmessages/FailedMessages.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onBeforeMount, onMounted, ref, useTemplateRef, watch } from "vue";
+import { computed, onBeforeMount, ref, useTemplateRef, watch } from "vue";
 import { useShowToast } from "../../composables/toast";
 import { downloadFileFromString } from "../../composables/fileDownloadCreator";
 import { onBeforeRouteLeave } from "vue-router";
@@ -192,9 +192,12 @@ watch(isRetryOrDeleteOperationInProgress, (retryOrDeleteOperationInProgress) =>
 
 onBeforeMount(async () => {
   loading.value = true;
+  //set status before mount to ensure no other controls/processes can cause extra refreshes during mount
   await store.setMessageStatus(FailedMessageStatus.Unresolved);
 });
-onMounted(() => (loading.value = false));
+watch(isRefreshing, () => {
+  if (!isRefreshing.value && loading.value) loading.value = false;
+});
 </script>
 
 <template>

src/Frontend/src/components/failedmessages/PendingRetries.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onBeforeMount, onMounted, ref, useTemplateRef } from "vue";
+import { onBeforeMount, ref, useTemplateRef, watch } from "vue";
 import { useShowToast } from "../../composables/toast";
 import OrderBy from "@/components/OrderBy.vue";
 import LicenseNotExpired from "../../components/LicenseNotExpired.vue";
@@ -21,7 +21,7 @@ import { useStoreAutoRefresh } from "@/composables/useAutoRefresh";
 import { RetryPeriodOption, useRecoverabilityStore } from "@/stores/RecoverabilityStore";
 
 const loading = ref(false);
-const { autoRefresh } = useStoreAutoRefresh("messagesStore", useRecoverabilityStore, 5000);
+const { autoRefresh, isRefreshing } = useStoreAutoRefresh("messagesStore", useRecoverabilityStore, 5000);
 const { store } = autoRefresh();
 const { messages, totalCount, pageNumber, selectedPeriod, selectedQueue, endpoints } = storeToRefs(store);
 const configurationStore = useConfigurationStore();
@@ -124,9 +124,12 @@ async function periodChanged(period: RetryPeriodOption) {
 
 onBeforeMount(async () => {
   loading.value = true;
+  //set status before mount to ensure no other controls/processes can cause extra refreshes during mount
   await store.setMessageStatus(FailedMessageStatus.RetryIssued);
 });
-onMounted(() => (loading.value = false));
+watch(isRefreshing, () => {
+  if (!isRefreshing.value && loading.value) loading.value = false;
+});
 </script>
 
 <template>