Feature/improve loading state during filtering on allocations page (#2141)

* Improve loading state

* Update changelog

CHANGELOG.md

@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Improved the loading state during filtering on the allocations page
 - Beautified the names with ampersand (`&`) in the asset profile
 
 ## 1.287.0 - 2023-07-09

apps/client/src/app/pages/portfolio/allocations/allocations-page.component.ts

@@ -139,6 +139,8 @@ export class AllocationsPageComponent implements OnDestroy, OnInit {
               ? $localize`Filter by account or tag...`
               : '';
 
+          this.initialize();
+
           return this.dataService.fetchPortfolioDetails({
             filters: this.activeFilters
           });
@@ -146,6 +148,8 @@ export class AllocationsPageComponent implements OnDestroy, OnInit {
         takeUntil(this.unsubscribeSubject)
       )
       .subscribe((portfolioDetails) => {
+        this.initialize();
+
         this.portfolioDetails = portfolioDetails;
 
         this.initializeAnalysisData();
@@ -237,6 +241,13 @@ export class AllocationsPageComponent implements OnDestroy, OnInit {
       }
     };
     this.platforms = {};
+    this.portfolioDetails = {
+      accounts: {},
+      filteredValueInPercentage: 0,
+      holdings: {},
+      platforms: {},
+      summary: undefined
+    };
     this.positions = {};
     this.sectors = {
       [UNKNOWN_KEY]: {
@@ -254,8 +265,6 @@ export class AllocationsPageComponent implements OnDestroy, OnInit {
   }
 
   public initializeAnalysisData() {
-    this.initialize();
-
     for (const [
       id,
       { name, valueInBaseCurrency, valueInPercentage }