Loading for plan snapshots

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 { planSnapshotsLoading } 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={$planSnapshotsLoading}
         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[] = [];
 

src/components/plan/PlanForm.svelte

@@ -6,7 +6,12 @@
   import { SearchParameters } from '../../enums/searchParameters';
   import { field } from '../../stores/form';
   import { planMetadata, planReadOnly, planReadOnlySnapshot } from '../../stores/plan';
-  import { planSnapshotId, planSnapshotsWithSimulations } from '../../stores/planSnapshots';
+  import {
+    planSnapshotId,
+    planSnapshots,
+    planSnapshotsLoading,
+    planSnapshotsWithSimulations,
+  } from '../../stores/planSnapshots';
   import { plans } from '../../stores/plans';
   import { plugins } from '../../stores/plugins';
   import { simulationDataset, simulationDatasetId } from '../../stores/simulation';
@@ -25,6 +30,7 @@
   import { tooltip } from '../../utilities/tooltip';
   import { required, unique } from '../../utilities/validators';
   import Collapse from '../Collapse.svelte';
+  import Loading from '../Loading.svelte';
   import Field from '../form/Field.svelte';
   import Input from '../form/Input.svelte';
   import CancellableProgressRadial from '../ui/CancellableProgressRadial.svelte';
@@ -343,6 +349,7 @@
           {/if}
           <button
             class="st-button secondary"
+            disabled={!$planSnapshots}
             use:permissionHandler={{
               hasPermission: hasCreateSnapshotPermission,
               permissionError: $planReadOnly
@@ -355,6 +362,9 @@
           </button>
         </div>
         <div style="margin-top: 8px">
+          {#if $planSnapshotsLoading}
+            <Loading />
+          {/if}
           <CardList>
             {#each filteredPlanSnapshots as planSnapshot (planSnapshot.snapshot_id)}
               <PlanSnapshot
@@ -379,7 +389,7 @@
                 on:delete={() => effects.deletePlanSnapshot(planSnapshot, user)}
               />
             {/each}
-            {#if filteredPlanSnapshots.length < 1}
+            {#if !$planSnapshotsLoading && filteredPlanSnapshots.length < 1}
               <div class="st-typography-label">No Plan Snapshots Found</div>
             {/if}
           </CardList>

src/stores/planSnapshots.ts

@@ -8,7 +8,7 @@ import { gqlSubscribable } from './subscribable';
 
 /* Subscriptions. */
 
-export const planSnapshots = gqlSubscribable<PlanSnapshot[]>(gql.SUB_PLAN_SNAPSHOTS, { planId }, [], null);
+export const planSnapshots = gqlSubscribable<PlanSnapshot[] | null>(gql.SUB_PLAN_SNAPSHOTS, { planId }, null, null);
 
 /* Writeable. */
 
@@ -18,10 +18,12 @@ export const planSnapshotId: Writable<number | null> = writable(null);
 
 /* Derived. */
 
+export const planSnapshotsLoading: Readable<boolean> = derived([planSnapshots], ([$planSnapshots]) => !$planSnapshots);
+
 export const planSnapshot: Readable<PlanSnapshot | null> = derived(
   [planSnapshots, planSnapshotId],
   ([$planSnapshots, $planSnapshotId]) => {
-    const selectedPlanSnapshot = $planSnapshots.find(snapshot => {
+    const selectedPlanSnapshot = ($planSnapshots || []).find(snapshot => {
       return snapshot.snapshot_id === $planSnapshotId;
     });
 
@@ -32,7 +34,7 @@ export const planSnapshot: Readable<PlanSnapshot | null> = derived(
 export const planSnapshotsWithSimulations: Readable<PlanSnapshot[]> = derived(
   [planSnapshots, simulationDatasetsPlan],
   ([$planSnapshots, $simulationDatasetsPlan]) => {
-    return $planSnapshots.map(planSnapshot => {
+    return ($planSnapshots || []).map(planSnapshot => {
       const latestPlanSnapshotSimulation = ($simulationDatasetsPlan || []).find(simulation => {
         return simulation.plan_revision === planSnapshot?.revision;
       });