Angular app freezing for a particular page

I am new to angular and I am facing an intermittent issue for weeks now. Sometimes during the initial loading of the page my app freezes and nothing works on the page. I have to close the tab after which the app works fine. After the initial freeze everything works well. I have found no error in the console and in the network tab. As far as I understand the issue might be related to infinite initialization while it is waiting to receive data from the API call leading to memory leak. The code is given below. please find if there is anything in there that might cause the issue. Thank you

import { Component, OnInit, OnDestroy } from '@angular/core';

import { FormBuilder, FormGroup } from '@angular/forms';

import { AppState } from '@app/_store/app.states';

import { Store } from '@ngrx/store';

import { Subject, Subscription } from 'rxjs';

import { AlertService } from '@service/alert.service';

import { CallSettingService } from '@service/settings/call-setting.service';

import { EntityType } from '@app/types/entity.type';

import { DialogService } from '@service/dialog.service';

import { OrganizationsService } from '@service/organizations';

import { CallInfoConfigComponent} from '../../../module/organizations-management/organizations/call-info-config/index'

@Component({

selector: 'app-email-settings',

templateUrl: './email-settings.component.html',

styleUrls: ['./email-settings.component.scss'],

})

export class EmailSettings implements OnInit {

public formGroup: FormGroup;

public isNew: boolean = true;

public orgId: string = '';

public configurationDetails = {};

public organizationDetails: any;

public dialogref: any;

public metadata: any;

public configId: any;

public FinalData: any;

public isNoDataFound: boolean = true;

private subscription$: Subscription;

grammarError: EntityType[] = [

{ id: '1', name: 'Academic Writing' },

{ id: '2', name: 'Capitalization' },

];

constructor(

private FB: FormBuilder,

private _store: Store,

private _alertService: AlertService,

private _callSettingService: CallSettingService,

private _organizationsService: OrganizationsService,

private dialogService: DialogService

) {

this._store.subscribe((state) => {

this.orgId = state?.auth?.user?.organization_id;

});

}

ngOnInit(): void {

this._callSettingService.getList('', this.orgId).subscribe((res: any) => {

if (res.status) {

this.isNew = false;

this.isNoDataFound = false;

this.metadata = res.data.ui_interaction_bullets;

this.configId = res.data.configuration_id;

this.FinalData = res.data;

this.configurationDetails = res.data;

this.initForm(res.data);

if (res?.data?.grammar_errors) {

const emailConfig = res?.data?.grammar_errors[1] || [];

this.grammarError = this.grammarError.map((ge: any) => ({

...ge,

checked: emailConfig.includes(+ge.id),

}));

}

} else {

this.initForm({});

}

});

this.getOrganizationDetail(this.orgId);

}

initForm(data: any) {

let delayed_start_threshold_secs = 0;

let delayed_resp_threshold_secs = 0;

let silence_threshold_secs = 0;

let resolution_time_secs = 0;

if (data?.text_delayed_start_threshold_secs) {

if (data.text_delayed_start_threshold_secs.length > 1) {

delayed_start_threshold_secs =

data.text_delayed_start_threshold_secs[1] / 60;

}

}

if (data?.text_delayed_resp_threshold_secs) {

if (data.text_delayed_resp_threshold_secs.length > 1) {

delayed_resp_threshold_secs =

data.text_delayed_resp_threshold_secs[1] / 60;

}

}

if (data?.text_silence_threshold_secs) {

if (data.text_silence_threshold_secs.length > 1) {

silence_threshold_secs = data.text_silence_threshold_secs[1] / 60;

}

}

if (data?.text_resolution_time_mins) {

if (data.text_resolution_time_mins.length > 1) {

resolution_time_secs = data.text_resolution_time_mins[1];

resolution_time_secs = resolution_time_secs / 60;

}

}

this.formGroup = this.FB.group({

configuration_id: [''],

text_delayed_start_threshold_secs: [delayed_start_threshold_secs || 48],

text_delayed_resp_threshold_secs: [delayed_resp_threshold_secs || 48],

text_silence_threshold_secs: [silence_threshold_secs || 48],

text_resolution_time_sec: [resolution_time_secs || 120],

ignore_bot_response: [data.ignore_bot_response || false],

grammar_errors: [data?.grammar_errors || []],

});

}

getOrganizationDetail(id: any){

this._organizationsService.getData(id).subscribe({

next: (res: any) => {

this.organizationDetails = { ...res.data };

}

})

}

openEmailInfoConfig(){

let data = this.organizationDetails;

this.dialogref = this.dialogService.openTemplateDialog(

CallInfoConfigComponent, {

panelClass: ['no-padding', 'fixed-header'],

maxWidth: '1250px',

height: 'auto'

},

{

metadataArr: data?.text_interaction_info?.email?.metadata?.fields,

ui_interaction_arr: this.metadata,

orgId: data.organization_id,

type: 'Email',

configId: this.configId,

FinalData: this.FinalData

}

);

}

save() {

let data = this.formGroup.getRawValue();

let jsonData: any = this.configurationDetails;

const grammarErrorList = this.grammarError

.filter((ge: EntityType) => ge.checked)

.map((ge: EntityType) => +ge.id);

if (!jsonData.grammar_errors) jsonData.grammar_errors = [];

jsonData.grammar_errors[1] = grammarErrorList;

if (

[null, undefined, ''].includes(

jsonData?.text_delayed_start_threshold_secs

)

)

jsonData['text_delayed_start_threshold_secs'] = [30, 2880];

jsonData['text_delayed_start_threshold_secs'][1] =

parseInt(data.text_delayed_start_threshold_secs) * 60;

if (

[null, undefined, ''].includes(jsonData?.text_delayed_resp_threshold_secs)

)

jsonData['text_delayed_resp_threshold_secs'] = [30, 2880];

jsonData['text_delayed_resp_threshold_secs'][1] =

parseInt(data.text_delayed_resp_threshold_secs) * 60;

if ([null, undefined, ''].includes(jsonData?.text_silence_threshold_secs))

jsonData['text_silence_threshold_secs'] = [30, 2880];

jsonData['text_silence_threshold_secs'][1] =

parseInt(data.text_silence_threshold_secs) * 60;

if ([null, undefined, ''].includes(jsonData?.text_resolution_time_mins))

jsonData['text_resolution_time_mins'] = [1, 7200];

jsonData['text_resolution_time_mins'][1] =

parseInt(data.text_resolution_time_sec) * 60;

jsonData['ignore_bot_response'] = data.ignore_bot_response;

this._callSettingService

.updateData(data.configuration_id, jsonData, this.orgId)

.subscribe((res: any) => {

if (res.status) {

this._alertService.success('Configuration updated!');

} else {

this._alertService.error(res.message);

}

});

}

ngOnDestroy() {

this.subscription$?.unsubscribe();

}

}

Continue reading...