Making show message data lazy load again

Author: cquirosj

src/Frontend/src/stores/SagaDiagramStore.ts

@@ -23,20 +23,22 @@ export const useSagaDiagramStore = defineStore("SagaDiagramStore", () => {
   const messagesData = ref<SagaMessageData[]>([]);
   const MessageBodyEndpoint = "messages/{0}/body";
 
-  // Watch the sagaId and trigger fetches when it changes
+  // Watch the sagaId and fetch saga history when it changes
   watch(sagaId, async (newSagaId) => {
     if (newSagaId) {
       await fetchSagaHistory(newSagaId);
-
-      // If saga history was successfully fetched, fetch message data
-      if (sagaHistory.value) {
-        await fetchMessagesData(sagaHistory.value);
-      }
     } else {
       clearSagaHistory();
     }
   });
 
+  // Watch both showMessageData and sagaHistory together
+  watch([showMessageData, sagaHistory], async ([show, history]) => {
+    if (show && history) {
+      await fetchMessagesData(history);
+    }
+  });
+
   function setSagaId(id: string | null) {
     sagaId.value = id;
   }