Browse Source

feat(client): migrate isLoading to input signal

pull/7265/head
KenTandrian 1 week ago
parent
commit
9c4a037ddf
  1. 10
      apps/client/src/app/components/portfolio-performance/portfolio-performance.component.html
  2. 4
      apps/client/src/app/components/portfolio-performance/portfolio-performance.component.ts

10
apps/client/src/app/components/portfolio-performance/portfolio-performance.component.html

@ -1,7 +1,7 @@
<div class="container p-0"> <div class="container p-0">
<div class="no-gutters row"> <div class="no-gutters row">
<div class="status-container text-muted text-right"> <div class="status-container text-muted text-right">
@if (errors()?.length > 0 && !isLoading) { @if (errors()?.length > 0 && !isLoading()) {
<ion-icon <ion-icon
i18n-title i18n-title
name="time-outline" name="time-outline"
@ -10,7 +10,7 @@
/> />
} }
</div> </div>
@if (isLoading) { @if (isLoading()) {
<div class="align-items-center d-flex"> <div class="align-items-center d-flex">
<ngx-skeleton-loader <ngx-skeleton-loader
animation="pulse" animation="pulse"
@ -24,7 +24,7 @@
} }
<div <div
class="display-4 font-weight-bold m-0 text-center value-container" class="display-4 font-weight-bold m-0 text-center value-container"
[hidden]="isLoading" [hidden]="isLoading()"
> >
<span #value id="value"></span> <span #value id="value"></span>
</div> </div>
@ -40,7 +40,7 @@
[isCurrency]="true" [isCurrency]="true"
[locale]="locale" [locale]="locale"
[value]=" [value]="
isLoading isLoading()
? undefined ? undefined
: performance?.netPerformanceWithCurrencyEffect : performance?.netPerformanceWithCurrencyEffect
" "
@ -52,7 +52,7 @@
[isPercent]="true" [isPercent]="true"
[locale]="locale" [locale]="locale"
[value]=" [value]="
isLoading isLoading()
? undefined ? undefined
: performance?.netPerformancePercentageWithCurrencyEffect : performance?.netPerformancePercentageWithCurrencyEffect
" "

4
apps/client/src/app/components/portfolio-performance/portfolio-performance.component.ts

@ -35,7 +35,6 @@ import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
templateUrl: './portfolio-performance.component.html' templateUrl: './portfolio-performance.component.html'
}) })
export class GfPortfolioPerformanceComponent implements OnChanges { export class GfPortfolioPerformanceComponent implements OnChanges {
@Input() isLoading: boolean;
@Input() locale = getLocale(); @Input() locale = getLocale();
@Input() performance: PortfolioPerformance; @Input() performance: PortfolioPerformance;
@Input() precision: number; @Input() precision: number;
@ -43,6 +42,7 @@ export class GfPortfolioPerformanceComponent implements OnChanges {
@Input() unit: string; @Input() unit: string;
public readonly errors = input<ResponseError['errors']>(); public readonly errors = input<ResponseError['errors']>();
public readonly isLoading = input<boolean>();
private readonly value = private readonly value =
viewChild.required<ElementRef<HTMLSpanElement>>('value'); viewChild.required<ElementRef<HTMLSpanElement>>('value');
@ -56,7 +56,7 @@ export class GfPortfolioPerformanceComponent implements OnChanges {
public ngOnChanges() { public ngOnChanges() {
this.precision = this.precision >= 0 ? this.precision : 2; this.precision = this.precision >= 0 ? this.precision : 2;
if (this.isLoading) { if (this.isLoading()) {
if (this.value().nativeElement) { if (this.value().nativeElement) {
this.value().nativeElement.innerHTML = ''; this.value().nativeElement.innerHTML = '';
} }

Loading…
Cancel
Save