Make the loading general for rules

apps/client/src/app/components/rule/rule.component.html

@@ -47,22 +47,18 @@
     } @else {
       <div class="flex-grow-1">
         <div class="h6 my-1">{{ rule?.name }}</div>
-        <div class="evaluation">
-          @if (rule?.evaluation) {
-            {{ rule?.evaluation }}
-          }
-        </div>
+        <div class="evaluation">{{ rule?.evaluation }}</div>
       </div>
       <div>
         <button
           class="mx-1 no-min-width px-2"
           mat-button
-          [matMenuTriggerFor]="accountMenu"
+          [matMenuTriggerFor]="rulesMenu"
           (click)="$event.stopPropagation()"
         >
           <ion-icon name="ellipsis-horizontal" />
         </button>
-        <mat-menu #accountMenu="matMenu" xPosition="before">
+        <mat-menu #rulesMenu="matMenu" xPosition="before">
           <button mat-menu-item (click)="onUpdateRule(rule)">
             @if (rule?.isActive) {
               <ng-container i18n>Deactivate</ng-container>

apps/client/src/app/components/rules/rules.component.html

@@ -9,13 +9,13 @@
         </mat-card>
       }
 
-      @if (rules?.length === 0) {
+      @if (isLoading) {
         <gf-rule [isLoading]="true" />
       }
 
       @if (rules !== null && rules !== undefined) {
         @for (rule of rules; track rule.key) {
-          <gf-rule [rule]="rule" (ruleUpdated)="onRulesUpdated($event)" />
+          <gf-rule [rule]="rule" (ruleUpdated)="onRuleUpdated($event)" />
         }
       }
     </div>

apps/client/src/app/components/rules/rules.component.ts

@@ -17,13 +17,14 @@ import {
 })
 export class RulesComponent {
   @Input() hasPermissionToCreateOrder: boolean;
+  @Input() isLoading: boolean;
   @Input() rules: PortfolioReportRule[];
 
   @Output() rulesUpdated = new EventEmitter<UpdateUserSettingDto>();
 
   public constructor() {}
 
-  public onRulesUpdated(event: UpdateUserSettingDto) {
+  public onRuleUpdated(event: UpdateUserSettingDto) {
     this.rulesUpdated.emit(event);
   }
 }

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

@@ -105,6 +105,7 @@ export class FirePageComponent implements OnDestroy, OnInit {
 
   public initializePortfolioReport() {
     this.isLoadingPortfolioReport = true;
+
     this.dataService
       .fetchPortfolioReport()
       .pipe(takeUntil(this.unsubscribeSubject))
@@ -125,6 +126,7 @@ export class FirePageComponent implements OnDestroy, OnInit {
         this.feeRules =
           portfolioReport.rules['fees'].filter((rule) => rule.isActive) || null;
         this.isLoadingPortfolioReport = false;
+
         this.changeDetectorRef.markForCheck();
       });
   }
@@ -170,6 +172,7 @@ export class FirePageComponent implements OnDestroy, OnInit {
 
   public onRulesUpdated(event: UpdateUserSettingDto) {
     this.isLoading = true;
+
     this.dataService
       .putUserSetting(event)
       .pipe(takeUntil(this.unsubscribeSubject))

apps/client/src/app/pages/portfolio/fire/fire-page.html

@@ -124,13 +124,12 @@
             <gf-premium-indicator class="ml-1" />
           }
         </h4>
-        @if (!isLoadingPortfolioReport) {
         <gf-rules
           [hasPermissionToCreateOrder]="hasPermissionToCreateOrder"
+          [isLoading]="isLoadingPortfolioReport"
           [rules]="emergencyFundRules"
           (rulesUpdated)="onRulesUpdated($event)"
         />
-        }
       </div>
       <div class="mb-4">
         <h4 class="align-items-center d-flex m-0">
@@ -139,13 +138,12 @@
             <gf-premium-indicator class="ml-1" />
           }
         </h4>
-        @if (!isLoadingPortfolioReport) {
         <gf-rules
           [hasPermissionToCreateOrder]="hasPermissionToCreateOrder"
+          [isLoading]="isLoadingPortfolioReport"
           [rules]="currencyClusterRiskRules"
           (rulesUpdated)="onRulesUpdated($event)"
         />
-        }
       </div>
       <div class="mb-4">
         <h4 class="align-items-center d-flex m-0">
@@ -154,13 +152,12 @@
             <gf-premium-indicator class="ml-1" />
           }
         </h4>
-        @if (!isLoadingPortfolioReport) {
         <gf-rules
           [hasPermissionToCreateOrder]="hasPermissionToCreateOrder"
+          [isLoading]="isLoadingPortfolioReport"
           [rules]="accountClusterRiskRules"
           (rulesUpdated)="onRulesUpdated($event)"
         />
-        }
       </div>
       <div>
         <h4 class="align-items-center d-flex m-0">
@@ -169,14 +166,14 @@
             <gf-premium-indicator class="ml-1" />
           }
         </h4>
-        @if (!isLoadingPortfolioReport) {
         <gf-rules
           [hasPermissionToCreateOrder]="hasPermissionToCreateOrder"
+          [isLoading]="isLoadingPortfolioReport"
           [rules]="feeRules"
           (rulesUpdated)="onRulesUpdated($event)"
         />
-        }
       </div>
+      @if (inactiveRules?.length > 0) {
         <div>
           <h4 class="align-items-center d-flex m-0">
             <span i18n>Inactive</span>
@@ -184,14 +181,14 @@
               <gf-premium-indicator class="ml-1" />
             }
           </h4>
-        @if (!isLoadingPortfolioReport) {
           <gf-rules
             [hasPermissionToCreateOrder]="hasPermissionToCreateOrder"
+            [isLoading]="isLoadingPortfolioReport"
             [rules]="inactiveRules"
             (rulesUpdated)="onRulesUpdated($event)"
           />
-        }
         </div>
+      }
     </div>
   </div>
 </div>