Apply suggestions from code review

Author: johnsimons

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

@@ -9,7 +9,7 @@ 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,7 +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" />
+    <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,7 +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 isLoading = computed(() => conversationData.value.loading);
   const selectedId = computed(() => `${state.value.data.message_type ?? ""}(${state.value.data.id})`);
 
   watch(