diff --git a/src/components/timeline/Row.svelte b/src/components/timeline/Row.svelte index 99026bf717..09c66892c9 100644 --- a/src/components/timeline/Row.svelte +++ b/src/components/timeline/Row.svelte @@ -6,7 +6,7 @@ import { zoom as d3Zoom, zoomIdentity, type D3ZoomEvent, type ZoomBehavior, type ZoomTransform } from 'd3-zoom'; 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, @@ -118,6 +118,7 @@ $: overlaySvgSelection = select(overlaySvg) as Selection; $: 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) { @@ -333,6 +334,10 @@ {/if} + + {#if hasResourceLayer && $fetchingResources} +
Loading
+ {/if}
{#each layers as layer (layer.id)} @@ -526,4 +531,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; + }