Skip to content

Commit d5ccddd

Browse files
cquirosjcquirosj
committed
MessageData empty - fix flickering
Implement spinner
1 parent e877a27 commit d5ccddd

File tree

3 files changed

+83
-43
lines changed

3 files changed

+83
-43
lines changed

‎src/Frontend/src/components/messages2/SagaDiagram.vue‎

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { storeToRefs } from "pinia";
77
import ToolbarEndpointIcon from "@/assets/Shell_ToolbarEndpoint.svg";
88
import { SagaViewModel, parseSagaUpdates } from "./SagaDiagram/SagaDiagramParser";
99
import { typeToName } from "@/composables/typeHumanizer";
10+
import LoadingSpinner from "@/components/LoadingSpinner.vue";
1011
1112
//Subcomponents
1213
import NoSagaData from "./SagaDiagram/NoSagaData.vue";
@@ -16,7 +17,7 @@ import SagaUpdateNode from "./SagaDiagram/SagaUpdateNode.vue";
1617
import SagaCompletedNode from "./SagaDiagram/SagaCompletedNode.vue";
1718
1819
const sagaDiagramStore = useSagaDiagramStore();
19-
const { showMessageData } = storeToRefs(sagaDiagramStore);
20+
const { showMessageData, loading } = storeToRefs(sagaDiagramStore);
2021
2122
const messageStore = useMessageStore();
2223
@@ -77,14 +78,19 @@ const vm = computed<SagaViewModel>(() => {
7778
</button>
7879
</div>
7980

81+
<!-- Loading Spinner -->
82+
<div v-if="loading" class="loading-container">
83+
<LoadingSpinner />
84+
</div>
85+
8086
<!-- No saga Data Available container -->
81-
<NoSagaData v-if="!vm.ParticipatedInSaga" />
87+
<NoSagaData v-else-if="!vm.ParticipatedInSaga" />
8288

8389
<!-- Saga Audit Plugin Needed container -->
84-
<SagaPluginNeeded v-if="vm.ShowNoPluginActiveLegend" />
90+
<SagaPluginNeeded v-else-if="vm.ShowNoPluginActiveLegend" />
8591

8692
<!-- Main Saga Data container -->
87-
<div v-if="vm.HasSagaData" role="table" aria-label="saga-sequence-list" class="body" style="display: flex">
93+
<div v-else-if="vm.HasSagaData" role="table" aria-label="saga-sequence-list" class="body" style="display: flex">
8894
<div class="container">
8995
<!-- Saga header with title and navigation -->
9096
<SagaHeader :saga-title="vm.SagaTitle" :saga-guid="vm.SagaGuid" :message-id-url="vm.MessageIdUrl" />
@@ -127,6 +133,14 @@ const vm = computed<SagaViewModel>(() => {
127133
min-width: 50rem;
128134
}
129135
136+
.loading-container {
137+
display: flex;
138+
flex: 1;
139+
justify-content: center;
140+
align-items: center;
141+
min-height: 200px;
142+
}
143+
130144
/* Button styles */
131145
132146
.saga-button {

‎src/Frontend/src/components/messages2/SagaDiagram/MessageDataBox.vue‎

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,24 @@
11
<script setup lang="ts">
2-
import { SagaMessageDataItem } from "@/stores/SagaDiagramStore";
2+
import { SagaMessageDataItem, useSagaDiagramStore } from "@/stores/SagaDiagramStore";
3+
import { storeToRefs } from "pinia";
4+
import LoadingSpinner from "@/components/LoadingSpinner.vue";
35
46
defineProps<{
57
messageData: SagaMessageDataItem[];
68
}>();
9+
10+
const sagaDiagramStore = useSagaDiagramStore();
11+
const { messageDataLoading } = storeToRefs(sagaDiagramStore);
712
</script>
813

914
<template>
10-
<div v-if="messageData.length === 0" class="message-data-box">
15+
<div v-if="messageDataLoading" class="message-data-loading">
16+
<LoadingSpinner />
17+
</div>
18+
<div v-else-if="!messageDataLoading && messageData.length === 0" class="message-data-box">
1119
<span class="message-data-box-text--empty">Empty</span>
1220
</div>
13-
<div v-else v-for="(item, index) in messageData" :key="index" class="message-data-box">
21+
<div v-else-if="messageData.length > 0" v-for="(item, index) in messageData" :key="index" class="message-data-box">
1422
<b class="message-data-box-text">{{ item.key }}</b>
1523
<span class="message-data-box-text">=</span>
1624
<span class="message-data-box-text--ellipsis" :title="item.value">{{ item.value }}</span>
@@ -35,9 +43,16 @@ defineProps<{
3543
white-space: nowrap;
3644
text-overflow: ellipsis;
3745
}
46+
3847
.message-data-box-text--empty {
3948
display: inline-block;
4049
width: 100%;
4150
text-align: center;
4251
}
52+
53+
.message-data-loading {
54+
display: flex;
55+
justify-content: center;
56+
align-items: center;
57+
}
4358
</style>

‎src/Frontend/src/stores/SagaDiagramStore.ts‎

Lines changed: 47 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ export const useSagaDiagramStore = defineStore("SagaDiagramStore", () => {
1717
const sagaHistory = ref<SagaHistory | null>(null);
1818
const sagaId = ref<string | null>(null);
1919
const loading = ref(false);
20+
const messageDataLoading = ref(false);
2021
const error = ref<string | null>(null);
2122
const showMessageData = ref(false);
2223
const fetchedMessages = ref(new Set<string>());
@@ -51,6 +52,8 @@ export const useSagaDiagramStore = defineStore("SagaDiagramStore", () => {
5152

5253
try {
5354
const response = await useFetchFromServiceControl(`sagas/${id}`);
55+
//sleep the tread for 1 second
56+
await new Promise((resolve) => setTimeout(resolve, 5000));
5457

5558
if (response.status === 404) {
5659
sagaHistory.value = null;
@@ -79,8 +82,6 @@ export const useSagaDiagramStore = defineStore("SagaDiagramStore", () => {
7982

8083
async function fetchSagaMessageData(message: SagaMessage): Promise<SagaMessageData> {
8184
const bodyUrl = (message.body_url ?? formatUrl(MessageBodyEndpoint, message.message_id)).replace(/^\//, "");
82-
loading.value = true;
83-
error.value = null;
8485

8586
try {
8687
const response = await useFetchFromServiceControl(bodyUrl, { cache: "no-store" });
@@ -110,8 +111,6 @@ export const useSagaDiagramStore = defineStore("SagaDiagramStore", () => {
110111
} catch (e) {
111112
error.value = e instanceof Error ? e.message : "Unknown error occurred";
112113
return createEmptyMessageData(message.message_id);
113-
} finally {
114-
loading.value = false;
115114
}
116115
}
117116

@@ -202,50 +201,62 @@ export const useSagaDiagramStore = defineStore("SagaDiagramStore", () => {
202201
}
203202

204203
async function fetchMessagesData(history: SagaHistory) {
205-
// Get all messages from changes array - both initiating and outgoing
206-
const messagesToFetch = history.changes.flatMap((change) => {
207-
const messages: SagaMessage[] = [];
204+
messageDataLoading.value = true;
205+
error.value = null;
208206

209-
// Add initiating message if it exists and hasn't been fetched
210-
if (change.initiating_message && !fetchedMessages.value.has(change.initiating_message.message_id)) {
211-
messages.push(change.initiating_message);
212-
}
207+
await new Promise((resolve) => setTimeout(resolve, 5000));
213208

214-
// Add all unfetched outgoing messages
215-
if (change.outgoing_messages) {
216-
messages.push(...change.outgoing_messages.filter((msg) => !fetchedMessages.value.has(msg.message_id)));
217-
}
218-
return messages;
219-
});
220-
221-
// Check if any messages need body_url
222-
const needsBodyUrl = messagesToFetch.every((msg) => !msg.body_url);
223-
if (needsBodyUrl && messagesToFetch.length > 0) {
224-
const auditMessages = await getAuditMessages(sagaId.value!);
225-
messagesToFetch.forEach((message) => {
226-
const auditMessage = auditMessages.find((x: Message) => x.message_id === message.message_id);
227-
if (auditMessage) {
228-
message.body_url = auditMessage.body_url;
209+
try {
210+
// Get all messages from changes array - both initiating and outgoing
211+
const messagesToFetch = history.changes.flatMap((change) => {
212+
const messages: SagaMessage[] = [];
213+
214+
// Add initiating message if it exists and hasn't been fetched
215+
if (change.initiating_message && !fetchedMessages.value.has(change.initiating_message.message_id)) {
216+
messages.push(change.initiating_message);
217+
}
218+
219+
// Add all unfetched outgoing messages
220+
if (change.outgoing_messages) {
221+
messages.push(...change.outgoing_messages.filter((msg) => !fetchedMessages.value.has(msg.message_id)));
229222
}
223+
return messages;
230224
});
231-
}
232225

233-
// Fetch data for each unfetched message in parallel and store results
234-
const fetchPromises = messagesToFetch.map(async (message) => {
235-
const data = await fetchSagaMessageData(message);
236-
fetchedMessages.value.add(message.message_id);
237-
return data;
238-
});
226+
// Check if any messages need body_url
227+
const needsBodyUrl = messagesToFetch.every((msg) => !msg.body_url);
228+
if (needsBodyUrl && messagesToFetch.length > 0) {
229+
const auditMessages = await getAuditMessages(sagaId.value!);
230+
messagesToFetch.forEach((message) => {
231+
const auditMessage = auditMessages.find((x: Message) => x.message_id === message.message_id);
232+
if (auditMessage) {
233+
message.body_url = auditMessage.body_url;
234+
}
235+
});
236+
}
237+
238+
// Fetch data for each unfetched message in parallel and store results
239+
const fetchPromises = messagesToFetch.map(async (message) => {
240+
const data = await fetchSagaMessageData(message);
241+
fetchedMessages.value.add(message.message_id);
242+
return data;
243+
});
239244

240-
const newMessageData = await Promise.all(fetchPromises);
241-
// Add new message data to the existing array
242-
messagesData.value = [...messagesData.value, ...newMessageData];
245+
const newMessageData = await Promise.all(fetchPromises);
246+
// Add new message data to the existing array
247+
messagesData.value = [...messagesData.value, ...newMessageData];
248+
} catch (e) {
249+
error.value = e instanceof Error ? e.message : "Unknown error occurred";
250+
} finally {
251+
messageDataLoading.value = false;
252+
}
243253
}
244254

245255
return {
246256
sagaHistory,
247257
sagaId,
248258
loading,
259+
messageDataLoading,
249260
error,
250261
showMessageData,
251262
messagesData,

0 commit comments

Comments
 (0)