Refactoring

apps/client/src/app/pages/portfolio/activities/create-or-update-activity-dialog/create-or-update-activity-dialog.component.ts

@@ -238,19 +238,19 @@ export class CreateOrUpdateActivityDialog implements OnDestroy {
         this.changeDetectorRef.markForCheck();
       });
 
-    this.activityForm.controls['searchSymbol'].valueChanges.subscribe(
+    this.activityForm.controls['searchSymbol'].valueChanges.subscribe(() => {
-      (value) => {
+      if (this.activityForm.controls['searchSymbol'].invalid) {
-        if (!this.activityForm.controls['searchSymbol'].invalid) {
+        this.data.activity.SymbolProfile = null;
-          this.activityForm.controls['dataSource'].setValue(
+      } else {
-            this.activityForm.controls['searchSymbol'].value.dataSource
+        this.activityForm.controls['dataSource'].setValue(
-          );
+          this.activityForm.controls['searchSymbol'].value.dataSource
-          this.updateSymbol();
+        );
-        } else {
+
-          this.data.activity.SymbolProfile = null;
+        this.updateSymbol();
-        }
-        this.changeDetectorRef.markForCheck();
       }
-    );
+
+      this.changeDetectorRef.markForCheck();
+    });
 
     this.filteredTagsObservable = this.activityForm.controls[
       'tags'

apps/client/src/app/pages/portfolio/activities/create-or-update-activity-dialog/create-or-update-activity-dialog.module.ts

@@ -9,9 +9,7 @@ import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatDialogModule } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatSelectModule } from '@angular/material/select';
-import { GfSymbolModule } from '@ghostfolio/client/pipes/symbol/symbol.module';
 import { GfSymbolAutocompleteModule } from '@ghostfolio/ui/symbol-autocomplete/symbol-autocomplete.module';
 import { GfValueModule } from '@ghostfolio/ui/value';
 
@@ -23,7 +21,6 @@ import { CreateOrUpdateActivityDialog } from './create-or-update-activity-dialog
     CommonModule,
     FormsModule,
     GfSymbolAutocompleteModule,
-    GfSymbolModule,
     GfValueModule,
     MatAutocompleteModule,
     MatButtonModule,
@@ -33,7 +30,6 @@ import { CreateOrUpdateActivityDialog } from './create-or-update-activity-dialog
     MatDialogModule,
     MatFormFieldModule,
     MatInputModule,
-    MatProgressSpinnerModule,
     MatSelectModule,
     ReactiveFormsModule
   ],

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

@@ -5,14 +5,17 @@
   [formControl]="control"
   [matAutocomplete]="symbolAutocomplete"
 />
+<mat-spinner
+  *ngIf="isLoading"
+  class="position-absolute"
+  matSuffix
+  [diameter]="20"
+></mat-spinner>
 <mat-autocomplete
   #symbolAutocomplete="matAutocomplete"
   [displayWith]="displayFn"
   (optionSelected)="onUpdateSymbol($event)"
 >
-  <mat-option *ngIf="isLoading">
-    <mat-spinner diameter="50"></mat-spinner>
-  </mat-option>
   <ng-container *ngIf="!isLoading">
     <mat-option
       *ngFor="let lookupItem of filteredLookupItems"
@@ -29,4 +32,3 @@
     </mat-option>
   </ng-container>
 </mat-autocomplete>
-<!--<mat-spinner *ngIf="isLoading" matSuffix [diameter]="20"></mat-spinner>-->

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

@@ -1,3 +1,8 @@
 :host {
   display: block;
+
+  .mat-mdc-progress-spinner {
+    right: 0;
+    top: calc(50% - 10px);
+  }
 }

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

@@ -84,13 +84,21 @@ export class SymbolAutocompleteComponent
       .pipe(
         debounceTime(400),
         distinctUntilChanged(),
-        filter((query) => isString(query) && query.length > 1),
+        filter((query) => {
-        tap(() => (this.isLoading = true)),
+          return isString(query) && query.length > 1;
-        switchMap((query: string) => this.dataService.fetchSymbols(query))
+        }),
+        tap(() => {
+          this.isLoading = true;
+          this.changeDetectorRef.markForCheck();
+        }),
+        switchMap((query: string) => {
+          return this.dataService.fetchSymbols(query);
+        })
       )
       .subscribe((filteredLookupItems) => {
-        this.isLoading = false;
         this.filteredLookupItems = filteredLookupItems;
+        this.isLoading = false;
+
         this.changeDetectorRef.markForCheck();
       });
   }