add loading spinner to sequence diagram

Author: soujay

src/Frontend/src/components/messages2/SequenceDiagram.vue

@@ -7,7 +7,7 @@ import { useSequenceDiagramStore } from "@/stores/SequenceDiagramStore";
 import { storeToRefs } from "pinia";
 import useTooltips from "./SequenceDiagram/tooltipOverlay.ts";
 import { onMounted, ref } from "vue";
-
+import LoadingSpinner from "@/components/LoadingSpinner.vue";
 const store = useSequenceDiagramStore();
 const { maxWidth, maxHeight } = storeToRefs(store);
 const endpointYOffset = ref(0);
@@ -22,6 +22,7 @@ onMounted(() => store.refreshConversation());
     <div class="toolbar">
       <a class="help-link" target="_blank" href="https://docs.particular.net/servicepulse/sequence-diagram"><i class="fa fa-info-circle" /> Sequence Diagram Help</a>
     </div>
+    <LoadingSpinner v-if="store.isLoading" />
     <div class="outer" @scroll="(ev) => (endpointYOffset = (ev.target as Element).scrollTop)">
       <svg class="sequence-diagram" :style="{ width: `max(100%, ${isNaN(maxWidth) ? 0 : maxWidth}px)` }" :height="maxHeight + 20">
         <Timeline />

src/Frontend/src/stores/SequenceDiagramStore.ts

@@ -40,6 +40,7 @@ export const useSequenceDiagramStore = defineStore("SequenceDiagramStore", () =>
   const handlerLocations = ref<HandlerLocation[]>([]);
   const highlightId = ref<string>();
 
+  const isLoading = computed(() => state.value.loading || !endpoints.value.length || !handlers.value.length || !routes.value.length);
   const selectedId = computed(() => `${state.value.data.message_type ?? ""}(${state.value.data.id})`);
 
   watch(
@@ -104,6 +105,7 @@ export const useSequenceDiagramStore = defineStore("SequenceDiagramStore", () =>
     handlerLocations,
     highlightId,
     selectedId,
+    isLoading,
     setStartX,
     setMaxWidth,
     setMaxHeight,