Angular Component Blinking when Observable Data is Updated

Question

Angular Component Blinking when Observable Data is Updated

I have been developing an Angular component called GestionAchatTpvGenerationProgressBarComponent, which is responsible for showcasing a progress bar based on data from an Observable. This self-contained component operates with the OnPush change detection strategy and aims to illustrate the progression of specific purchases made through a TPV (Point of Sale Terminal) by updating via a stream of data (achatTitreViaTpv).

However, there seems to be a noticeable "flickering" effect or visible refresh each time the achatTitreViaTpv data is updated, resulting in a subpar user experience. I am keen on understanding the rationale behind this behavior and finding ways to mitigate it.

Below is a simplified version of the component's code:

@Component({
  selector: 'app-gestion-achat-tpv-generation-progress-bar',
  templateUrl: './gestion-achat-tpv-generation-progress-bar.component.html',
  styleUrls: ['./gestion-achat-tpv-generation-progress-bar.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [
    TranslateModule,
    NgIf,
    AsyncPipe,
    DecimalPipe
  ],
  standalone: true
})
export class GestionAchatTpvGenerationProgressBarComponent {
  @Select(GestionAchatTpvDetailState.recupereAchat) achatTitreViaTpv!: Observable<AchatTitreViaTpv>;
}

And the corresponding template:

<div class="progress-bar-tpv-generation-container">
    <ng-container *ngIf="achatTitreViaTpv | async as achat">
        <div class="progress-bar-tpv-generation-container__titles-container">
            <!-- Display of progress and estimated remaining time -->
        </div>
        <div class="progress-bar-tpv-generation-container__progress-bar">
            <div class="progress-bar-tpv-generation-container__progress-bar--fill" [style.width]="(condition) + '%'"></div>
        </div>
    </ng-container>
</div>

My attempted solutions include:

Optimizing data updates to prevent unnecessary re-emissions.
Utilizing the OnPush change detection strategy to reduce change checks.

Despite these efforts, the flickering issue persists whenever data is updated. Can anyone shed light on the potential causes of this behavior and suggest how it can be resolved?

angular typescript rxjs observable

Answer 1

Answer №1

There are several potential causes for the issue you're facing:

Have you checked if any ancestor component in the parent tree is causing unnecessary re-renders?
How frequently does the re-render occur? It may be helpful to subscribe to the stream and observe the behavior.

export class GestionAchatTpvGenerationProgressBarComponent implements AfterViewInit {
  @Select(GestionAchatTpvDetailState.recupereAchat) achatTitreViaTpv!: Observable<AchatTitreViaTpv>;

  ngAfterViewInit() {
    this.achatTitreViaTpv.subscribe({next: (val) => console.log("update:" + val); // something like that
  }
}

Frequent updates can lead to container flickering, especially if there are gaps in the data (e.g., progress jumping from 4% to 5% to null to 6%).

Have you tried removing the async part from the ngIf and checking for null just once? Change
```
 *ngIf="achatTitreViaTpv | async as achat"
```
to
```
 *ngIf="achatTitreViaTpv != null"
```
If the changes are occurring too frequently (multiple times per second), consider implementing throttle mechanisms. Since you're already using RxJS in Angular, you could explore using the throttle operator.

Answer 2

There are several potential causes for the issue you're facing:

Have you checked if any ancestor component in the parent tree is causing unnecessary re-renders?
How frequently does the re-render occur? It may be helpful to subscribe to the stream and observe the behavior.

export class GestionAchatTpvGenerationProgressBarComponent implements AfterViewInit {
  @Select(GestionAchatTpvDetailState.recupereAchat) achatTitreViaTpv!: Observable<AchatTitreViaTpv>;

  ngAfterViewInit() {
    this.achatTitreViaTpv.subscribe({next: (val) => console.log("update:" + val); // something like that
  }
}

Frequent updates can lead to container flickering, especially if there are gaps in the data (e.g., progress jumping from 4% to 5% to null to 6%).

Have you tried removing the async part from the ngIf and checking for null just once? Change
```
 *ngIf="achatTitreViaTpv | async as achat"
```
to
```
 *ngIf="achatTitreViaTpv != null"
```
If the changes are occurring too frequently (multiple times per second), consider implementing throttle mechanisms. Since you're already using RxJS in Angular, you could explore using the throttle operator.

Answer 3

Answer №2

The issue lies in the frequent triggering of Angular's Change Detection system. A potential solution is to implement Angular Signals for better control.

Here is the updated code snippet for the modified component:

import { OnInit, WritableSignal, signal } from '@angular/core';

//(...)

export class UpdatedComponent implements OnInit {
  
    dataToUpdate?: Observable<DataModel>;
  
    dataUpdateSignal: WritableSignal<DataModel | undefined> = signal(undefined);
  
    ngOnInit(): void {
      if(this.dataToUpdate) {
        this.dataToUpdate.subscribe((data: DataModel) => {
          //TODO: Check for changes in the line below:
          if(data.id != this.dataUpdateSignal()?.id ?? 0) {
            this.dataUpdateSignal.set(data);
          }
        });
    }
  } 
}

Revised line within the ng-container:

<ng-container *ngIf="this.dataUpdateSignal()">

I trust this brings clarity to the situation.

Note: Please provide additional code samples if further assistance is required.

Answer 4

The issue lies in the frequent triggering of Angular's Change Detection system. A potential solution is to implement Angular Signals for better control.

Here is the updated code snippet for the modified component:

import { OnInit, WritableSignal, signal } from '@angular/core';

//(...)

export class UpdatedComponent implements OnInit {
  
    dataToUpdate?: Observable<DataModel>;
  
    dataUpdateSignal: WritableSignal<DataModel | undefined> = signal(undefined);
  
    ngOnInit(): void {
      if(this.dataToUpdate) {
        this.dataToUpdate.subscribe((data: DataModel) => {
          //TODO: Check for changes in the line below:
          if(data.id != this.dataUpdateSignal()?.id ?? 0) {
            this.dataUpdateSignal.set(data);
          }
        });
    }
  } 
}

Revised line within the ng-container:

<ng-container *ngIf="this.dataUpdateSignal()">

I trust this brings clarity to the situation.

Note: Please provide additional code samples if further assistance is required.

Angular Component Blinking when Observable Data is Updated

Answer №1

Answer №2

Similar questions

Angular: Troubleshooting - potential bug in test case with jasmine causing TypeError: Undefined property 'cmd' OrAngular: Debugging

Are there better options than Angular timer, or is it still the top choice?

Incorporating a CSS Module into a conditional statement

Assigning value to a member variable in a TypeScript Angular class

The angular matAutocomplete box is positioned beneath the bootstrap navbar element

The file is missing the required fields in the Firestore document

Utilizing a function in an infinite loop within *ngFor along with an asynchronous pipe for an HTTP call

Is there a way to retrieve a compilation of custom directives that have been implemented on the Vue 3 component?

Unlocking the power of variables in Next.js inline sass styles

node js rest API returns a response of an empty request body when receiving form data

Warning: Unresolved promise: NullInjectorError encountered: StaticInjectorError(AppModule) when trying to use FormBuilder

There seems to be an issue with the Typescript code as it is showing an error

Utilize the error message as a label following the submission of the form

I am looking to use Angular Material to perform a calculation on two mat-cell input values and display the result in a separate mat-cell within dynamically added columns

Angular 10 edit mode issue: Unable to set selected value in dropdown

A method for cycling through parent and child objects in JavaScript (Vue.js) and storing them in an array - how to

"Exploring the Powerful Combination of NGRX Effects with Angular

Server request successful, but CORS error occurs in browser

Ways to require semicolons in a Typescript interface

How to retrieve various data points from a service and pass them to a component in