Feat/loading indicators part 1

src/components/Loading.svelte

@@ -0,0 +1,10 @@
+<div class="st-typography-label loading">Loading...</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,6 +2,7 @@
 
 <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';
@@ -10,15 +11,14 @@
   import type { Plan } from '../../types/plan';
   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';
 
-  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[] = [];
@@ -49,7 +49,7 @@
 
   $: hasDeletePermission =
     plan !== null ? featurePermissions.activityDirective.canDelete(user, plan) && !planReadOnly : false;
-  $: activityDirectivesWithErrorCounts = activityDirectives.map(activityDirective => ({
+  $: activityDirectivesWithErrorCounts = (activityDirectives || []).map(activityDirective => ({
     ...activityDirective,
     errorCounts: activityDirectiveErrorRollupsMap?.[activityDirective.id]?.errorCounts,
   }));
@@ -140,7 +140,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);
     }
@@ -155,6 +155,7 @@
   columnDefs={completeColumnDefs}
   {columnStates}
   {getRowId}
+  loading={!activityDirectives}
   {hasDeletePermission}
   hasDeletePermissionError={planReadOnly ? PlanStatusMessages.READ_ONLY : undefined}
   items={activityDirectivesWithErrorCounts}

src/components/activity/ActivityDirectivesTablePanel.svelte

@@ -11,6 +11,7 @@
     ValueGetterParams,
   } from 'ag-grid-community';
   import { debounce } from 'lodash-es';
+  import { get } from 'svelte/store';
   import { InvalidDate } from '../../constants/time';
   import { activityDirectivesMap, selectActivity, selectedActivityDirectiveId } from '../../stores/activities';
   import { activityErrorRollupsMap } from '../../stores/errors';
@@ -22,6 +23,7 @@
   import type { AutoSizeColumns, ViewGridSection, ViewTable } from '../../types/view';
   import { filterEmpty } from '../../utilities/generic';
   import { formatDate, getUnixEpochTimeFromInterval } from '../../utilities/time';
+  import { getTimeRangeAroundTime } from '../../utilities/timeline';
   import { tooltip } from '../../utilities/tooltip';
   import GridMenu from '../menus/GridMenu.svelte';
   import DataGrid from '../ui/DataGrid/DataGrid.svelte';
@@ -30,8 +32,6 @@
   import Panel from '../ui/Panel.svelte';
   import ActivityDirectivesTable from './ActivityDirectivesTable.svelte';
   import ActivityTableMenu from './ActivityTableMenu.svelte';
-  import { get } from 'svelte/store';
-  import { getTimeRangeAroundTime } from '../../utilities/timeline';
 
   export let gridSection: ViewGridSection;
   export let user: User | null;
@@ -414,7 +414,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

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

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/modals/DeleteActivitiesModal.svelte

@@ -36,7 +36,7 @@
     delete: ActivityDirectiveDeletionMap;
   }>();
 
-  $: if (Object.keys($activityDirectivesMap).length) {
+  $: if ($activityDirectivesMap && Object.keys($activityDirectivesMap).length) {
     anchoredActivitiesMap = Object.values($activityDirectivesMap).reduce(
       (previousValue: AnchoredActivityDirectivesMap, directive: ActivityDirective) => {
         if (!activityIds.includes(directive.id)) {
@@ -230,7 +230,9 @@
               <div class="directive">
                 <div class="directive-to-delete" class:ignored={!activityDirectivesToDeleteMap[activityId]}>
                   <div class="directive-name">
-                    <ActivityDirectiveIcon label={`${activityId} - ${$activityDirectivesMap[activityId]?.name}`} />
+                    <ActivityDirectiveIcon
+                      label={`${activityId} - ${($activityDirectivesMap || {})[activityId]?.name}`}
+                    />
                   </div>
                   <div class="delete-checkbox">
                     <label>

src/components/modals/DeleteExternalSourceModal.svelte

@@ -62,7 +62,7 @@
               >
                 {#each link.plan_ids as plan_id}
                   <a href="{base}/plans/{plan_id}">
-                    {$plans.find(plan => plan_id === plan.id)?.name}
+                    {($plans || []).find(plan => plan_id === plan.id)?.name}
                   </a>
                 {/each}
               </Collapse>

src/components/modals/SavedViewsModal.svelte

@@ -25,12 +25,12 @@
     close: void;
   }>();
 
-  let userViews: ViewSlim[] = [];
+  let userViews: ViewSlim[] | null = null;
 
-  $: userViews = $views.filter((view: ViewSlim) => view.owner === user?.id);
+  $: userViews = $views === null ? null : $views.filter((view: ViewSlim) => view.owner === user?.id);
 
   async function deleteView({ detail: viewId }: CustomEvent<number>) {
-    const matchingView = $views.find(v => v.id === viewId);
+    const matchingView = ($views || []).find(v => v.id === viewId);
     if (matchingView) {
       const success = await effects.deleteView(matchingView, user);
 
@@ -43,7 +43,7 @@
   }
 
   async function deleteViews({ detail: viewIds }: CustomEvent<number[]>) {
-    const matchingViews = $views.filter(v => viewIds.some(viewId => viewId === v.id));
+    const matchingViews = ($views || []).filter(v => viewIds.some(viewId => viewId === v.id));
     const success = await effects.deleteViews(matchingViews, user);
 
     if (success) {

src/components/model/Models.svelte

@@ -30,6 +30,7 @@
   import ModelStatusRollup from './ModelStatusRollup.svelte';
 
   export let user: User | null;
+  export let initialModels: ModelSlim[] = [];
 
   type CellRendererParams = {
     deleteModel: (model: ModelSlim) => void;
@@ -77,6 +78,7 @@
   let selectedModelId: number | null = null;
   let version = '';
 
+  $: models.updateValue(() => initialModels);
   $: createButtonDisabled = !files || name === '' || version === '' || $creatingModel === true;
   $: {
     hasCreateModelPermission = featurePermissions.model.canCreate(user);
@@ -449,24 +451,21 @@
     </svelte:fragment>
 
     <svelte:fragment slot="body">
-      {#if $models.length}
-        <SingleActionDataGrid
-          {columnDefs}
-          columnsToForceRefreshOnDataUpdate={['id']}
-          hasEdit={hasUpdateModelPermission}
-          hasEditPermission={hasUpdateModelPermission}
-          hasDeletePermission={hasDeleteModelPermission}
-          itemDisplayText="Model"
-          items={$models}
-          {user}
-          selectedItemId={selectedModel?.id ?? null}
-          on:deleteItem={deleteModelContext}
-          on:editItem={editModelContext}
-          on:rowClicked={({ detail }) => selectModel(detail.data.id)}
-        />
-      {:else}
-        No Models Found
-      {/if}
+      <SingleActionDataGrid
+        {columnDefs}
+        columnsToForceRefreshOnDataUpdate={['id']}
+        hasEdit={hasUpdateModelPermission}
+        hasEditPermission={hasUpdateModelPermission}
+        hasDeletePermission={hasDeleteModelPermission}
+        itemDisplayText="Model"
+        items={$models}
+        showLoadingSkeleton
+        {user}
+        selectedItemId={selectedModel?.id ?? null}
+        on:deleteItem={deleteModelContext}
+        on:editItem={editModelContext}
+        on:rowClicked={({ detail }) => selectModel(detail.data.id)}
+      />
     </svelte:fragment>
   </Panel>
 </CssGrid>

src/components/plan/PlanForm.svelte

@@ -11,7 +11,7 @@
   import { plugins } from '../../stores/plugins';
   import { simulationDataset, simulationDatasetId } from '../../stores/simulation';
   import { viewTogglePanel } from '../../stores/views';
-  import type { ActivityDirective, ActivityDirectiveId } from '../../types/activity';
+  import type { ActivityDirectivesMap } from '../../types/activity';
   import type { User, UserId } from '../../types/app';
   import type { Plan, PlanCollaborator, PlanSlimmer } from '../../types/plan';
   import type { PlanSnapshot as PlanSnapshotType } from '../../types/plan-snapshot';
@@ -35,7 +35,7 @@
   import PlanSnapshot from './PlanSnapshot.svelte';
 
   export let plan: Plan | null;
-  export let activityDirectivesMap: Record<ActivityDirectiveId, ActivityDirective> = {};
+  export let activityDirectivesMap: ActivityDirectivesMap | null = {};
   export let planTags: Tag[];
   export let tags: Tag[] = [];
   export let user: User | null;
@@ -51,7 +51,7 @@
   let planNameField = field<string>('', [
     required,
     unique(
-      $plans.filter(p => p.id !== plan?.id).map(p => p.name),
+      ($plans || []).filter(p => p.id !== plan?.id).map(p => p.name),
       'Plan name already exists',
     ),
   ]);
@@ -152,7 +152,7 @@
   }
 
   async function onExportPlan() {
-    if (plan) {
+    if (plan && activityDirectivesMap) {
       if (planExportAbortController) {
         planExportAbortController.abort();
       }

src/components/scheduling/goals/SchedulingGoalAnalysesActivities.svelte

@@ -13,15 +13,16 @@
   let satisfyingActivities: ActivityDirective[] = [];
 
   $: analysis = analyses[0] || null;
-  $: satisfyingActivities = analysis
-    ? analysis.satisfying_activities.reduce((satisfyingActivities: ActivityDirective[], { activity_id }) => {
-        const activityDirective = $activityDirectivesMap[activity_id];
-        if (activityDirective) {
-          satisfyingActivities.push(activityDirective);
-        }
-        return satisfyingActivities;
-      }, [])
-    : [];
+  $: satisfyingActivities =
+    analysis && $activityDirectivesMap
+      ? analysis.satisfying_activities.reduce((satisfyingActivities: ActivityDirective[], { activity_id }) => {
+          const activityDirective = ($activityDirectivesMap || {})[activity_id];
+          if (activityDirective) {
+            satisfyingActivities.push(activityDirective);
+          }
+          return satisfyingActivities;
+        }, [])
+      : [];
   $: sortedSatisfyingActivities = satisfyingActivities.sort(sortActivityDirectivesOrSpans);
 </script>
 

src/components/simulation/SimulationEventsPanel.svelte

@@ -106,7 +106,7 @@
       resizable: true,
       sortable: true,
       valueGetter: params => {
-        if (params.data?.span_id) {
+        if ($spansMap && params.data?.span_id) {
           const span = $spansMap[params.data?.span_id] || null;
           if (span) {
             return JSON.stringify(span);