ngx-translate: messages take too long to be displayed

Question

We are facing some delay problems with the ngx-translate/translateService in our solution. When using it with some APIs to return failing or successful messages sometimes it takes too long until the message is displayed. For instance, in the example below it takes some time before the message is shown, given the user the feeling, the PIN was not created at all. Is there any way to improve this response?

src/assets/i18n/pt.yaml

transaction:
createdCodeMsg: "Novo código gerado com sucesso:"

src/assets/i18n/en.yaml

transaction:
createdCodeMsg: "New PIN sucessfully created: "

src/app/tools/createPIN/create-pin.component.ts

import { TranslateService } from '@ngx-translate/core';
...
    constructor(
        private translateService: TranslateService,
        private myServices: MyServices,
        ) {
        // get messages not part of a template
        this.subscription.push(
            this.translateService.stream([
                  'transaction.createdCodeMsg',
            ]).subscribe(values => {
                this.createdCodeMsg = values['transaction.createdCodeMsg'];
            })
        );
    }
...
    this.subscription.push(
        this.myServices.createPIN(this.createData).subscribe(data => {
            this.createDataResult = data;
            const myPin = this.createDataResult.pin;
            this.createdCodeMsg = this.createdCodeMsg + ' ' + myPin;
            this.msgs.push( { severity: 'success', summary: this.createdCodeMsg } );
        })
    );

Current version:

$ npm -v 5.8.0

Angular CLI: 1.7.4 Node: 8.4.0 OS: win32 x64 Angular: 5.2.4 ... animations, cdk, common, compiler, compiler-cli, core, forms ... http, platform-browser, platform-browser-dynamic, router

@angular/cli: 1.7.4 @angular/flex-layout: 5.0.0-beta.14 @angular-devkit/build-optimizer: 0.3.2 @angular-devkit/core: 0.3.2 @angular-devkit/schematics: 0.3.2 @ngtools/json-schema: 1.2.0 @ngtools/webpack: 1.10.2 @schematics/angular: 0.3.2 @schematics/package-update: 0.3.2 typescript: 2.4.2 webpack: 3.11.0

cin2e cin2e · Accepted Answer · 2018-05-18T10:04:36

I'd realized the problem is that angular renders the HTML at first. So I solved it with a simple render variable which would not be enabled as long as the message is not ready. In the meantime a loading icon should be displayed given the user the feedback the work is still on progress.

html:

<ng-container *ngIf="renderHTML; else elseTemplate">
   <myTemplate></myTemplate>
</ng-container>
<ng-template #elseTemplate>
  <div class="ui-table-loading ui-widget-overlay"></div>
  <div class="ui-table-loading-content">
    <i [class]="'fa fa-spin fa-2x ' + loadingIcon"></i>
  </div>
</ng-template>

component.ts:

...
renderHTML = false;
constructor(
        private translateService: TranslateService,
...
this.subscription.push(
        this.myServices.createPIN(this.createData).subscribe(data => {
            this.createDataResult = data;
            const myPin = this.createDataResult.pin;
            this.createdCodeMsg = this.createdCodeMsg + ' ' + myPin;
            this.msgs.push( { severity: 'success', summary: this.createdCodeMsg } );
            this.renderHTML = true;
        })
    );

ngx-translate: messages take too long to be displayed

1 Answers