Bugfix/do not fetch holdings in assistant for each change (#4118)

* Do not fetch holdings in assistant for each change

* Update changelog

CHANGELOG.md

@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Optimized the holding selector in the assistant
 - Improved the language localization for German (`de`)
 - Upgraded `@internationalized/number` from version `3.5.2` to `3.6.0`
 

libs/ui/src/lib/assistant/assistant.component.ts

@@ -167,8 +167,6 @@ export class GfAssistantComponent implements OnChanges, OnDestroy, OnInit {
   ) {}
 
   public ngOnInit() {
-    this.initializeFilterForm();
-
     this.assetClasses = Object.keys(AssetClass).map((assetClass) => {
       return {
         id: assetClass,
@@ -272,12 +270,6 @@ export class GfAssistantComponent implements OnChanges, OnDestroy, OnInit {
 
     this.filterForm.disable({ emitEvent: false });
 
-    if (this.hasPermissionToChangeFilters) {
-      this.filterForm.enable({ emitEvent: false });
-    }
-
-    this.initializeFilterForm();
-
     this.tags =
       this.user?.tags
         ?.filter(({ isUsed }) => {
@@ -315,7 +307,7 @@ export class GfAssistantComponent implements OnChanges, OnDestroy, OnInit {
     );
   }
 
-  public async initialize() {
+  public initialize() {
     this.isLoading = true;
     this.keyManager = new FocusKeyManager(this.assistantListItems).withWrap();
     this.searchResults = {
@@ -335,7 +327,25 @@ export class GfAssistantComponent implements OnChanges, OnDestroy, OnInit {
     this.isLoading = false;
     this.setIsOpen(true);
 
-    this.changeDetectorRef.markForCheck();
+    this.dataService
+      .fetchPortfolioHoldings()
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe(({ holdings }) => {
+        this.holdings = holdings
+          .filter(({ assetSubClass }) => {
+            return !['CASH'].includes(assetSubClass);
+          })
+          .sort((a, b) => {
+            return a.name?.localeCompare(b.name);
+          });
+        this.setFilterFormValues();
+
+        if (this.hasPermissionToChangeFilters) {
+          this.filterForm.enable({ emitEvent: false });
+        }
+
+        this.changeDetectorRef.markForCheck();
+      });
   }
 
   public onApplyFilters() {
@@ -499,22 +509,6 @@ export class GfAssistantComponent implements OnChanges, OnDestroy, OnInit {
       );
   }
 
-  private initializeFilterForm() {
-    this.dataService
-      .fetchPortfolioHoldings()
-      .pipe(takeUntil(this.unsubscribeSubject))
-      .subscribe(({ holdings }) => {
-        this.holdings = holdings
-          .filter(({ assetSubClass }) => {
-            return !['CASH'].includes(assetSubClass);
-          })
-          .sort((a, b) => {
-            return a.name?.localeCompare(b.name);
-          });
-        this.setFilterFormValues();
-      });
-  }
-
   private setFilterFormValues() {
     const dataSource = this.user?.settings?.[
       'filters.dataSource'

libs/ui/src/lib/assistant/assistant.html

@@ -87,7 +87,7 @@
     </div>
   </div>
   <form [formGroup]="filterForm">
-    <ng-container *ngIf="!(isLoading || searchFormControl.value)">
+    @if (!searchFormControl.value) {
       <div class="date-range-selector-container p-3">
         <mat-form-field appearance="outline" class="w-100 without-hint">
           <mat-label i18n>Date Range</mat-label>
@@ -197,6 +197,6 @@
           </button>
         </div>
       </div>
-    </ng-container>
+    }
   </form>
 </div>