perf: Use setTimeout instead of rxjs.timer and unsubscribe subscripti…

…ons in onDestroy

src/app/data-table/data-table-columns/data-table-columns.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, OnDestroy } from '@angular/core';
 import { ReplaySubject } from 'rxjs';
 
 export interface IFrDataTableColumn {
@@ -11,7 +11,7 @@ export interface IFrDataTableColumn {
   selector: 'fr-data-table-columns',
   template: ''
 })
-export class FrDataTableColumnsComponent {
+export class FrDataTableColumnsComponent implements OnDestroy {
 
   private _columns: Array<IFrDataTableColumn> = [];
   private _columns$: ReplaySubject<Array<IFrDataTableColumn>> = new ReplaySubject<Array<IFrDataTableColumn>>(1);
@@ -30,4 +30,7 @@ export class FrDataTableColumnsComponent {
     return this._columns$;
   }
 
+  ngOnDestroy() {
+    this._columns$.complete();
+  }
 }

src/app/data-table/data-table-rows/data-table-rows.component.ts

@@ -1,11 +1,11 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, OnDestroy } from '@angular/core';
 import { ReplaySubject } from 'rxjs';
 
 @Component({
   selector: 'fr-data-table-rows',
   template: ''
 })
-export class FrDataTableRowsComponent {
+export class FrDataTableRowsComponent implements OnDestroy {
 
   private _rows: Array<any> = [];
   private _rows$: ReplaySubject<Array<any>> = new ReplaySubject<Array<any>>(1);
@@ -24,4 +24,8 @@ export class FrDataTableRowsComponent {
     return this._rows$;
   }
 
+  ngOnDestroy() {
+    this._rows$.complete();
+  }
+
 }

src/app/data-table/data-table/data-table.component.ts

@@ -2,6 +2,7 @@ import {
   Component,
   Directive,
   AfterContentInit,
+  OnDestroy,
   ElementRef,
   Input,
   Output,
@@ -19,7 +20,7 @@ import {
   transition,
   animate
 } from '@angular/animations';
-import { Observable, of, timer } from 'rxjs';
+import { Observable, of, timer, Subscription } from 'rxjs';
 import { tap } from 'rxjs/operators';
 
 import { FrDataTableColumnsComponent, IFrDataTableColumn } from '../data-table-columns/data-table-columns.component';
@@ -106,7 +107,7 @@ export class FrDataTableStripeDirective {
     ])
   ]
 })
-export class FrDataTableComponent implements AfterContentInit {
+export class FrDataTableComponent implements AfterContentInit, OnDestroy {
 
   @HostBinding('class.fr-data-table-host') true;
 
@@ -139,6 +140,10 @@ export class FrDataTableComponent implements AfterContentInit {
 
   public ripples = { edit: false, delete: false, dots: false, chevronLeft: false, chevronRight: false };
 
+  private _columnsSubscription: Subscription;
+  private _rowsSubsctiption: Subscription;
+  private _timerSubscription: Subscription;
+
   constructor(
     private renderer: Renderer2,
     private ngZone: NgZone
@@ -153,17 +158,22 @@ export class FrDataTableComponent implements AfterContentInit {
       this.title = this.headerComponent.title;
     }
     if (this.columnsComponent) {
-      this.columnsComponent.columns$.subscribe(newColumns => this.columns = newColumns);
+      this._columnsSubscription = this.columnsComponent.columns$.subscribe(newColumns => this.columns = newColumns);
     }
     if (this.rowsComponent) {
-      this.rowsComponent.rows$.subscribe(newRows => this._updateRows(newRows));
+      this._rowsSubsctiption = this.rowsComponent.rows$.subscribe(newRows => this._updateRows(newRows));
     }
     if (this.footerComponent) {
       this.paginationInfo = this.footerComponent.paginationInfo;
       this.rowsPerPage    = this.paginationInfo.rowsPerPage;
     }
   }
 
+  ngOnDestroy() {
+    this._columnsSubscription.unsubscribe();
+    this._rowsSubsctiption.unsubscribe();
+  }
+
   private _updateRows(newRows: Array<any>): void {
     this.rows = newRows;
     this.checkedRowIndices = {};
@@ -230,11 +240,11 @@ export class FrDataTableComponent implements AfterContentInit {
     const checkedRows = this._filterCheckedRows();
     const event = new FrDataTableEvent(key, checkedRows, this.rowsPerPage, this.paginationInfo.page);
     this.actionListState = 'hidden';
-    timer(500).subscribe(() => {
+    setTimeout(() => {
       if (this.dataTableAction) {
         this.dataTableAction.emit(event);
       }
-    });
+    }, 500);
   }
 
   public paginationAction(action: string, rowsPerPage?): void {

src/app/dialog/dialog.service.ts

@@ -5,7 +5,7 @@ import {
   ReflectiveInjector,
   ComponentRef
 } from '@angular/core';
-import { Observable, Observer, timer } from 'rxjs';
+import { Observable, Observer } from 'rxjs';
 
 export class FrDialogContext<T> implements Observer<T> {
 
@@ -109,9 +109,9 @@ export class FrDialogService {
     }
 
     // Delay for dialog leaving animation
-    timer(500).subscribe(() => {
+    setTimeout(() => {
       componentRef.destroy();
       componentRef = undefined;
-    });
+    }, 500)
   }
 }

src/app/forms/checkbox/checkbox.component.ts

@@ -15,7 +15,6 @@ import {
   trigger,
 } from '@angular/animations';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { timer } from 'rxjs';
 
 export class FrCheckboxChange {
   source: FrCheckboxComponent;
@@ -112,9 +111,7 @@ export class FrCheckboxComponent implements OnInit, ControlValueAccessor {
     }
     this.value = !this.value;
     this.isRippleOn = true;
-    timer(1000).subscribe(() => {
-      this.isRippleOn = false;
-    });
+    setTimeout(() => this.isRippleOn = false, 1000);
 
     event.stopPropagation();
     this.emitChangeEvent();

src/app/forms/radio/radio/radio.component.ts

@@ -11,7 +11,6 @@ import {
   HostBinding
 } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { timer } from 'rxjs';
 
 export class FrRadioChange {
   public source: FrRadioComponent | null;
@@ -158,9 +157,7 @@ export class FrRadioComponent implements OnInit {
     this._eventChangeEvent();
 
     this.isRippleOn = true;
-    timer(1000).subscribe(() => {
-      this.isRippleOn = false;
-    });
+    setTimeout(() => this.isRippleOn = false, 1000);
 
     if (this.radioGroup) {
       this.radioGroup.value = this.value;

src/app/forms/time-picker/time-picker.component.ts

@@ -20,7 +20,6 @@ import {
   animate
 } from '@angular/animations';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { timer } from 'rxjs';
 
 export class FrTimePickerChange {
   source: FrTimePickerComponent;
@@ -255,14 +254,14 @@ export class FrTimePickerComponent implements OnInit, AfterViewInit, ControlValu
     this.setDials(this.pickTarget);
 
     // wait for dials rendering
-    timer(50).subscribe(() => {
+    setTimeout(() => {
       this.putDialsRightPosition();
       const targetDial = (pickTarget === HOURS)
         ? this.value.getHours()
         : this.value.getMinutes() - (this.value.getMinutes() % 5);
       this.putHandRightPosition(targetDial);
       this.changing = false;
-    });
+    }, 50);
   }
 
   public cancel(): void {

src/app/notification/notification.service.ts

@@ -20,7 +20,7 @@ import {
   transition
 } from '@angular/animations';
 import { FrNotificationType, FrNotificationParam } from './notification.types';
-import { Observable, Observer, timer } from 'rxjs';
+import { Observable, Observer } from 'rxjs';
 
 export class FrNotificationContext<T> implements Observer<T> {
   constructor(
@@ -265,10 +265,10 @@ export class FrNotificationContentComponent implements OnInit {
     this.notificationState = 'active';
 
     // This is for animation
-    timer(this.timeout - 500).subscribe(() => {
+    setTimeout(() => {
       if (!this.closed) {
         this.notificationState = 'void';
       }
-    });
+    }, this.timeout - 500);
   }
 }

src/app/ripple/ripple.directive.ts

@@ -5,7 +5,6 @@ import {
   HostListener,
   Input
 } from '@angular/core';
-import { timer } from 'rxjs';
 
 @Directive({
   selector: '[frRipple]'
@@ -42,9 +41,7 @@ export class FrRippleDirective {
     ripple.classList.add('fr-ripple-effect');
     element.appendChild(ripple);
 
-    timer(1300).subscribe(() => {
-      element.removeChild(ripple);
-    });
+    setTimeout(() => element.removeChild(ripple), 1300);
   }
 
 }