UI loading indicators part 1

src/components/Loading.svelte

@@ -0,0 +1,16 @@
+<div class="st-typography-label loading">
+  {#if $$slots.default}
+    <slot />
+  {:else}
+    Loading...
+  {/if}
+</div>
+
+<style>
+  .loading {
+    display: flex;
+    flex-direction: column;
+    user-select: none;
+    width: 100%;
+  }
+</style>

src/components/activity/ActivityDecomposition.svelte

@@ -12,7 +12,7 @@
   export let expanded = true;
   export let rootSpanId: SpanId | null = null;
   export let selectedSpanId: SpanId | null = null;
-  export let spansMap: SpansMap = {};
+  export let spansMap: SpansMap | null = {};
   export let spanUtilityMaps: SpanUtilityMaps;
   export let childPageSize: number = 25;
 
@@ -31,7 +31,7 @@
   let buttonClass: string = '';
   let childIdsInView: SpanId[] = [];
 
-  $: span = rootSpanId !== null ? spansMap[rootSpanId] : null;
+  $: span = rootSpanId !== null && spansMap !== null ? spansMap[rootSpanId] : null;
   $: isRoot = span ? !span.parent_id : true;
   $: type = span?.type || '';
   $: childIds = span !== null ? spanUtilityMaps?.spanIdToChildIdsMap[span?.span_id] || [] : [];
@@ -76,7 +76,7 @@
     </span>
   </div>
 
-  {#if hasChildren && expanded}
+  {#if hasChildren && expanded && spansMap}
     <ul>
       {#each childIdsInView as childId}
         <li>

src/components/activity/ActivityDirectivesTable.svelte

@@ -2,29 +2,29 @@
 
 <script lang="ts">
   import type { ColDef, ColumnState, ICellRendererParams } from 'ag-grid-community';
+  import { createEventDispatcher } from 'svelte';
   import { PlanStatusMessages } from '../../enums/planStatusMessages';
   import type { ActivityDirective, ActivityDirectiveId } from '../../types/activity';
   import type { User } from '../../types/app';
   import type { DataGridColumnDef } from '../../types/data-grid';
   import type { ActivityErrorCounts, ActivityErrorRollup } from '../../types/errors';
   import type { Plan } from '../../types/plan';
+  import {
+    canPasteActivityDirectivesFromClipboard,
+    copyActivityDirectivesToClipboard,
+    getActivityDirectivesToPaste,
+    getPasteActivityDirectivesText,
+  } from '../../utilities/activities';
   import effects from '../../utilities/effects';
   import { featurePermissions } from '../../utilities/permissions';
+  import ContextMenuItem from '../context-menu/ContextMenuItem.svelte';
+  import ContextMenuSeparator from '../context-menu/ContextMenuSeparator.svelte';
   import ActivityErrorsRollup from '../ui/ActivityErrorsRollup.svelte';
   import BulkActionDataGrid from '../ui/DataGrid/BulkActionDataGrid.svelte';
   import type DataGrid from '../ui/DataGrid/DataGrid.svelte';
   import DataGridActions from '../ui/DataGrid/DataGridActions.svelte';
-  import ContextMenuItem from '../context-menu/ContextMenuItem.svelte';
-  import ContextMenuSeparator from '../context-menu/ContextMenuSeparator.svelte';
-  import { createEventDispatcher } from 'svelte';
-  import {
-    canPasteActivityDirectivesFromClipboard,
-    copyActivityDirectivesToClipboard,
-    getPasteActivityDirectivesText,
-    getActivityDirectivesToPaste,
-  } from '../../utilities/activities';
 
-  export let activityDirectives: ActivityDirective[] = [];
+  export let activityDirectives: ActivityDirective[] | null = null;
   export let activityDirectiveErrorRollupsMap: Record<ActivityDirectiveId, ActivityErrorRollup> | undefined = undefined;
   export let columnDefs: ColDef[];
   export let columnStates: ColumnState[] = [];
@@ -62,7 +62,7 @@
   $: hasCreatePermission =
     plan !== null ? featurePermissions.activityDirective.canCreate(user, plan) && !planReadOnly : false;
 
-  $: activityDirectivesWithErrorCounts = activityDirectives.map(activityDirective => ({
+  $: activityDirectivesWithErrorCounts = (activityDirectives || []).map(activityDirective => ({
     ...activityDirective,
     errorCounts: activityDirectiveErrorRollupsMap?.[activityDirective.id]?.errorCounts,
   }));
@@ -154,7 +154,7 @@
 
   function scrollTimelineToActivityDirective() {
     const directiveId = bulkSelectedActivityDirectiveIds.length > 0 && bulkSelectedActivityDirectiveIds[0];
-    const directive = activityDirectives.find(item => item.id === directiveId) ?? null;
+    const directive = (activityDirectives || []).find(item => item.id === directiveId) ?? null;
     if (directive?.start_time_ms !== undefined && directive?.start_time_ms !== null) {
       dispatch('scrollTimelineToTime', directive.start_time_ms);
     }
@@ -188,6 +188,7 @@
   columnDefs={completeColumnDefs}
   {columnStates}
   {getRowId}
+  loading={!activityDirectives}
   {hasDeletePermission}
   hasDeletePermissionError={planReadOnly ? PlanStatusMessages.READ_ONLY : undefined}
   items={activityDirectivesWithErrorCounts}

src/components/activity/ActivityDirectivesTablePanel.svelte

@@ -213,7 +213,6 @@
       resizable: true,
       sortable: false,
       width: 220,
-      wrapText: true,
     },
     type: {
       field: 'type',
@@ -428,7 +427,7 @@
     <ActivityDirectivesTable
       bind:dataGrid
       bind:selectedActivityDirectiveId={$selectedActivityDirectiveId}
-      activityDirectives={Object.values($activityDirectivesMap)}
+      activityDirectives={$activityDirectivesMap ? Object.values($activityDirectivesMap) : null}
       activityDirectiveErrorRollupsMap={$activityErrorRollupsMap}
       {filterExpression}
       columnDefs={derivedColumnDefs ?? []}

src/components/activity/ActivityFormPanel.svelte

@@ -66,14 +66,14 @@
     previewRevision = undefined;
   }
 
-  $: if ($selectedActivityDirective) {
+  $: if ($selectedActivityDirective && $spansMap) {
     directiveRootSpanId =
       $spansMap[$spanUtilityMaps.directiveIdToSpanIdMap[$selectedActivityDirective.id]]?.span_id ?? null;
   } else {
     directiveRootSpanId = null;
   }
 
-  $: if ($selectedSpan) {
+  $: if ($selectedSpan && $spansMap) {
     const rootSpan = getSpanRootParent($spansMap, $selectedSpan.span_id);
     if (rootSpan) {
       spanDirectiveId = $spanUtilityMaps.spanIdToDirectiveIdMap[rootSpan.span_id] ?? null;
@@ -203,7 +203,7 @@
     {#if $selectedActivityDirective && $plan !== null && viewingActivityDirectiveChangelog}
       <ActivityDirectiveChangelog
         activityDirective={$selectedActivityDirective}
-        activityDirectivesMap={$activityDirectivesMap}
+        activityDirectivesMap={$activityDirectivesMap || {}}
         activityTypes={$activityTypes}
         modelId={$modelId}
         planStartTimeYmd={$plan.start_time}
@@ -213,7 +213,7 @@
       />
     {:else if $selectedActivityDirective && $plan !== null}
       <ActivityDirectiveForm
-        activityDirectivesMap={$activityDirectivesMap}
+        activityDirectivesMap={$activityDirectivesMap || {}}
         activityDirective={$selectedActivityDirective}
         activityMetadataDefinitions={$activityMetadataDefinitions}
         activityTypes={$activityTypes}

src/components/activity/ActivitySpanForm.svelte

@@ -23,7 +23,7 @@
   export let modelId: number;
   export let simulationDatasetId: number = -1;
   export let span: Span;
-  export let spansMap: SpansMap = {};
+  export let spansMap: SpansMap | null = {};
   export let spanUtilityMaps: SpanUtilityMaps;
   export let user: User | null;
 
@@ -40,7 +40,7 @@
   let startTime: string;
 
   $: activityType = (activityTypes ?? []).find(({ name: activityTypeName }) => span.type === activityTypeName) ?? null;
-  $: rootSpan = getSpanRootParent(spansMap, span.span_id);
+  $: rootSpan = !spansMap ? null : getSpanRootParent(spansMap, span.span_id);
   $: rootSpanHasChildren = (rootSpan && spanUtilityMaps.spanIdToChildIdsMap[rootSpan.span_id]?.length > 0) ?? false;
 
   $: startTime = formatDate(new Date(span.startMs), $plugins.time.primary.format);

src/components/activity/ActivitySpansTable.svelte

@@ -9,8 +9,9 @@
   export let columnDefs: ColDef[];
   export let columnStates: ColumnState[] = [];
   export let dataGrid: DataGrid<Span> | undefined = undefined;
+  export let loading: boolean = false;
   export let selectedSpanId: SpanId | null = null;
-  export let spans: Span[] = [];
+  export let spans: Span[] | null | undefined = undefined;
   export let filterExpression: string = '';
 
   let selectedItemIds: RowId[] = [];
@@ -36,7 +37,8 @@
   {filterExpression}
   {getRowId}
   useCustomContextMenu
-  rowData={spans}
+  rowData={spans || []}
+  {loading}
   rowSelection="single"
   scrollToSelection={true}
   suppressDragLeaveHidesColumns={false}

src/components/activity/ActivitySpansTablePanel.svelte

@@ -8,7 +8,7 @@
   import { InvalidDate } from '../../constants/time';
   import { selectActivity } from '../../stores/activities';
   import { plugins } from '../../stores/plugins';
-  import { selectedSpanId, spans } from '../../stores/simulation';
+  import { initialSpansLoading, selectedSpanId, spans } from '../../stores/simulation';
   import { view, viewTogglePanel, viewUpdateActivitySpansTable } from '../../stores/views';
   import type { Span } from '../../types/simulation';
   import type { AutoSizeColumns, ViewGridSection, ViewTable } from '../../types/view';
@@ -333,6 +333,7 @@
       columnDefs={derivedColumnDefs ?? []}
       columnStates={activitySpansTable?.columnStates}
       {filterExpression}
+      loading={$initialSpansLoading}
       spans={$spans}
       on:columnMoved={onColumnMoved}
       on:columnPinned={onColumnPinned}

src/components/activity/TimelineItemsPanel.svelte

@@ -72,7 +72,7 @@
     box-shadow: 0px -1px 0px inset var(--st-gray-20);
   }
 
-  :global(button.timeline-items-tab.selected) {
+  :global(.timeline-items-tabs .timeline-items-tabs-list button.timeline-items-tab.selected) {
     background-color: white;
     box-shadow:
       1px 0px 0px inset var(--st-gray-20),

src/components/constraints/ConstraintForm.svelte

@@ -226,7 +226,7 @@
 <PageTitle subTitle={pageSubtitle} title={pageTitle} />
 
 <AssociationForm
-  allMetadata={$constraints}
+  allMetadata={$constraints || []}
   defaultDefinitionCode={`export default (): Constraint => {\n\n}\n`}
   displayName="Constraint"
   {hasCreateDefinitionCodePermission}

src/components/constraints/Constraints.svelte

@@ -5,7 +5,7 @@
   import { base } from '$app/paths';
   import type { ICellRendererParams, ValueGetterParams } from 'ag-grid-community';
   import { SearchParameters } from '../../enums/searchParameters';
-  import { constraints, constraintsColumns } from '../../stores/constraints';
+  import { constraints, constraintsColumns, initialConstraintsLoading } from '../../stores/constraints';
   import type { User } from '../../types/app';
   import type { ConstraintMetadata } from '../../types/constraint';
   import type { DataGridColumnDef, DataGridRowSelection, RowId } from '../../types/data-grid';
@@ -82,7 +82,6 @@
       resizable: true,
       sortable: false,
       width: 220,
-      wrapText: true,
     },
   ];
   const permissionError = 'You do not have permission to create a constraint.';
@@ -94,15 +93,15 @@
   let hasPermission: boolean = false;
   let selectedConstraint: ConstraintMetadata | null = null;
 
-  $: filteredConstraints = $constraints.filter(constraint => {
+  $: filteredConstraints = ($constraints || []).filter(constraint => {
     const filterTextLowerCase = filterText.toLowerCase();
     const includesId = `${constraint.id}`.includes(filterTextLowerCase);
     const includesName = constraint.name.toLocaleLowerCase().includes(filterTextLowerCase);
     return includesId || includesName;
   });
   $: hasPermission = featurePermissions.constraints.canCreate(user);
   $: if (selectedConstraint !== null) {
-    const found = $constraints.findIndex(constraint => constraint.id === selectedConstraint?.id);
+    const found = ($constraints || []).findIndex(constraint => constraint.id === selectedConstraint?.id);
     if (found === -1) {
       selectedConstraint = null;
     }
@@ -166,14 +165,14 @@
 
   function deleteConstraintContext(event: CustomEvent<RowId[]>) {
     const id = event.detail[0] as number;
-    const constraint = $constraints.find(c => c.id === id);
+    const constraint = ($constraints || []).find(c => c.id === id);
     if (constraint) {
       deleteConstraint(constraint);
     }
   }
 
   function editConstraint({ id }: Pick<ConstraintMetadata, 'id'>) {
-    const constraint = $constraints.find(c => c.id === id);
+    const constraint = ($constraints || []).find(c => c.id === id);
     goto(`${base}/constraints/edit/${id}?${SearchParameters.REVISION}=${constraint?.versions[0].revision}`);
   }
 
@@ -230,8 +229,10 @@
     </svelte:fragment>
 
     <svelte:fragment slot="body">
-      {#if filteredConstraints.length}
+      {#if $initialConstraintsLoading || filteredConstraints.length}
         <SingleActionDataGrid
+          showLoadingSkeleton
+          loading={$initialConstraintsLoading}
           {columnDefs}
           hasEdit={true}
           {hasDeletePermission}

src/components/constraints/ConstraintsPanel.svelte

@@ -18,6 +18,9 @@
     constraintVisibilityMap,
     constraintsMap,
     constraintsStatus,
+    initialConstraintPlanSpecsLoading,
+    initialConstraintRunsLoading,
+    initialConstraintsLoading,
     setAllConstraintsVisible,
     setConstraintVisibility,
   } from '../../stores/constraints';
@@ -42,6 +45,7 @@
   import { required } from '../../utilities/validators';
   import CollapsibleListControls from '../CollapsibleListControls.svelte';
   import DatePickerField from '../form/DatePickerField.svelte';
+  import Loading from '../Loading.svelte';
   import GridMenu from '../menus/GridMenu.svelte';
   import DatePickerActionButton from '../ui/DatePicker/DatePickerActionButton.svelte';
   import Panel from '../ui/Panel.svelte';
@@ -113,7 +117,7 @@
   $: filteredConstraintResponses = Object.values(constraintToConstraintResponseMap).filter(r =>
     filteredConstraints.find(c => c.constraint_id === r.constraintId),
   );
-  $: numOfPrivateConstraints = $constraintPlanSpecs.length - $allowedConstraintSpecs.length;
+  $: numOfPrivateConstraints = ($constraintPlanSpecs || []).length - $allowedConstraintSpecs.length;
 
   $: totalViolationCount = getViolationCount(Object.values($constraintResponseMap));
   $: filteredViolationCount = getViolationCount(Object.values(filteredConstraintResponses));
@@ -313,7 +317,11 @@
     </CollapsibleListControls>
 
     <div class="pt-2">
-      {#if !filteredConstraints.length}
+      {#if $initialConstraintsLoading || $initialConstraintPlanSpecsLoading || $initialConstraintRunsLoading}
+        <div class="p-1">
+          <Loading />
+        </div>
+      {:else if !filteredConstraints.length}
         <div class="pt-1 st-typography-label filter-label-row">
           <div class="filter-label">No constraints found</div>
           <div class="private-label">

src/components/expansion/ExpansionRules.svelte

@@ -79,7 +79,6 @@
       resizable: true,
       sortable: false,
       width: 220,
-      wrapText: true,
     },
   ];
 

src/components/external-source/ExternalSourceManager.svelte

@@ -545,7 +545,7 @@
                 {#each selectedSourceLinkedDerivationGroupsPlans as linkedPlanDerivationGroup}
                   <div class="st-typography-body collapse-important-text">
                     <a href="{base}/plans/{linkedPlanDerivationGroup.plan_id}">
-                      {$plans.find(plan => {
+                      {($plans || []).find(plan => {
                         return linkedPlanDerivationGroup.plan_id === plan.id;
                       })?.name}
                     </a>

src/components/menus/PlanMenu.svelte

@@ -7,6 +7,7 @@
   import ChevronDownIcon from '@nasa-jpl/stellar/icons/chevron_down.svg?component';
   import { PlanStatusMessages } from '../../enums/planStatusMessages';
   import { planReadOnly } from '../../stores/plan';
+  import { initialPlanSnapshotsLoading } from '../../stores/planSnapshots';
   import { viewTogglePanel } from '../../stores/views';
   import type { User } from '../../types/app';
   import type { Plan } from '../../types/plan';
@@ -157,6 +158,7 @@
       {/if}
       <MenuDivider />
       <MenuItem
+        disabled={$initialPlanSnapshotsLoading}
         on:click={createPlanSnapshot}
         use={[
           [

src/components/modals/CreatePlanSnapshotModal.svelte

@@ -30,7 +30,7 @@
   }>();
 
   let createButtonDisabled: boolean = true;
-  let snapshotName: string = `${plan.name} – Snapshot ${$planSnapshots.length + 1}`;
+  let snapshotName: string = `${plan.name} – Snapshot ${($planSnapshots || []).length + 1}`;
   let snapshotDescription: string = '';
   let snapshotTags: Tag[] = [];