NAS-132671 / 25.04 / Initial Containers Loading - Hide empty component until data is received

src/app/pages/virtualization/components/all-instances/instance-list/instance-list.component.html

@@ -19,7 +19,7 @@ <h2>{{ 'Instances' | translate }}</h2>
 
   <ix-search-input1
     [maxLength]="100"
-    [disabled]="!instances().length"
+    [disabled]="!instances()?.length"
     [value]="searchQuery()"
     (search)="onSearch($event)"
   ></ix-search-input1>
@@ -28,7 +28,7 @@ <h2>{{ 'Instances' | translate }}</h2>
 <div class="instances">
   <div class="instances-header-row">
     <div class="cell checkbox">
-      @if (instances().length) {
+      @if (instances()?.length) {
         <mat-checkbox
           color="primary"
           ixTest="select-all-app"
@@ -45,7 +45,7 @@ <h2>{{ 'Instances' | translate }}</h2>
     <div class="cell actions">{{ 'Controls' | translate }}</div>
   </div>
 
-  @if (!filteredInstances()?.length) {
+  @if (instances() !== undefined && !filteredInstances().length) {
     <ix-empty [conf]="emptyConfig()"></ix-empty>
   }
 

src/app/pages/virtualization/components/all-instances/instance-list/instance-list.component.ts

@@ -66,7 +66,7 @@ export class InstanceListComponent {
   }
 
   protected readonly filteredInstances = computed(() => {
-    return this.instances().filter((instance) => {
+    return (this.instances() || []).filter((instance) => {
       return instance?.name?.toLocaleLowerCase().includes(this.searchQuery().toLocaleLowerCase());
     });
   });
@@ -96,7 +96,7 @@ export class InstanceListComponent {
     private deviceStore: VirtualizationDevicesStore,
   ) {
     toObservable(this.instances).pipe(
-      filter((instances) => !!instances.length),
+      filter((instances) => !!instances?.length),
       switchMap(() => this.activatedRoute.params),
       untilDestroyed(this),
     ).subscribe((params) => {

src/app/pages/virtualization/stores/virtualization-instances.store.spec.ts

@@ -34,7 +34,7 @@ describe('VirtualizationInstancesStore', () => {
   it('should have initial state', () => {
     expect(spectator.service.stateAsSignal()).toEqual({
       isLoading: true,
-      instances: [],
+      instances: undefined,
     });
   });
 

src/app/pages/virtualization/stores/virtualization-instances.store.ts

@@ -11,20 +11,20 @@ import { ApiService } from 'app/services/websocket/api.service';
 
 export interface VirtualizationInstancesState {
   isLoading: boolean;
-  instances: VirtualizationInstance[];
+  instances: VirtualizationInstance[] | undefined;
 }
 
 const initialState: VirtualizationInstancesState = {
   isLoading: true,
-  instances: [],
+  instances: undefined,
 };
 
 @UntilDestroy()
 @Injectable()
 export class VirtualizationInstancesStore extends ComponentStore<VirtualizationInstancesState> {
   readonly stateAsSignal = toSignal(this.state$, { initialValue: initialState });
   readonly isLoading = computed(() => this.stateAsSignal().isLoading);
-  readonly instances = computed(() => this.stateAsSignal().instances.filter(Boolean));
+  readonly instances = computed(() => this.stateAsSignal().instances?.filter(Boolean));
 
   constructor(
     private api: ApiService,