NAS-112767: Fixed loading

src/app/pages/account/groups/group-form/group-form.component.html

@@ -35,6 +35,7 @@
           [label]="'User Combobox'"
           formControlName="userCombo"
           [provider]="userProvider"
+          [tooltip]="'This is the tooltip'"
         ></ix-combobox2>
         <ix-combobox2
           [label]="'Normal Combobox'"

src/app/pages/common/ix-forms/components/ix-combobox2/ix-combobox2.component.html

@@ -6,7 +6,6 @@
       <span *ngIf="required">*</span>
     </label>
     <tooltip *ngIf="tooltip" [header]="label" class="tooltip" [message]="tooltip"></tooltip>
-    <mat-progress-spinner *ngIf="loading" class="loader" mode="indeterminate" [diameter]="15"></mat-progress-spinner>
   </div>
 
 
@@ -21,8 +20,9 @@
       (blur)="onTouch()"
       [matAutocomplete]="auto"
     >
-    <span *ngIf="shouldShowResetInput()" class="reset-input">
-      <mat-icon (click)="resetInput()" role="img" fontSet="mdi-set" fontIcon="mdi-close-circle"></mat-icon>
+    <span *ngIf="shouldShowResetInput() || loading" class="reset-input">
+      <mat-progress-spinner *ngIf="loading" class="loader" mode="indeterminate" [diameter]="15"></mat-progress-spinner>
+      <mat-icon (click)="resetInput()" *ngIf="shouldShowResetInput()" role="img" fontSet="mdi-set" fontIcon="mdi-close-circle"></mat-icon>
     </span>
     <mat-autocomplete #auto="matAutocomplete" [displayWith]="getDisplayWith"
       (optionSelected)="optionSelected($event.option.value)" (opened)="onOpenDropdown()">

src/app/pages/common/ix-forms/components/ix-combobox2/ix-combobox2.component.scss

@@ -42,7 +42,7 @@
 
 .loader {
   display: inline-block;
-  margin-left: 8px;
+  margin-left: 4px;
 }
 
 .label-container {
@@ -74,6 +74,7 @@
 .input-container mat-icon {
   font-size: 1rem;
   height: auto;
+  margin-left: 4px;
   width: auto;
 }
 

src/app/pages/common/ix-forms/components/ix-combobox2/ix-combobox2.component.ts

@@ -46,7 +46,7 @@ export class IxCombobox2Component implements ControlValueAccessor, OnInit {
   formControl = new FormControl(this);
   value: string | number = '';
   isDisabled = false;
-  filterValue = '';
+  filterValue: string;
   selectedOption: Option = null;
   syncOptions: Option[];
 
@@ -79,14 +79,17 @@ export class IxCombobox2Component implements ControlValueAccessor, OnInit {
       distinctUntilChanged(),
       untilDestroyed(this),
     ).subscribe((changedValue: string) => {
+      if (this.filterValue === changedValue) {
+        return;
+      }
       this.filterValue = changedValue;
       this.filterOptions(changedValue);
     });
-    this.filterOptions('');
+    this.filterChanged$.next('');
   }
 
   filterOptions(filterValue: string): void {
-    this.loading = true;
+    this.loading = this.filterValue !== '';
     this.cdr.markForCheck();
     this.provider.filter(this.options, filterValue).pipe(untilDestroyed(this)).subscribe((options: Option[]) => {
       this.loading = false;
@@ -123,11 +126,12 @@ export class IxCombobox2Component implements ControlValueAccessor, OnInit {
             if (atBottom) {
               this.loading = true;
               this.cdr.markForCheck();
-              this.provider.nextPage(this.filterValue).pipe(untilDestroyed(this)).subscribe((options: Option[]) => {
-                this.loading = false;
-                this.options.push(...options);
-                this.cdr.markForCheck();
-              });
+              this.provider.nextPage(this.filterValue !== null || this.filterValue !== undefined ? this.filterValue : '')
+                .pipe(untilDestroyed(this)).subscribe((options: Option[]) => {
+                  this.loading = false;
+                  this.options.push(...options);
+                  this.cdr.markForCheck();
+                });
             }
           });
       }