Display a loading indicator when a line or x-range layer is awaiting …

…resource download

src/components/timeline/Row.svelte

@@ -5,7 +5,7 @@
   import { select } from 'd3-selection';
   import { pick } from 'lodash-es';
   import { createEventDispatcher } from 'svelte';
-  import { allResources } from '../../stores/simulation';
+  import { allResources, fetchingResources } from '../../stores/simulation';
   import { selectedRow } from '../../stores/views';
   import type {
     ActivityDirective,
@@ -114,6 +114,7 @@
   $: overlaySvgSelection = select(overlaySvg);
   $: rowClasses = classNames('row', { 'row-collapsed': !expanded });
   $: hasActivityLayer = !!layers.find(layer => layer.chartType === 'activity');
+  $: hasResourceLayer = !!layers.find(layer => layer.chartType === 'line' || layer.chartType === 'x-range');
 
   // Compute scale domains for axes since it is optionally defined in the view
   $: if ($allResources && yAxes) {
@@ -290,6 +291,10 @@
           {/if}
         </g>
       </svg>
+      <!-- Loading indicator -->
+      {#if hasResourceLayer && $fetchingResources}
+        <div class="loading st-typography-label">Loading</div>
+      {/if}
       <!-- Layers of Canvas Visualizations. -->
       <div class="layers" style="width: {drawWidth}px">
         {#each layers as layer (layer.id)}
@@ -482,4 +487,17 @@
   .active-row :global(.row-header) {
     background: rgba(47, 128, 237, 0.06);
   }
+
+  .loading {
+    align-items: center;
+    color: var(--st-gray-50);
+    display: flex;
+    font-size: 10px;
+    height: 100%;
+    justify-content: center;
+    pointer-events: none;
+    position: absolute;
+    width: 100%;
+    z-index: 3;
+  }
 </style>