Merge pull request #2399 from Particular/spinner-sequence-diagram

add loading spinner to sequence diagram

Author: johnsimons

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

@@ -7,9 +7,9 @@ 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 { maxWidth, maxHeight, isLoading } = storeToRefs(store);
 const endpointYOffset = ref(0);
 
 useTooltips();
@@ -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="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(() => conversationData.value.loading);
   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,