Refactoring

libs/ui/src/lib/symbol-autocomplete/symbol-autocomplete.component.html

@@ -12,11 +12,6 @@
   (optionSelected)="onUpdateSymbol($event)"
 >
   @if (!isLoading) {
-    @if (hasNoItemsPostLoading) {
-      <mat-option class="line-height-1" disabled="true" i18n
-        >Oops! Could not find any assets.
-      </mat-option>
-    }
     @for (lookupItem of filteredLookupItems; track lookupItem) {
       <mat-option
         class="line-height-1"
@@ -36,6 +31,12 @@
           }
         </small>
       </mat-option>
+    } @empty {
+      @if (control.value?.length > 1) {
+        <mat-option class="line-height-1" disabled="true" i18n
+          >Oops! Could not find any assets.
+        </mat-option>
+      }
     }
   }
 </mat-autocomplete>

libs/ui/src/lib/symbol-autocomplete/symbol-autocomplete.component.ts

@@ -85,7 +85,6 @@ export class GfSymbolAutocompleteComponent
   @ViewChild('symbolAutocomplete') public symbolAutocomplete: MatAutocomplete;
 
   public control = new FormControl();
-  public hasNoItemsPostLoading = false;
   public filteredLookupItems: (LookupItem & { assetSubClassString: string })[] =
     [];
 
@@ -118,17 +117,17 @@ export class GfSymbolAutocompleteComponent
 
     this.control.valueChanges
       .pipe(
-        debounceTime(400),
-        distinctUntilChanged(),
         filter((query) => {
           return isString(query) && query.length > 1;
         }),
-        takeUntil(this.unsubscribeSubject),
         tap(() => {
           this.isLoading = true;
 
           this.changeDetectorRef.markForCheck();
         }),
+        debounceTime(400),
+        distinctUntilChanged(),
+        takeUntil(this.unsubscribeSubject),
         switchMap((query: string) => {
           return this.dataService.fetchSymbols({
             query,
@@ -145,7 +144,6 @@ export class GfSymbolAutocompleteComponent
         });
 
         this.isLoading = false;
-        this.hasNoItemsPostLoading = !this.filteredLookupItems.length;
 
         this.changeDetectorRef.markForCheck();
       });