perf: textarea description wrapper trigger to much changes (#1438)

Replaced the behavior subject by a simple observable.
Also introduce the function throttleTime to limit refresh cycles on the front-end.

---------

Co-authored-by: Marcel Eisentraut <meisentraut@intershop.de>
Co-authored-by: Silke <s.grueber@intershop.de>

src/app/shared/formly/wrappers/textarea-description-wrapper/textarea-description-wrapper.component.spec.ts

@@ -1,4 +1,4 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
 import { FormGroup } from '@angular/forms';
 import { FormlyModule } from '@ngx-formly/core';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
@@ -74,10 +74,11 @@ describe('Textarea Description Wrapper Component', () => {
     expect(element.querySelector('[data-testing-id="textarea-description"]')?.textContent.trim()).toEqual('1000');
   });
 
-  it('should display correct remaining length if field is not empty', () => {
+  it('should display correct remaining length if field is not empty', fakeAsync(() => {
     fixture.detectChanges();
     component.form.get('textarea')?.setValue('0123456789');
+    tick(1000);
     fixture.detectChanges();
     expect(element.querySelector('[data-testing-id="textarea-description"]')?.textContent.trim()).toEqual('990');
-  });
+  }));
 });

src/app/shared/formly/wrappers/textarea-description-wrapper/textarea-description-wrapper.component.ts

@@ -1,8 +1,8 @@
-import { ChangeDetectionStrategy, Component, OnDestroy, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { FieldWrapper } from '@ngx-formly/core';
 import { TranslateService } from '@ngx-translate/core';
-import { Observable, Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
+import { Observable } from 'rxjs';
+import { startWith, switchMap, throttleTime } from 'rxjs/operators';
 
 /**
  * Wrapper to display a description that counts the remaining characters in a field.
@@ -17,29 +17,24 @@ import { takeUntil } from 'rxjs/operators';
   templateUrl: './textarea-description-wrapper.component.html',
   changeDetection: ChangeDetectionStrategy.Default,
 })
-export class TextareaDescriptionWrapperComponent extends FieldWrapper implements OnInit, OnDestroy {
-  private destroy$ = new Subject<void>();
+export class TextareaDescriptionWrapperComponent extends FieldWrapper implements OnInit {
   description$: Observable<string>;
 
   constructor(private translate: TranslateService) {
     super();
   }
 
   ngOnInit() {
-    this.setDescription(this.formControl.value);
-    this.formControl.valueChanges.pipe(takeUntil(this.destroy$)).subscribe(value => {
-      this.setDescription(value);
-    });
+    this.description$ = this.formControl.valueChanges.pipe(
+      startWith(this.formControl.value),
+      throttleTime(500, undefined, { leading: true, trailing: true }),
+      switchMap(value => this.getDescription$(value))
+    );
   }
 
-  setDescription(value: string) {
-    this.description$ = this.translate.get(this.props.customDescription ?? 'textarea.max_limit', {
+  getDescription$(value: string): Observable<string> {
+    return this.translate.get(this.props.customDescription ?? 'textarea.max_limit', {
       0: Math.max(0, this.props.maxLength - (value?.length ?? 0)),
     });
   }
-
-  ngOnDestroy() {
-    this.destroy$.next();
-    this.destroy$.complete();
-  }
 }